CSS中的选择器 目录：常用选择器1.元素选择器： 　作用：根据标签名来选中指定的元素　 语法: 标签名{}　 例子：p{} h1{} div{}2.id选择器：　 作用：根据元素的id属性选中一个元素　 语法: #id属性值{}　 例子：#box{}3.类选择：　 作用：根据元素的class属性值选中一组元素　 语法: .class属性值{} 　 例子：.box{}4.通配选择器　作用：选中页面中的所有元素　 语法: *{}关系选择器1.子元素选择器　作用：选中指定父元素的指定子元素　语法：父元素 > 子元素<div><p></p></div> div > p{ }2.后代选择器　作用：选中指定元素内指定的后代元素　语法：祖先 后代 html： <p> <span>我是p元素中的span元素</span><br> <em>我是p元素的第一个em</em><br> <em>我是p元素的第二个em</em><br> <em>我是p元素的第三个em</em><br> <em>我是p元素的第四个em</em><br> </p>css： div span{ color: blue; }3.选择下一个兄弟选择器　语法：前一个 + 下一个 span + em { color: orangered; }4.选择下边所有兄弟语法：前一个 ~ 所有span ~ em{ color:pink }属性选择器[属性名] 选择含有指定属性的元素[属性名=属性值] 选择含有指定属性和属性值得元素[属性名^=属性值] 选择属性值以指定值开头的元素[属性名$=属性值] 选择属性值以指定值结尾的元素[属性名^=属性值] 选择属性值含有谋值的元素伪类选择器伪类：不存在的类，特殊的类　　-伪类用来描述一个元素的特殊状态　　　　比如：第一个元素，最后一个元素，鼠标移入的元素...　　-伪类一盘情况下都是使用 ： 开头的　　:first-child 第一个元素 　　:last-child 最后一个元素 　　:nth-child() 选中第n个元素　　　　特殊值：　　　　　n 第n个 n的范围0到正无穷　　　　　2n 表示选中偶数位的元素　　　　　2n+1 表示选中奇数位的元素　　　　-以上这些伪类都是根据所有的子元素进行排列　　first-of-type 　　last-of-type 　　nth-of-type 　　　　-这几个伪类的功能和上述类似，不同的是他们是在同类元素中进行排列　　 :not() 否定伪类　　　　-将符合条件的元素从元素器中去除代码演示： <ul> <span>我是span元素</span> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> <li>第五个</li> </ul>css代码 /*ul > li:first-child{ color: blue; } ul > li:last-child{ color: red; } ul > li:nth-child(2){ color: seagreen; }*/ /*ul > li:first-of-type{ color: teal; }*/ ul > li:not(:nth-of-type(3)){ color: tomato; }选择器的权重选择器的权重内联样式 1,0,0,0 id选择器 0,1,0,0 类和伪类选择器 0,0,1,0 元素选择器 0,0,0,1 通配选择器 0,0,0,0 继承的样式 没有优先级比较优先级时，需要将所有的选择器得优先级相加计算，最后优先级越高，则越优先显示（分组选择器单独计算）选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器（同类型不会无限叠加）可以在某一个样式的1后边添加 !important ,则此时该样式会获取到最高的优先级，甚至超过内联样式 注意：一般在开发的时候不会使用样式的继承样式继承，我们为一个元素设置的样式同时也会应用到他的后代 　　-继承是发生在祖先后后代之间的继承的设计是为了我们开发 　　-利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，　　-这样只需设置一次即可让所有的元素都具有该样式　　-注意：并不是所有的样式都会被继承　　-比如说:背景相关的，布局相关的这些样式都不会被继承a元素的伪类css <style> a{ text-decoration: none; } /* :link 用来表示没访问过的链接（正常的链接） */ a:link{ color: red; } /* :visited 用来表示访问过的链接 由于隐私，所以viosited这个伪类只能修改链接的颜色 */ a:visited{ color: orange; } /*其他的（不限制于a元素） :hover 用来表示鼠标移入的状态 */ a:hover{ color: blue; } /* :active 用来表示鼠标点击 */ a:active{ color: chartreuse; } </style>html <a href="http://baidu.com/">访问的链接</a> <br><br> <a href="https://blog.32yunbk.cn/">没有访问过的链接</a>