CSS3 新增选择器的实例CSS3选择器新增问题的实现CSS 选择所有子元素添加样式的方法CSS选择器中的正则表达式使用一文教你玩转CSS 组合选择器

结构(位置)伪类选择器（CSS3)

• :first-child :选取属于其父元素的首个子元素的指定选择器
• :last-child :选取属于其父元素的最后一个子元素的指定选择器
• :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
• :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 n 可以是数字、关键词或公式​

 li:first-child { /* 选择第一个孩子 */ color: pink; } li:last-child { /* 最后一个孩子 */ color: purple; } li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */ color: skyblue; }

属性选择器

选取标签带有某些特殊属性的选择器 我们成为属性选择器

 /* 获取到 拥有 该属性的元素 */ div[class^=font] { /* class^=font 表示 font 开始位置就行了 */ color: pink; } div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */ color: skyblue; } div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */ color: green; } 
属性选择器
属性选择器
属性选择器
属性选择器
属性选择器
属性选择器123
属性选择器footer
属性选择器footer
属性选择器
属性选择器
属性选择器
 input[type=text] div[class*=tao]

伪元素选择器（CSS3)

• E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
• E::first-line 文本第一行；
• E::selection 可改变选中文本的样式；

 p::first-letter { font-size: 20px; color: hotpink; } /* 首行特殊样式 */ p::first-line { color: skyblue; } p::selection { /* font-size: 50px; */ color: orange; }

4、E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

 div::befor { content:"开始"; } div::after { content:"结束"; }

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

":" 与 "::" 区别在于区分伪类和伪元素

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查

注意

伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。

总结

以上所述是小编给大家介绍的CSS3 新增选择器的实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！