最近写页面感觉有些选择器已经忘了，于是乎重新整理了一遍css选择器。你们还记得多少种选择器呢，每一种选择器的用法都还记得吗
那么下面我们一起来复习一下吧
ID选择器
以#加id名来表示, id是唯一的，同一个页面里不允许多个ID相同的元素。一般只用来强调某个页面或者某个模块，多个功能相同的模块建议使用类选择器。
类选择器
以.加上class名称来表示，下面以class 名称为 item 的元素为例
标签选择器
直接标签名作为选择器的名称，如果使用标签选择器，那么该页面所有使用该标签的元素样式都会改变，一般不建议使用。
属性选择器
[attr]表示选择所有带有attr属性的标签
[attr=xxx]表示用来选择有attr属性且属性值等于xxx的元素，注意属性值必须完全相等
[attr~=xxx] 表示包含某个类的元素，多个类中的其中一个类名必须和xxx相等
[attr|=xxx] 表示选择属性值为xxx（这里必须是相等的）或者 以xxx-属性开头的元素
[attr^=xxx]表示选择以xxx属性开头的元素
[attr$=xxx]表示选择以xxx属性结尾的元素
[attr*=xxx]表示选择属性值中包含xxx的所有元素
通配符选择器
通配符顾名思义，就是所有标签全部适用，把样式应用到所有元素上影响浏览器渲染效率，实际开发中不建议使用。
后代选择器
又称派生选择器，派生选择器为css2的说法。 以seletorA空格selectorB形式，表示在selectorA内部向下查找所有所有符合selectorB的元素，无论层级有多深依然会被作用。举个栗子：
当然， 后代选择器可以叠加使用，如：
不过值得注意的是：CSS选择器是从右到左进行匹配的，嵌套的层级越深，css选择器查找的效率就越低，以及权重就过低可能会被其他的样式所覆盖，建议酌情使用。附css权重表：
子元素选择器
以selectorA>selectorB的形式，表示只查找指定元素的直接子元素，层级为一层。
相邻兄弟选择器
以selectorA+selectorB的形式，表示选择紧接在指定元素后的元素，且二者有相同父元素。 注意他只有一个兄弟呀~
同胞选择器
以selectorA~selectorB形式，表示选择指定元素所有符合条件的所有兄弟元素， 他可能有多个兄弟
交集选择器
以selectorA.selectorB形式，表示既符合选择器A又符合选择器B的元素
并集选择器
以seltorA,selectorB逗号分隔的形式，表示不同的选择器A和选择器B的元素都应用同一种样式。
伪类选择器
以selector加:的的形式，CSS 伪类用于向某些选择器添加特殊的效果，这里只列举常见的几种：
表示状态：
表示结构:
表单相关:
伪元素选择器
CSS 伪元素用于将特殊的效果添加到某些选择器
小编也在前端混了有几年，整理了一些学习资料，对web开发技术感兴趣的同学
欢迎加入新建的Q群：603985993，不管你是小白还是大牛我都欢迎，希望大家诚心交流！
还有大牛整理的一套高效率学习路线和教程与您免费分享，与企业需求同步。
好友都在里面学习交流，每天都会有大牛定时讲解前端技术!
网友评论