程序员

1-2-9【CSS3】CSS3新增选择器

2020-11-05  本文已影响0人  Liyager

题外话：时间不多了。

文章内容输出来源：拉勾教育大前端就业集训营

1.新增选择器

2.子级选择器

说明：第一个p元素与box1类的div元素是父子关系，所以被选择器选中了。第二个p元素，虽然是祖先关系，但不是父子关系，所以没有被选中。

回顾：子级选择器和后代选择器有些相似，不同点在于，子级选择器必须是父子关系，而后代选择器，是祖先关系即可。

3.兄弟选择器

选择器 简介
element1+element2 匹配同一个父元素中，紧跟在element1后面的一个element2元素
element1~element2 匹配同一个父元素中，在element1后面所有的element2元素

相邻兄弟选择器

说明：只有第一个p元素满足“紧跟在h2元素后”，所以只有第一个p元素被选中了。

说明：第一个p元素不满足“紧跟在h2元素后”，因为紧跟在h2元素后的是div元素，所以没有任何一个p被选中。

说明：该案例比较特殊，因为从第二个p标签开始，都满足选择器的条件，所以都被选中了。

其他兄弟选择器

说明：第一个p元素并没有满足在h2的后面，所以没有被选中。从第二个p元素开始，都满足条件，所以都被选中了。

说明：第三个p标签由于和h2标签不是同一个父元素，所以没有被选中。

4.结构伪类选择器

选择器 简介
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中的最后一个子元素E
E:nth-child(n) 匹配父元素中的第n个子元素E
E:first-of-type 指定类型E中的第一个
E:last-of-type 指定类型E中的最后一个
E:nth-of-type(n) 指定类型E的第n个

E:first-child和E:last-child

注意！ 省略子元素写法，在冒号前面，必须有一个空格！完整写法，在冒号前面，不能有空格！

说明：第一个选择器的意思是，类名为box的父元素中的第一个子元素p，满足条件。第二个选择器的意思是，类名box的父元素中的第一个子元素h2，但是！h2在其子元素中排行第2，所以并不符合条件！

说明：该写法为“省略子元素写法”，仅指定了一个类名为box的父元素，没有指定子元素，所以只要是父元素的第一个子元素就满足条件。

拓展：一般来说使用“省略子元素写法”即可，因为一旦子元素写错了，是不会有任何元素被选中的。

E:nth-child(n)

说明：与first-child选择器类似，一旦指定了子元素，要满足两个条件才能被选中，所以一般使用省略子元素写法。

说明：选择器中没有指定子元素，所以子元素中的第三个元素满足条件，被选中了。

<style>
    .box :nth-child(3){
        color: pink;
    }
</style>

n可以是数字，数字是几，就选中第几个子元素。

<style>
    .box :nth-child(even){
        color: pink;
    }
</style>

n可以是关键字，even是指顺序为偶数的子元素，odd是指顺序为奇数的子元素。

<style>
    .box :nth-child(2n+5){
        color: pink;
    }
</style>

n可以是公式，其中n是从0开始计算的整数。在本案例中，2n+5的意思是从5开始的奇数。

E:first-of-type和E:last-of-type

说明：完整写法指定了子元素，所以会从类名为box的父元素中，筛选所有h2子元素，选中他们中的第一个。

说明：没有指定子元素，就会将父元素中所有种类的元素的第一个选中。

E:nth-of-type(n)

说明：这里只举省略子元素写法的例子。由于没有指定子元素，所以选中了所有类型子元素中的第二个。

5.伪元素选择器

选择器 介绍
E::before 在E元素内部的前面插入一个元素
E::after 在E元素内部的后面插入一个元素
E::first-letter 选择到了E容器的第一个字母
E::first-line 选择到了E容器内的第一行文本

拓展：H5新规范，伪元素选择器采用双冒号写法。当然，目前浏览器对于单冒号和双冒号都是兼容的。

说明：before会在其子元素中的，最前面插入一个元素；而after会在其子元素中的，最后面插入一个元素。

结构伪类选择器8.jpg

说明：first-letter会在选中E容器中文本内容的第一个字母；first-line会选中在E容器中文本内容的第一行内容，“第一行”的范围由实际显示效果决定。
你会发现缩小or放大浏览器窗口大小，选中的文字范围也不同。

6.属性选择器

选择器 简介
E[att] 选择具有att属性的E元素
E[att="val"] 选择具有att属性且属性值等于val的E元素
E[att^="val"] 匹配具有att属性，且值以val开头的E元素
E[att$="val"] 匹配具有att属性，且值以val结尾的E元素
E[att*="val"] 匹配具有att属性，且值中含有val的E元素 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p[class]{
            color: pink;
        }
    </style>
</head>
<body>
    <p class="p1">我是一句带class属性的话</p>
    <p>我是一句普通的话</p>
</body>
</html>

说明：属性选择器选择了“带有class属性的p元素”，所以第一句话被选中了，而第二句话没有被选中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p[class$="ownP"]{
            color: pink;
        }
    </style>
</head>
<body>
    <p class="myPFlag">我是一句带class属性的话</p>
    <p class="unkownP">我是一句普通的话</p>
</body>
</html>

说明：属性选择器选择了“带有class属性，且以ownP结尾的p元素”，所以第二句话被选中了。

7.选择器权重

前端文章汇总目录

https://www.jianshu.com/p/6d80dd616ff4

结束语：一花一世界，一木一浮生，愿与诸君共勉

上一篇 下一篇

猜你喜欢

热点阅读