css入门——选择器

时间：2022-11-03 11:21:52

引入与分类

        参考：样式与link标签。如

<head>
    <title>test---html</title>
    <meta charset="utf-8" />
    <!--引入外部样式表,定义了p标签的样式-->
    <link rel="stylesheet" type="text/css" href="./test.css">
    <style type="text/css">
    span{font-size: 50px;color: green}
    </style>
</head>
<body>
<p>这是外部样式表</p>
<span>这是内部样式表</span>
<p style="font-size:60px;color:blue">这是内联样式</p>
</body>

        在上面的代码中，通过三种方式分别引进了样式。通过link引进的称为外部样式表，通过<style>标签声明的称为内部样式表，直接在标签内部通过style属性声明的称为内联样式。这三咱样式的优先级依次增大，即：内联样式会覆盖内部样式表，内部样式表会覆盖掉外部样式表，外部样式表会覆盖掉浏览器自带的默认样式表。

        不同的css之间可以通过@import url()的形式导入。如@import url(test1.css);

语法

        CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。其中选择器指的就是要改变样式的html标签，声明就是要改变的属性和该属性的值。每一条声明都是用冒号进行赋值，不同的声明之间需要用分号分隔开(虽然最后一条声明不需要加上分号，但最好还是加上)，并且将所有的声明用一个{}括起来。如

css入门——选择器

声明

        声明的值是不需要加引号的，但如果声明的某个值由多个单词组成，就需要给这个值加上引号。如果声明的值是多个，这些值之间用逗号隔开。如

p{font-size: 40px;
</span>color: red;
/*由两个值构成，中间用逗号隔开；第二个值由多个单词组成，所以用引号引起来*/
font-family: Times,"Times New Roman";
}
        在上面的样式中，最后一条声明的值是多个，中间使用逗号进行分隔；并且第二个值是由多个单词组成的，所以需要使用引号。

        声明也是可以分组的，如上面的p标签，完成可以拆分成三个样式(一个样式中只有一条声明)。注意，对声明分组，一定要在各个声明的最后使用分号。

选择器

        选择器就是要改变样式的html标签。

元素选择器

        就是以html的标签做为选择器。它会匹配该文档该标签的所有实例 。因此，也可以为xml文档中的标签设置样式。如

<style type="text/css">
    test{color:yellow;}
</style>
<body>
<test>imyaxml</test>
</body>

分组

        可以将选择器进行分组，这样多个选择器可以使用同一条声明，只需要将不同的选择器用逗号分开即可。如

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

        在分组选择器中有一类很特殊的选择器：通配符选择器。该选择器可以与文档中的任何元素匹配。这个选择器等同于列出文档中所有的标签的一个分组选择器，并用*代表所有的标签。如

* {color:red;}

继承  

        在css规则中，子标签从父标签继承属性，如果子标签不想使用父标签的样式，那么需要给子标签重新添加样式。如

body  {
     font-family: Verdana, sans-serif;
     }

p  {
     font-family: Times, "Times New Roman", serif;
     }

类选择器

基础

        类选择器允许以一种独立于文档标签的方式来指定样式。为了将类选择器的样式与标签关联，必须将标签的clas属性指定为一个适当的值。然后在类名前面加点(.)，即可定义一个类选择器。 
<head>
    <title>test---html</title>
    <meta charset="utf-8" />
    <style type="text/css">
    .test{font-size: 50px;color: rgb(180,23,78);}
    </style>
</head>
<body>
<p class="test">imyaxml</p>
<p>mfdafa</p>
</body>

结合元素选择器

        类选择器也可以和元素选择器结合使用。只需要在点号(.)前加上标签名即可。如：p.test，该选择器会匹配class属性包含test的所有p标签。 

       虽然span标签的class值也为test，但在定义类选择器时结合了p标签，因此这个选择器对span是无效的。 
       这点要与后代选择器区分开：后代选择器不同的选择器之间用[空格]隔开，而结合选择器却是直接写在一起的。 

多类选择器
 
       class属性可以为词列表，不同词之间用空格隔开即可。因此，可将类选择器结合，如.demo.test，此时便要求class属性值中必须含有demo和test两个记号，否则不会被选择。 
       要注意：类选择器可能区分大小写，因此最好还是一致。


id选择器
 
        类似于类选择器，但以#开头，并且引用标签中id属性的值。 
        不同于class属性，id属性不支持词列表，因此id选择器不能结合使用，即无法写成#id1#id2形式。

        也要注意区分大小写，也支持与元素选择器结合使用。 
        一个文档中，id是唯一的，因此id选择器在一个文档中最多只会使用一次。(谷歌,safari是可以同名id) 

属性选择器
 
        根据标签的属性和属性值选择标签。 

简单选择
 
        只需要标签拥有该属性，而不考虑属性值是什么，此时就可以使用简单的属性选择器。其格式为 
标签名[属性名1][属性名2]{声明1;声明2} 
如 

    <style type="text/css">
    img[alt]{border: 5px solid red;}
    </style>
</head>
<body>
<img src="./bg.png" alt="test"/><img src="./bg.png" />
</body>

        该选择器只对第一个img标签有用，对第二个无效。因为第二个img标签并没有设置alt属性。
        如果想根据多个标签进行选择，只需要在后面跟上别的属性即可。如img[alt][width]，这个选择器不会选择只定义了alt属性的标签。 

