CSS3的新特性① -- 选择器

文章目录

新增的CSS3特性有兼容性问题，ie9+才支持

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

1. 属性选择器
2. 结构伪类选择器
3. 伪元素选择器

属性选择器

属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。

注意：类选择器、属性选择器、伪类选择器，权重为 10。

例如：

/* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
        input[value] {
            color:pink;
        } 
        /* 只选择 type =text 文本框的input 选取出来 */
        input[type=text] {
            color: pink;
        }
        /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
        div[class^=icon] {
            color: red;
        }
        section[class$=data] {
            color: blue;
        }
        div.icon1 {
            color: skyblue;
        }
        /* 类选择器和属性选择器 伪类选择器 权重都是 10 */

等于号后面的部分，可以带引号，也可以不带引号。

结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素， 常用于根据父级选择器里面的子元素

注意：类选择器、属性选择器、伪类选择器，权重为 10。

例如：

/* 1. 选择ul里面的第一个孩子 小li */
        ul li:first-child {
            background-color: pink;
        }
        /* 2. 选择ul里面的最后一个孩子 小li */
        ul li:last-child {
            background-color: pink;
        }

nth-child（n）

nth-child（n） 选择某个父元素的一个或多个特定的子元素

n 可以是数字，关键字和公式

• n 如果是数字，就是选择第 n 个子元素， 里面数字从1开始…
• n 可以是关键字：even 偶数，odd 奇数
• n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )

注意：公式里面的未知数必须是n

例如：

①当n是数字的时候

/* 3. 选择ul里面的第2个孩子 小li */
         ul li:nth-child(2) {
            background-color: skyblue;
        }

②当n是关键字的时候

/* 1.把所有的偶数 even的孩子选出来 */
        ul li:nth-child(even) {
            background-color: #ccc;
        }

        /* 2.把所有的奇数 odd的孩子选出来 */
        ul li:nth-child(odd) {
            background-color: gray;

③当n是公式的时候

/* 3.nth-child(n) 从0开始 每次加1 往后面计算  这里面必须是n 不能是其他的字母 选择了所有的孩子*/
        ol li:nth-child(n) {
            background-color: pink;
        } 
        /* 4.nth-child(2n)母选择了所有的偶数孩子 等价于 even*/
        ol li:nth-child(2n) {
            background-color: pink;
        }

nth-child 和nth-of-type的区别

两者在运行的原理上是有区别的：
例如对于以下的代码：

<section>
     <p>1</p>
     <div>2</div>
     <div>3</div>
</section>

section div:nth-child(1) {
            background-color: red; 
        }

1，2，3都不会被标红。因为nth-child 会把所有的盒子都排列序号，执行的时候首先看 :nth-child(1) ，之后再回去看 前面 div是否符合。

section div:nth-of-type(1) {
     background-color: blue;
}

会将2标蓝。因为nth-of-type 会把指定元素的盒子排列序号，执行的时候首先看 div指定的元素 ，之后回去看 :nth-of-type(1) 第几个孩子。

区别：

1. nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
2. nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子

总结

小结

• 结构伪类选择器一般用于选择父级里面的第几个孩子
• nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配
• nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
• 关于 nth-child（n） 我们要知道 n 是从 0 开始计算的，要记住常用的公式
• 如果是无序列表，我们肯定用 nth-child 更多
• 类选择器、属性选择器、伪类选择器，权重为 10。

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

注意：

• before 和 after 创建一个元素，但是属于行内元素
• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
• 语法： element::before {}
• before 和 after 必须有 content 属性
• before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
• 伪元素选择器和标签选择器一样，权重为 1

例如：
现在有

<div>
     是
</div>

然后我们利用伪元素选择器进行新标签元素的创建。

div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* div::before 权重是2 */
        div::before {
            /* 这个content是必须要写的 */
            /* display: inline-block; */
            content: '我';
            /* width: 30px;
            height: 40px;
            background-color: purple; */
        }
        div::after {
            content: '小猪佩奇';
        }

呈现出来就是

伪元素选择器使用场景

场景一：伪元素字体图标

例如：

右边这个下拉箭头就可以用伪元素选择器做出来

代码实现：

p::before {
 position: absolute;
 right: 20px;
 top: 10px;
 content: '\e91e';
 font-size: 20px;
 }

位置用定位来做，注意子绝父相

场景二：遮罩层效果

例如：

鼠标经过后

代码实现：

.tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .tudou::before {
            content: '';
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }

        /* 当我们鼠标经过了 土豆这个盒子，就让里面before遮罩层显示出来 */
        .tudou:hover::before {
            /* 而是显示元素 */
            display: block;
        }

场景三：伪元素清除浮动

额外标签法也称为隔墙法，是 W3C 推荐的做法。

注意： 要求这个新的空标签必须是块级元素。

如果使用伪元素的话：

.clearfix:after { 
 content: ""; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
}

或者

.clearfix:before,.clearfix:after {
 content:"";
 display:table; 
}
.clearfix:after {
 clear:both;
}

之所以不直接display：block 是因为块级元素不能在一行，这样的话后面的块级元素会被挤出去，放在了第二行。