CSS3选择器（一）

最新推荐文章于 2023-06-22 15:09:42 发布

小白变怪兽

最新推荐文章于 2023-06-22 15:09:42 发布

阅读量464

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/u013558749/article/details/48372523

版权

css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

选择器是CSS3中的一个重要的内容，使用它可以大幅度的提高开发人员书写或者修改样式表的工作效率；

1.首先先来介绍一下css3中的属性选择器的概念（其中att代表属性，val代表属性值）
这里先给出一组简单的html样式：

<body>
       <div class="one">测试内容1</div>
       <div class="sectionone">测试内容2</div>
       <div class="twosection">测试内容3</div>
       <div class="fourdiv">测试内容4</div>
       <div class="fivediv">测试内容5</div>
       <div class="twodiv">测试内容6</div>
       <p>
        这是第一行文字；<br/>
        这是第二行文字；
       </p>
    </body>

[att = val]选择器
这种样式在CSS2中我们就用到了，所以就不多说了，属性选择器主要讲的是以下增加的三种。（eg:div[class=”one”]{ 样式 }）

[att* = val]选择器(*代表的是所有中只要有包含就满足)
[att* = val]这种选择器代表的是只要“att”属性中包含“val”属性值，即可执行指定的样式；（eg：div[class*=”section”]{ background:”red”: }）这样就能同时将第二个和第三个div(他们的class名字内都包含有section)赋予背景色为红色的这个样式；

[att^ = val]选择器（^代表的是开头只要有包含就满足）
[att^ = val]这种选择器代表的是只要“att”属性的开头是“val”属性值，即可执行指定的样式；eg:div[class^=”one”]{ background:”blue”; }）这样就能同时将第三个和第六个div（它们的class名字的开头都是two）赋予背景色为蓝色的这个样式；

[att $= val]选择器（$ 代表的是结尾只要有包含就满足）
[att $= val]这种选择器代表的是只要“att”属性的结尾头是“val”属性值，即可执行指定的样式；（eg:div[class$ =”div”]{ background:”pink”; }）这样就能同时将第四个和第五个和第六个div（它们的class名字的结尾都是div）赋予背景色为粉红色的这个样式；

2.接下来让我们来了解一下结构性伪类选择器;
所谓的伪元素选择器，是指并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的为元素使用的选择器，使用方法如下：
选择器：伪元素{属性：值}
first-line:用于为某个元素中的第一行文字使用样式；（eg: p:first-line{ color:purple; }）这样p标签里的第一行文字就会变成紫色。
first-letter:用于为某个元素中第一个首字母或第一个字应用样式；（eg: p:first-letter{ font-weight:700;}）这样p段落中的第一个字就会加粗；
before:before伪元素是用于在选中的元素之前插入内容，使用样式为：
<元素>：before {
content:插入的内容，可以是图片/文字；
可以在这儿给插入的内容添加样式，也可不写；
}
after:after伪元素是用于在选中的元素之后插入内容，使用样式为：
<元素>：after{
content:插入的内容，可以是图片/文字；
可以在这儿给插入的内容添加样式，也可-不写；
}

3.接下来再来讲四个选择器（root,not,empty,target）
root选择器指的就是根元素，在我们的页面中也就是html元素 (例 body { background:yellow;}:root { background:red;})
not选择器：当你相对某个结构元素使用样式，但是想排除其中的某个元素让它不使用这种样式的时候，就可以用到这个not选择器了。（例 body:not(p){ background:yellow; })这里指的是除了p标签意外的body里面的元素的背景色为黄色；
empty选择器：使用empty选择器来制定当元素内容为空白时使用的样式；（例 :empty{ background:#ff4200;}）这样内容为空的标签的背景色就被设定为橙色了。
target选择器使用target选择器来对页面中某个target元素（该元素的ID被当作页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。（例 :target { background:#ff4200; }）即当点击链接跳转到对应的div的时候，对应的div的背景色将应用这个样式。

4.接下来再来介绍下另外四个选择器（first-child,last-child,nth-child,nth-last-child )
first-child:指定第一个子元素；
last-child:指定最后一个子元素；
nth-child(n):可以根据自己需要指定第几个子元素（eg li:nth-child(3){ 样式 }）代表的是指定的是第三个子元素。
nth-last-child(n):代表的是倒数第n个；
讲到这儿，那就有一个不得不说的了，那就是对所有第奇数个元素或第偶数个子元素使用样式；使用方法如下：
nth-child(odd){ 样式 }//所有正数下来的第奇数个元素
nth-child(even) { 样式 } //所有正数下来的第偶数个元素
注意：讲到这儿奇数个和偶数个，那么就有一个问题需要注意了，假设现有html代码如下所示；

      <div>
            <h2></h2>
            <p></p> 
            <h2></h2>
            <p></p> 
            <h2></h2>
            <p></p> 
            <h2></h2>
            <p></p> 
      </div>

这种情况下，如果使用h2:nth-child(odd){ background:yellow; }你会发现效果和我们所预期的不一样，所有的h2标签的背景都变成了黄色。这是为什么呢？
原来nth-child选择器咋计算子元素是奇数个还是偶数个元素的时候，是连同父元素中的所有子元素一起计算的，也就是说我们写的h2：nth-chihld(odd)这句话的含义并不是指“针对div元素中第奇数个h2子元素来使用”，而是指“当div元素中的第奇数个子元素如果是h2元素的时候使用”。
为了避免上方注意所述问题，在此便引出了nth-of-type和nth-last-of-type选择器。这时候再来写nth-of-type(odd){ background:yellow; }就可以实现我们想要的效果了。