css选择器-总结

## css选择器
1. .class   类选择器
2. #id      id选择器
3. \*       通配符选择器 
4. element  元素选择器
5. element,element  选择多个元素
6. element element  子元素选择器
7. element1>element2  选择父元素为element1的所有element2元素
8. element1+element2 选择紧跟在element1后面的element2元素
9. [attribute] 选择含有attribute属性的元素
10. [attribute=value] 选择attribute属性值为value的元素
11. [attribute~=value] 选择attribte属性值包含value的元素
12. [attribute|=value] 选择attribute属性值以value开头的元素
13. a:link  选择未被访问过的连接
14. a:visited 选择已被访问过的连接
15. a:active    选择活动链接,点击的一瞬间
16. a:hover 选择指针位于其上的链接
17. :focus 选择获得焦点的元素
18. p:first-letter 选择p元素的首字母
```
p:first-letter

font-size:200%;
color:#8A2BE2;
}
```
19. p:first-line 选择p元素的首行
```
p:first-line
{
    font-size:200%;
    color:blue;
}
```
20. p:first-child 选择p元素父元素的首个子元素
21. p:before 在每个p元素之前插入内容
```
p:before{
    content:'你好!';
}
```
22. p:after 在每个p元素之后插入内容
23. :lang(language)
```
#选择带有'en'开头的lang属性值的每个p元素
p:lang(en)

background:yellow;
}
```
24. element1~element2 选择所有前面有element1的element2元素,不需要紧跟
25. [attribute^=value] 选择attribute属性值以value开头的元素,[attribute|=value]是其子集
26. [attribute$=value] 选择attribute属性值以value结尾的元素
27. [attribute*=value] 选择attribute属性值包含value的元素
28. p:first-of-type 选择其父元素的首个p子元素
29. p:last-of-type 选择其父元素的最后一个p子元素
30. p:only-of-type p元素的父元素下只有一个p元素的p元素
31. p:only-child  父元素唯一子元素
32. p:nth-child(n) 父元素下的第n个p子元素 
33. p:nth-last-child(n) 父元素下的从后往前数第n个p子元素 
34. :nth-of-type(n)
35. :nth-last-type(n)
36. :last-child 父元素的最后一个子元素
37. :root 选择文档的根元素
38. :empty 没有子元素的元素
39. :target 当前活动的元素
40. input:enabled 选择启用的input元素
41. input:disabled 选择被禁用的input元素
43. :not(selector) 选择不是指定selector的元素
44. ::selection 选择被用户选取的元素部分。

猜你喜欢

转载自blog.csdn.net/benben0729/article/details/82080513