学习随笔——CSS选择器——2020.11.9

学习随笔——CSS选择器——2020.11.9

1. 常用的CSS选择器（CSS2选择器，基本选择器）：
2. 全局选择器（通配符选择器） *
3. 标签选择器（元素选择器）
4. 类选择器 .
5. id选择器 #
6. 群组选择器 逗号,
7. 后代选择器（包含选择器） 空格
8. 子选择器 >
9. 伪类选择器 冒号:
10. 属性选择器 [ ]
11. 相邻兄弟选择器 +
12. 通用兄弟选择器 -
13. ——————————————————————————————————————
14. 全局选择器设置所有标签使用同一样式，用*表示
15. *{margin：0；padding:0;}通配选择器
16. 标签选择器（元素选择器）：用于声明标记采用的样式
17. 语法： 元素名称{属性：属性值；}
18. p{color:red;}
19. 所有的标签，都可以是选择器
20. 类选择器用来为一系列标签定义相同的样式，类别选择器在页面上可以出现多次
21. 语法： .类名{属性：属性值；}
22. id选择器和类选择器相似，但要注意同一id名在同一个页面中只能出现一次
23. 语法： #id{属性：属性值；}
24. 类选择器和id选择器命名规则
25. 只能包含：字母，数字，下划线
26. 必须以字母开头
27. 不能和元素标签同名，比如id不能叫body,img,a等
28. 群组选择器
29. 语法： 选择器1，选择器2，选择器3{属性：属性值；}
30. h1,h2,h3,h4,h5,h6{color:red;font-size:30px;}
31. 后代选择器（包含选择器）：
32. 语法：选择器1 选择器2{属性：属性值；}
33. 与子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子等.
34. div span{}
35. 子代选择器：
36. 语法：选择器1 > 选择器2{属性：属性值；}
37. p>a{} p内标签名为a的元素样式
38. 伪类选择器：
39. 用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上
40. 语法：
41. a:link{属性：属性值} 超链接初始状态的效果（超链接默认效果）
42. a:visited{属性：属性值} 超链接被访问后的状态
43. a:hover{属性：属性值} 鼠标悬停，即鼠标划过超链接的状态
44. a:active{属性：属性值} 超链接被激活时的状态，即鼠标按下未松开时超链接的状态
45. 当超链接的四个伪类选择器联合使用时，要注意他们的属顺序，顺序不可变LVHA，错误的顺序有时会导致超链接的样式失效
46. 顺序关系符合：爱恨原则love-hate
47. a：link定义未访问过的超链接的样式，但是有些浏览器会将它解析为任何超链接，包括访问过的和未访问过的。
48. 因此，常使用a选择器来代替a:link选择器的样式，一般只设置超链接默认效果和鼠标划过的效果
49. 属性选择器（7种）：
50. E[attr] 只使用属性名，不适用属性值
51. E[attr = “value”] 属性名与属性必须完全相同
52. E[attr ~ = “value”] 属性值是多个词汇的列表。词之间以空格分割，"~="表示value与其中一个词汇
53. E[attr ^= “value”] 属性值以value开头
54. E[attr $= “value”] 属性值以value结束
55. E[attr *= “value”] 属性值包含了value这个字符
56. E[attr |= “value”] 属性等于value或以value-开头
57. 属性选择器IE6不支持
58. 相邻兄弟选择器
59. E+F: 选择紧贴在E元素之后F元素，相邻元素选择器只会命中与指定元素相邻的那一个“弟弟”元素
60. 通用兄弟选择器
61. E~F： 选择E元素后面的所有兄弟元素F与相邻兄弟选择器不同的是，通用兄弟选择器会命中指定元素的所有“弟弟”元素，而不强制是紧邻的那个“弟弟”