根据属性值选择
 
        除了根据属性选择外，还可以进一步缩小选择范围——含有特定属性值的属性的标签才能被选择。基本格式为

标签名[属性名1="属性值1“][属性名2="属性值2“]{声明1;声明2} 
如 

    <style type="text/css">
    img[alt="test---html"]{border: 5px solid red;}
    </style>
</head>
<body>
<img src="./bg.png" alt="test---html" />
<img src="./bg.png" alt="test--html">
</body>

        上面的选择器只对第一个img标签有用，对第二个无效，因为第二个img标签的alt属性值不是test---html不满足属性选择器。 
        在上面的例子中，属性和属性值必须完全匹配才能被选择。
部分属性值选择
 
        如果属性值是词列表，并且只要词列表中存在某个词，该标签就会被选择。在此种情况下，需要使用部分属性值选择。格式 
标签名[属性名~=属性值][属性名~=属性值]{声明1;声明2} 

    <style type="text/css">
        img[class~="test"]{border: 5px solid red;}
    </style>
</head>
<body>
<img src="./bg.png" class="test demo ha" />
<img src="./bg.png" class="demo" />
</body>

        上述选择器会作用于第一个标签，不会作用于第二个标签。因为第一个标签的class属性值含有test词，而第二个没有。

        这点类似于与元素选择器结合使用时的类选择器，如p.test表示只要class属性值中有test词即可，完全等同行img[class~="test"]，但后者的适用范围更广，不但能用于class属性，还可用于别的属性，前者却只能使用于class属性。
匹配规则
 
css入门——选择器
 

        第三种指的是：属性值列表中必须包含有指定的value，而不是包含以value开头的词。如
 

<style type="text/css">
      h1[alt~="normal"]{color: red;font-size: 60px}
    </style>
</head>
<body>
<h1 alt="normal fadf">span下的em标签</h1>
<h1 alt="normal1 fadf">span下的em标签</h1>
 
        这个属性选择器可以选择第一个，但不能选择第二个。因为第二个h1标签的alt属性值并不包含normal单词。 

        第四个只会匹配以value-开头的属性值(将属性值当作整个单词)或者属性值为value的标签。如
 

<style type="text/css">
      h1[alt|="normal"]{color: red;font-size: 60px}
    </style>
</head>
<body>
<h1 alt="normal-  demo">span下的em标签</h1>
<h1 alt="normal">fdaf</h1>
<h1 alt="normala">span下的em标签</h1>
</body>


        上述的选择器只会匹配前两个标签，不会匹配最后一个标签。 

其中后三者可按如下理解
 

css入门——选择器
 

        不管属性值是词列表还是单个单词，前后是否有空格，在^$*时，都按一整个单词(空格也算)匹配。如[class^="test"]是可以匹配class属性值为"test-    demo  ---haha"的标签的，但无法匹配"    test"标签。
 

后代选择器
 

        将父标签与后代标签通过空格连接组成的选择器。具体可以理解为：在父标签下的某个后代标签才会被选择，否则不会被选择。如h1 em{color:red;}只会作用于h1标签下的em标签，并不会作用于p标签下的em标签。
 

        后代标签与父标签的层级间隔可以无限。
 

        可以和其它选择器结合使用，如
 

h1[alt^="normal"] em{color: red;}
 
        它表示alt属性值以normal开头的h1标签下的em标签才会被选中，其余的都不会被选中。 

子元素选择器
 

        类似于后代选择器，但子元素选择器只能选择做为某标签子标签的标签，并且用>进行连接。如



h1>em{color: red;}
 
        它表示做为h1的子标签的em标签才会被选中。 

相邻兄弟选择器
 

        两标签具有相同的父标签，并且两标签相邻，且标签出现的顺序和样式中定义的顺序一致，第二个标签才会被选中。如
 

p + h1 {margin-top:50px;}
 
        它会作用于
 

<p>This is paragraph.</p>
<h1>This is a heading.</h1>
 

        但如果将样式改写成h1+p，那么不会作用于下面的代码。
 

伪类选择器
 

        所谓的伪类就是一个状态，比如鼠标悬停，已点击过等。类似于android中的selector。格式为
 

selector : pseudo-class {property: value}
 
常用的伪类如下： 
css入门——选择器 

最常用的就是:hover，鼠标悬停时的状态。如：
 

h1:hover{color: red;font-size: 60px}
 

        active：鼠标点上去尚未放开时的状态，该状态一般不写。hover：鼠标放上去，但未点击时的状态；visited：已经访问过的状态。写这几种状态时，一定要按lvha顺序进行操作，其中a:link可以简写成a。



优先级
 

        总体来说，谁的范围越精确，最后的结果就按哪个选择器进行。因此，类选择器比元素选择器的优先级高，即使元素选择器是后代选择器，兄弟选择器，子元素选择器。而属性选择器又比类选择器优先级高，但id选择器比属性选择器优先级高(因为id是唯一的，而属性可以不唯一)。如果说
 

关系如下：
 

元素选择器 < 类选择器 < 属性选择器 < id选择器
标签：
相关文章