CSS3的新特性① -- 选择器

CSS3的新特性① -- 选择器

文章目录

​​属性选择器​​​​结构伪类选择器​​

​​nth-child（n）​​​​nth-child 和nth-of-type的区别​​​​总结​​

​​伪元素选择器​​​​伪元素选择器使用场景​​

​​场景一：伪元素字体图标​​​​场景二：遮罩层效果​​​​场景三：伪元素清除浮动​​

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

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

属性选择器结构伪类选择器伪元素选择器

属性选择器

属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者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 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) 第几个孩子。

区别：nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配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 { 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 是因为块级元素不能在一行，这样的话后面的块级元素会被挤出去，放在了第二行。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。