CSS3新增了哪些选择器？（属性、结构伪类、伪元素选择器）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS3新增了哪些选择器？（属性、结构伪类、伪元素选择器），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1833字，纯文字阅读大概需要3分钟。

内容图文

在css3提供的新选择器之前，选择一个元素需要借助id或者class，css3新增的选择器可以更灵活的去选择需要的元素，那css3提供了哪些好用的选择器呢？

首先就是属性选择器，我们可以通过属性选择器在同样的标签/类中选择出具有相同属性的元素，不用额外再添加class或者id。

比如需要选择出input标签中具有value属性的内容，就可以按以下方式

// css
input[value]{
???color: #333;
}

// html
<input type="text" value="请输入用户名">
<input type="text">

属性选择器还有以下匹配规则（E表示选择器，att表示属性值，val表示匹配的内容）

选择符	简介
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元素

选择出input标签中type为password的元素

// css
input[type=password]{
? ?color: #000
}
// html
<input type="text">
<input type="password">

选择出div标签中class以movie开头的元素

// css
div[class^=movie]{
? ??color: brown
}

// html
<div class="movie-sky">天空之城</div>
<div class="movie-cat">龙猫</div>
<div class="movie-windy">起风了</div>
<div class="tv">武林外传</div>

按照以上五种属性选择规则，可以自由的选择具有某些特征的元素，那么如果此时我需要选择的元素没有单独的属性呢。
比如我想要在一串列表中选择出奇数项和偶数项元素，分别设置不同的背景颜色，此时就需要结构伪类选择器登场了。
结构伪类选择器可以按下标选出指定项，比如第一项 :first-child，最后一项 :last-child，奇数项 :nth-child(even)，偶数项 :nth-child(odd)，第任何一项 :nth-child(n)

拿上述选择器做一个演示

// html
<ul>
? <li>千与千寻的神隐</li>
? <li>起风了</li>
? <li>龙猫</li>
? <li>天空之城</li>
? <li>魔女宅急便</li>
</ul>

// css
ul :first-child {
? color: brown // 选择ul的第一个子元素设置字体颜色为棕色
}

ul :last-child {
? ?text-decoration: underline; // 选择ul的最后一个子元素设置下划线
}

ul :nth-child(even){
? ?font-weight: bold;? // 选择ul的偶数子元素 设置字体加粗(下标从1开始)
}

内容总结

以上是互联网集市为您收集整理的CSS3新增了哪些选择器？（属性、结构伪类、伪元素选择器）全部内容，希望文章能够帮你解决CSS3新增了哪些选择器？（属性、结构伪类、伪元素选择器）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---