CSS选择器基础整理

1、类型选择器(Type Selector):

例:div会选择所有的

元素;

2、ID选择器(ID Selector):

例:#text会选择id="text"的元素;

3、后代选择器(Descendant Selector):A B,即选择所有在A内部的BB被称为A的后代;

例:div img会选择所有在

中的元素;

4、类选择器(Class Selector):每个元素只能有一个ID,但可以有很多class;

例:.text会选择所有带有class="text"的元素

5、A,B:你可以通过逗号把任意选择器结合起来

6、通用选择器(The Universal Selector):*使用通用选择器可以选择所有元素;

*会选择所有的元素,p *会选择

及其内部的元素

7、相邻选择器(Adjacent Sibling Selector):A+B即选择所有紧邻A且在A后的元素BAB被称为兄弟;

8、一般兄弟姐妹选择器(General Sibling Selector):A~B即选择所有在A后面的兄弟元素B

9、子选择器(Child Selector):A>B即选择A的直接子元素B。子元素是指直接嵌套在另一个元素中的元素;

10、伪类:first-child:选择第一子元素

此时p:first-child选的是id="P1"

11、伪类:only-child:选择在其他元素内有且仅有一个的子元素

此时p:only-child选的是id="P1"

12、伪类:last-child:选择在其他元素内的最后一个子元素。

此时p:last-child选的是id="P3"

如果一个元素X是另一个元素的唯一子元素,则此时X:first-child等价于X:last-child等价于X:only-child

13、伪类:nth-child(A):选择在其他元素内的第A个子元素

此时p:nth-child(2)选的是id="P2"

14、伪类:nth-last-child(A):选择在其他元素内的倒数A个子元素

此时p:nth-last-child(1)选的是id="P3"

15、伪类:first-of-type:选择在其他元素内的第一个同类型元素(与:first-child类似)

此时p:first-of-type选的是id="P1"id="P4"

16、伪类:nth-of-type(A):选择在其他元素内的有一定秩序的同类型元素(A可以是数字,也可以是evenodd,甚至是An+B)

此时p:nth-of-type(2)选的是id="P2"


p:nth-of-type(even)选的是id="P2"id="P4"


p:nth-of-type(4n+1)选的是id="P1"id="P5"

17、伪类:only-of-type:选择在其他元素内的有且只有一个的同类型元素

此时p:only-of-type选的是id="P1"

18、伪类:last-of-type:选择在其他元素内的有且只有一个的同类型元素

此时p:last-of-type选的是id="P4"

19、空选择器:empty:选择没有子元素的元素

此时div:empty选的是id="D2"

20、否定伪类:not(X):选择所有没有X选择器的元素

此时p:not(P1)选的是选的是id="P2"id="P3"

21、属性选择器

未完待续

你可能感兴趣的:(CSS选择器基础整理)