CSS选择器解析（一文了解）

CSS选择器解析

讲解之前，我们应该要了解，选择器是干嘛用的？？？

简单来说CSS选择器是用来指定我们想要的HTML元素，做到精细化选择元素。

一、选择器

1. ！Important

权值为10000，优先级最高，但不建议使用。

这是bootstrap CSS源码里的截图，在代码后直接加 !important。

 

2. style=”  ”行内样式

权值1000，写在开始标签里面，直接对该元素样式进行修改，但不利于css代码的优化。

 

3. id选择器

权值100，基本语法格式：#id名{ 属性1：属性值1；属性2：属性值2；}

注意！！Id选择器尽量不用在CSS样式当中，因为一般id用于JS当中。

4.  类选择器

权值10，基本语法格式： .classname{ 属性1：属性值1；属性2：属性值2；}

一个class属性的值，可以写多个，值与值之间使用空格隔开。

这是CSS当中比较常用的选择器，复用性较高，只需在标签内添加class名即可。

 

5. 属性选择器

权值100，这些选择器允许基于一个元素自身是否存在或者基于各式不同的按属性值的匹配，来选取元素。

·  使用div[class]，我们就能匹配任何有 class 属性的选择器。这匹配了除了第一项以外的所有项。

·  div[class="a"]匹配带有一个a类的选择器，不过不会选中一部分值为a而另一部分是另一个用空格隔开的值的类，它选中了第二项。

·  div[class~="a"]会匹配一个a类，不过也可以匹配一列用空格分开、包含a类的值，它选中了第二和第三项。

6. 伪类选择器

权值100，添加特定的效果在选择器上，不会产生新的元素。

下图即使在悬停到.dropdown时改变背景颜色和显示模式。

 

:hover{ } 选中”鼠标悬停在元素上方时”的状态

:active{ } 选中”元素被激活时”的状态(鼠标按住元素不松开)

:link{ } 选中”超链接未被访问过”的状态

:visited{ }  选中”超链接已经被访问过”的状态 注意：超链接的4个伪类有顺序： :link -> :visited -> :hover -> :active 如果没有按照这个顺序，有的伪类会不生效。

7.  标签选择器

权值1，选中特定的HTML元素，标签名即可。

如下图是选择ul标签里的，li标签里的 a标签。

 

在选择同种类型时做统一样式时使用，其他情况不建议使用。

8.  伪元素选择器

权值1，在内容元素前后插入额外的样式或元素，仅是外部可见，源代码也找不到，所以被称为“伪元素”。

Content是必填属性，里面的值为在前后添加的元素。

 

9. 子代选择器

权值0，div > span { }  选中div下的所有儿子span，不会选择，儿子之内的孙子元素。

10. 后代选择器

权值0，标签之间空格隔开，选择所有的后代

如下图，选择的是ul下所有的li，li下的所有a标签。

 

11. 兄弟选择器

权值0，不包含选择元素前的span和后面的子代。

 

12. 相邻兄弟选择器

权值0，仅仅选择，紧挨的一个兄弟span元素。

 

13.  并列选择器

 

14. 群组选择器

一次可选择多个元素，只要满足要求即可。

 

15. 通用选择器

但实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。

 

如下图是百度首页当中的截图，并没有采用通用选择器。

 

• 不同选择器不同样式

当多个不同的选择器选中了同一元素，发生冲突，会叠加生效。

• 相同选择器相同样式

会采取顺序读取，覆盖原则，选择后面的。

• 就近原则

有些具有继承特性的，如下图会继承父级元素蓝色。

 

二、优先级表

 

！！！！！！多个选择器权值会叠加，但不会越级！！！