选择器
1.层次选择器
-
E F，后代选择器。最终选择F，并且F元素属于E元素的后代。 -
E > F，子选择器，选择匹配的F元素，且匹配的F元素是E的子元素。 -
E + F，相邻兄弟选择器。选择匹配的F元素且匹配的F元素仅位于匹配的E元素的后面。<!DOCTYPE html> <html> <head> <style> /* 我最终要选择strong标签并且这个strong应该是b的同级标签，并且应该挨着b标签的后面。 */ b + strong{ color: yellow; } </style> </head> <body> <span>hello1</span> <b>hello2</b> <strong>hello3</strong> <a href="#">hello4</a> </body> </html> -
E ~F，兄弟选择器，选择匹配的F元素，并且F元素位于E元素的后面的所有的F元素。<!DOCTYPE html> <html> <head> <style> /* 我最终要选择strong标签并且这个strong应该是b的同级标签，并且应该在b标签的后面。 */ /* b + strong{ color: yellow; } */ /* 最终要选择a，并且这个a和b是同级并且在b标签的后面。 */ b ~ a{ color:red; } </style> </head> <body> <span>hello1</span> <a href="#">hello44</a> <b>hello2</b> <strong>hello3</strong> <a href="#">hello4</a> <a href="#">hello5</a> </body> </html>
2.属性选择器
这里的属性指的是HTML标签的属性。
E[attr]，选择匹配具有attr的E元素。E[attr='val']，选择匹配具有attr的E元素并且attr属性的值是val。E[attr*='val']，选择匹配的E元素，并且E元素定义了attr属性并且attr属性值的任意位置包含了val。E[attr^='val']，选择匹配的E元素，并且E元素定义了attr属性并且attr属性的值以val开头。E[attr$='val']，选择匹配的E元素，并且E元素定义了attr属性并且attr属性的值以val结尾。
3.伪类选择器
-
E:checked，选择匹配的E元素并且E元素被选中的时候触发（用在单选框和多选框）。 -
E:first-child，选择父元素的第一个子元素并且元素为E的元素。 -
E:first-of-type，选择父元素第一次出现的E元素。<!DOCTYPE html> <html> <head> <style> /* 最终要选择span标签，并且这个span标签是其父元素第一个子元素 */ /* span:first-child{ color:yellow; } */ /* 最终要选择span标签，并且这个span标签是父元素中第一次出现的span标签。 */ span:first-of-type{ color:red; } </style> </head> <body> <div id="f"> <a href="#">123</a> <span>hehe</span> <p> lueluelue <span>嘿嘿嘿</span> </p> </div> <span>哼哼</span> </body> </html>first-child，必须得是第一个子元素，并且是xxx的。
first-of-type，父元素的第一次出现的xxx。
-
E:last-child，选择父元素的最后一个子元素，并且元素为E的元素。 -
E:last-of-type，选择父元素的最后一次出现的E元素。 -
E:nth-child(n)，选择父元素的第n个子元素并且元素为E的元素。 -
E:nth-of-type(n)，选择父元素中第n次出现的E元素。 -
n的破事：
-
数值。
-
关键字
- odd，奇数
- even，偶数
-
公式
-
n，相当于全选，n的意思是0\1\2\3\4\5.......
-
Mn，n和上面的意思一样，M表示n的倍数。
3n
0 3 = 0
1 3 = 3
2 3 = 6
3 3 = 9
-
Mn+x，表示从x开始，每隔M个选择一个。3n+1
0*3+11*3+12*3+1......
-
-
-
E:focus，选择匹配的E元素，且匹配的元素获得焦点的时候触发。用在input标签。 -
E:target，选择匹配E的元素，并且元素被相关URL指向的时候触发（锚点指向的时候触发）。
伪元素选择器
E::before，选择匹配的E元素，并在选择的元素的内部插入一个虚拟的标签（是在开始标签后面）。E::after，选择匹配的E元素，并在选择的元素的内部插入一个虚拟的标签（是在结束标签的前面）。
因为插入的虚拟元素是一个行内元素，所以需要使用content给它设定行内元素里面的内容。
格式：content:'内容'
注意：
- 即使before和after里面不需要插入内容也需要有content。
- 插入的内容即使包含HTML字符串也不会被解释出来，被当做普通字符。
- __content__中的内容不会被搜索引擎收录、抓取。
- 鉴于content里面的内容不会被收录、抓取。所以我们通常用
::before和::after做装饰性的东西。 - 生成的内容位于元素框的内部（可以当成是子元素来对待）。
- 默认的时候before和after插入的伪元素属于一个行内元素，可以使用display来进行属性的更改。
- 只要属性能够被继承，生成的内容将会从它依附的元素上继承属性的值。