CSS选择器随笔

选择器

基础选择器：

1. 标签选择器
2. .class选择器
3. #id选择器
4. 标签指定式选择器
5. 后代选择器
6. 群组选择器
7. 通配符选择器

衍生选择器

8. 属性选择器
9. 关系选择器
10. 链接伪类选择器
11. 结构伪类选择器
12. 子元素伪类选择器
13. UI元素状态伪类选择器
14. 伪元素选择器

具体结构语法

1.标签选择器

2…class选择器

3.#id选择器

4.标签指定式选择器（标签指定选择器又称交集选择器，由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格）
语法：
标签名.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
p.classname{color:red;}
标签名#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
p.#idname{color:red;}

5.后代选择器（包含选择器用来选择元素或元素组的后代，也称后代选择器，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。）
语法：
选择器1 选择器2 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
p p{color:red;}

6.群组选择器（群组选择器是各个选择器通过逗号连接而成的。）
语法：
选择器1，选择器2 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
div, p{color:red;}

7.通配符选择器（通配符选择器用星形标示号“*”表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。）
语法：
* {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

8.属性选择器
E[att] 选择名称为E的标签，且该标签定义了att属性
E[att = value] 选择名称为E的标签，且该标签定义了att = value属性
E[att^ = value] 选择名称为E的标签，且该标签定义了att属性，att属性值包含前缀为value的子字符串
E [att$ = value ] 选择名称为E的标签，且该标签定义了att属性，att属性值包含后缀为value的子字符串
E [att*= value ] 选择名称为E的标签，且该标签定义了att属性，att属性值包含value的子字符串。

PS: 注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。
[att]省略掉属性值，则表示只要有att这个属性就OK

9.关系选择器
子代选择器（E>F）: 选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用“>”表示
兄弟相邻选择器（E+F）: 选择紧贴在E元素之后的F元素，用“+”表示。选择相邻的第一个兄弟元素。
普通兄弟选择器（E~F）: 选择E元素之后的所有兄弟元素F，作用于多个元素，用“~”隔开

10.链接伪类选择器
a:link
a:visited
a:hover
a:active

11.结构伪类选择器
：root 将样式绑定到页面的根元素中。所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面的部分。
：root{background-color：red;}整个网页改为红色
：not想对某个结构元素使用样式，但想排除这个结构元素下的子结构元素，就是用:not伪类。
:empty 指定当元素内容为空白时使用的样式。
:target 对页面中某个target元素指定样式，该样式只在用户点击了页面中的链接，并且跳转到target元素后生效。
12.子元素伪类选择器
: first-child 对父元素中的第一个子元素指定样式例如p:first-child{}表示第一个p元素的样式
: last-child 对父元素中的最后一个子元素指定样式例如 p:last-chidl{}表示倒数第一个p元素的样式
: only-child当某个父元素中只有一个子元素时使用的样式
: nth-child(n) 对指定序号的子元素设置样式(正数)，表示第几个子元素 例如：p:nth-child(2){} 表示第2个p元素的样式
: nth-last-child(n)对指定序号的子元素设置样式(正数) ，表示倒数第几个子元素
例如：p:nth-last-child(2){}表示倒数第2个p元素的样式
:nth-child(even)所有正数第偶数个子元素，等同于:nth-child(2n)
:nth-child(odd)所有正数第奇数个子元素，等同于:nth-child(2n+1)
:nth-last-child(even)所有倒数第偶数个子元素
:nth-last-child(odd)所有倒数第奇数个子元素
: nth-of-type(n)用于匹配属于父元素的特定类型的第n个子元素
: nth-last-of-type(n)用于匹配属于父元素的特定类型的倒数第n个子元素

13.UI元素状态伪类选择器
UI（User Interface，用户界面）元素状态伪类选择器，是指只有当元素处于某种状态下时才能使用的样式，默认状态下。

14.伪元素选择器
伪元素选择器是针对CSS中已定义的伪元素使用的选择器。CSS中主要使用的伪元素为“:before”伪元素选择器和“:after”伪元素选择器。
:before伪元素选择器
:before伪元素选择器用于在被选元素的内容前面插入内容，必须配合“content”属性来指定要插入的具体内容。
语法：
element:before{
　　　　　　　content:“内容”;
}
element表示元素，被选元素位于“:before”之前，“{ }”中的content属性用来指定要插入的具体内容，该内容既可以为文本也可以为图片，大家还可以根据其他需要添加相应的样式。
（：after用法一样）

多重样式优先级深入概念

这段优先级概念摘录于菜鸟教程：
优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。
优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

优先级顺序
下列是一份优先级逐级减小的选择器列表：

• 内联样式
• ID 选择器
• 伪类
• 属性选择器
• 类选择器
• 元素(类型)选择器
• 通用选择器（*）

!important 规则例外
当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。
一些经验法则：

• Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
• Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
• Never 永远不要在全站范围的 css 上使用 !important
• Never 永远不要在你的插件中使用 !important

权重计算:

解释：

1. 内联样式表的权值最高 1000；
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1

利用选择器的权值进行计算比较，em 显示蓝色，示例如下：https://c.runoob.com/codedemo/3048
CSS 优先级法则：
A 选择器都有一个权值，权值越大越优先；
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
D 继承的CSS 样式不如后来指定的CSS 样式；
E 在同一组属性设置中标有“!important”规则的优先级最大；示例如下：https://c.runoob.com/codedemo/3049
结果：在Firefox 下显示为蓝色；在IE 6 下显示为红色；