本文主要是介绍CSS3中的选择器（属性选择器、后代选择器、伪类选择器、伪元素选择器），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录
- 一、CSS3中的属性选择器
- 二、CSS3中的后代选择器
- 三、CSS3中的伪类选择器
- 1.伪类选择器之child
- 2.伪类选择器之type
- 3.伪类选择器之hover和active
- 4.伪类选择器之表单新增
- 5.伪类选择器之空和非空
- 6.伪元素选择器之target（锚点）
- 四、CSS3中的伪元素选择器
- 1.伪元素选择器之before和after
- 2.伪元素选择器的使用
- 3.伪元素选择器之清除浮动
- 4.伪元素值selection
一、CSS3中的属性选择器
总结:
选择器[属性1][属性2]… 同时拥有多个属性
选择器[属性名^=属性值] 以 属性值 开头
选择器[属性名$=属性值] 以 属性值 结尾
选择器[属性名*=属性值] 包含 属性值
选择器[属性名~=属性值] 属性值是以空格分隔的独立部分
代码示例如下：
<style>*{margin: 0;padding: 0;}/* 选择具有.cartoon类的图片 加黄边 */.cartoon{border: 3px solid yellow;}/* 选择具有alt属性的图片 加橙色边 */img[alt]{border: 3px solid orange;}/* 选择具有title属性的图片 加灰色边 */img[title]{border: 3px solid grey;}/* 选择具有title属性 且title属性为"小狗" 给黑边 */img[title="小狗"]{border: 3px solid black;}/* 选择具有title属性 且title属性以"猫"为开头 给红边 ^ */img[title^="猫"]{border: 3px solid red;}/* 选择具有title属性 且title属性以"猫"为结尾 给紫色边 $ */img[title$="猫"]{border: 3px solid purple;}/* 选择具有title属性 且title属性包含"猫" 给蓝边 * */img[title*="猫"]{border: 3px solid blue;}/* 具有alt属性 并且alt属性中"猫"是以空格分隔的独立部分 加绿色边 */img[alt~="猫"]{border: 3px solid green;}/* 多属性 既有title又有alt *//* img[title][alt]{border: 3px solid rgb(240, 21, 86);} *//* 选择具有.cartoon 加橙色边 */img[class~="cartoon"]{border: 3px solid orange;}</style><body><img src="../images/02/1.jpg" alt="猫" title="猫"><img src="../images/02/2.jpg" title="多啦a梦机器猫" ><img src="../images/02/3.jpg" alt="加菲 猫" class="cartoon"><img src="../images/02/4.jpg" alt="猫 和老鼠" class="cartoon"><img src="../images/02/5.jpg" alt="龙-猫" title="龙-猫" class="cartoon"><img src="../images/02/6.jpg" title='黑猫警长' ><img src="../images/02/7.jpg" title="小狗"><img src="../images/02/8.jpg" title="猫王" ></body>
结果如下：
二、CSS3中的后代选择器
空格 后代选择器+ 下一个兄弟~ 下边所有的兄弟> 儿子选择器
代码示例如下：
<style>*{margin: 0;padding: 0;}/* 选择section的后代 加蓝色边框 */section div{border:1px solid blue}/* 选择section 的第一代p 子代 加橙色边框 */section>p{border:1px solid orange}/* 选择 金敬姬 后面紧挨着的第一个弟弟div，加绿边 */.widow+div{border:1px solid green}/* 选择 金敬姬 下边所有的兄弟姐妹 */.widow~div{border:1px solid red}</style><section>金日成section<div>金正日(男)<p>金惠姬(女)</p><div>金正哲</div><div>金正恩</div></div><div>金万一</div><p class="widow">金敬姬</p><div>金安一</div><div>金平一</div>这篇关于CSS3中的选择器（属性选择器、后代选择器、伪类选择器、伪元素选择器）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
