1. 常见CSS选择器
- id选择器。
#id
- class选择器.
.class
- 属性选择器。如:
input[type="button"]
- 组合选择器:
- 多元素选择器“A,B”。,同时匹配所有A元素和B元素,A和B之间用逗号分隔,如:
div,p { color:red; }
- 派生选择器(后代选择器)"A B"。匹配所有属于A元素后代的B元素,A和B之间用空格分隔,如:
#nav li { display:inline; }
,li a { font-weight:bold; }
- 直接子元素选择器"A>B"。匹配所有A元素的子元素B。如:
div > strong { color:#f00; }
- 相邻元素选择器"A+B"。匹配所有紧随A元素之后的同级元素B,如:
p + p { color:#f00; }
- 标签选择器
-
*
通用元素选择器。匹配页面任何元素。很少用到。 - 伪类选择器。E:XXXXX
2. 选择器的优先级是怎样的?
从高到低分别是:
- 在属性后面使用!important会覆盖页面任何位置定义的元素样式。
- 作为style属性写在标签里面的内联样式。
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
~选择器给得越精准权重越高。
~当两个选择器权重相同,样式重叠时,后面那一个的权重高。