1.选择符
| 兼容性 | ||
| 统配选择符 | * | |
| 元素选择符 | body | |
| 类选择符 | .class | |
| id选择符 | #id | |
| 包含原则符 | p strong (所有后代） | |
| 子代选择符 | p>strong (紧跟子代) | lte IE7 |
| 相邻选择符 | h1+p (h1后面第一个p元素） | lte IE7 |
| 属性选择符 | button[class] (带有class属性的button) | lte IE7 |
| button[class="switcher"] (class等于switcher） | lte IE7 | |
| button[class~="switcher"] (class中包含独立switcher） | lte IE7 | |
| button[class|="switcher"] (class以switcher开头-连字符分割） | lte IE7 | |
| 伪类（不同状态） | a:link a:hover a:visited a:active (:hover 也可用于其它元素） | lte IE7 |
| input : focus (当拥有键盘输入焦点时添加样式） | lte IE7 | |
| ul: first-child (向元素的第一个子元素添加样式） | lte IE7 | |
| p:lang(fl) (带有lang元素为fl 的p元素添加样式) | lte IE7 | |
| 伪对象（额外信息） | p:before {content:‘XX‘ } (在元素之前添加内容) | lte IE7 |
| p:after {content:‘XX‘ } (在元素之后添加内容) | lte IE7 | |
| p: first-letter (向文本的第一个字母添加样式） | lte IE7 | |
| p: first-line (向文本的首行添加特殊样式) | lte IE7 | |
| 选择符组合， | div#header,div#footer |
2.优先级
/* lte：就是Less than or equal to的简写，也就是小于或等于的意思。 lt ：就是Less than的简写，也就是小于的意思。 gte：就是Greater than or equal to的简写，也就是大于或等于的意思。 gt ：就是Greater than的简写，也就是大于的意思。 ! ：就是不等于的意思，跟javascript里的不等于判断符相同。 */
开发人员编辑的CSS样式中根据选择符组合来决定优先级别,权重值会累加。
| 权重值 | 选择符或属性 |
| 最高 | ！important |
| 1000 | HTML标签内style属性 （不建议使用，结构样式分离） |
| 100 | ID选择符 |
| 10 | 类选择法、属性选择符 |
| 1 | 标签选择符、伪类及伪对象 |
| 0 | 其它选择符：如通配选择符 |
元素本身设置的样式高于继承的样式，不用考虑权重值。
时间： 2024-10-23 13:50:35