css选择器
选择器就是为样式规则指定一个应用范围
元素选择器
p {color: red; font-size: 10px;}
通配选择器
* {color: red;}
*
号只能在class / id / 属性选择器中省略
注意:
*
性能有点低,因为对于一些比如meta / base等元素也会去检查,所以效率不高- 开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题,影响开发效率。
现在很流行的解决方式是一开始就将浏览器的默认样式全部覆盖掉,这就是css reset。
使用css reset重置比*效率更高。
https://meyerweb.com/eric/tools/css/reset/
类选择器
.类名 {color: red;}
当然类选择器可以结合其他选择器一起使用,
p.warning {color: red;} 表示将class属性<包含>warning的p段落的颜色改为red
*.warning
== .warning
,通配符*
可以省略
多类选择器
<p class="warning urgent"> xxx </p>
,类名与类名之间以空格分隔,并且区分大小写
.warning {font-size: 16px}
# class属性包含warning的所有元素的大小为16px
.urgent {color: red;}
# class属性包含urgen的所有元素的颜色为red
.urgent.warning {font-weight: bold;}
# 选择class包含urgent和warning的所有元素的字体为bold
注意类名的顺序不限,尽管class="warning urgent"
,但是**.urgent.warning以及.warning.urgent**都能选择上。
id选择器
1. 为标签元素设置一个id属性以及值
2. #ID名 {color: red;}
注意:
1. 全文档唯一
2. 不能有多个ID值
3. id选择器尽量少写,用的话一般跟JS有关,尽可能用类选择器
属性选择器
简单属性选择
h1[class] {color: red;},表示将有class属性的h1元素的颜色设为red
a[href][title] {font-weight: bold},将同时有href和title属性的HTML超链接的文本设置为bold
根据具体属性值选择
[href="https://www.baidu.com/"] {color: red;}
a[href="https://www.baidu.com/"][title="W3C Home"] {font-size: 16px;}
注意: 这种格式要求必须与属性值完全匹配
对于class="urgent warning",来说,写法为p[class="urgent warning"]才会正确选择,相当于就是完全串匹配。
子串匹配属性选择器
如果属性值接受词列表(词与词之间以空格分隔),可以根据其中任意一个词进行选择只能接受一个词
p[class~="warning"] {color: red;}
选择foo属性值以“bar”开头的所有元素
[foo^="bar"] {color: red;}
选择foo属性值以“bar”结尾的所有元素
[foo$="bar"] {color: red;}
选择foo属性值中包含"bar"子串的所有元素
[foo*="bar"] {color: red;}
选择lang属性为en或者以en-开头的所有元素
[lang|="en"] {color: red;}
交集选择器
由两个选择器构成,选中二者的交集,两个选择器之间不能由空格分隔,第一个必须为元素选择器,第二个必须为类或者id选择器
p.warning {color: red;}等形式的,就是一个名称而已
分组(并集)选择器
em, p {color: red; font-size: 10px;}
表示em和p元素的颜色都为red,以及字体都为10px
通常为了清晰:
em,
p {
color: red;
font-size: 10px;
}
后代选择器
在一个后代选择器中,规则左端的选择器包含两个或多个空格,空格称为结合符
h1 em {color: gray;}
将作为h1元素后代的所有em元素文本设置为gray
子元素选择器
> 称为子结合符
h1 > strong {color:gray;}
将作为h1元素子元素的所有strong元素文本设置为gray
table.summary td > p
选择作为td元素子元素的所有p元素,并且td元素作为table元素的后代,该table元素的class属性值要为summary
相邻兄弟选择器
+ 称为相邻兄弟结合符
h1 + p {margin-top: 0;}
选择紧接在h1元素后出现的第一个p元素,并且h1 和 p要有共同的父类
html > body table + p {margin-top: 1.5em;}
选择紧接在table元素后出现的第一个p元素,并且table和p要有共同的父类,父类是body的后代,body是html的子元素
PS:
有以下结构
<div>
<ol>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
</ol> This is some text that is part of the 'div'.
<ul>
<li>A lit item</li>
<li>Another list item</li>
<li>Yet another lst item</li>
</ul>
<ul>
<li>A lit item</li>
<li>Another list item</li>
<li>Yet another lst item</li>
</ul>
</div>
尽管中间多了一行文本,ol + ul {color: gold;},仍然能选择第一个ul元素。
因为文本并不包含在兄弟元素中,而是div的一部分
后续兄弟选择器
ol ~ ul {color: gold;}
选择ol元素后所有同级的ul元素,肯定也要有相同的父类
伪类选择器
类: 无需用户或者浏览做什么动作就可以显示效果
伪类: 需要用户或浏览器做出某种动作才显示效果
伪元素: 对元素内容进行操作,比伪类更深层次但动态性低,本身在文档中并不存在,是一个抽象元素
伪类选择器
1. :link
2. :visited
3. :focus
4. :hover
5. :active
6. :first-child
7. :last-child
8. :nth-child
8.1 :nth-last-child
9. :only-child
10. :first-of-type
11. :last-of-type
12. :nth-of-type
12.1 :nth-last-of-type
13. :only-of-type
14. :root
15. :target
16. :lang
17. :empty
18. :not
19. :required
20. :optional
21. :checked
22. :read-only
23. :read-write
24. :disabled
25. :enabled
26. :in-range
27. :out-of-range
28. :valid
29. :invalid
30. ::selection, 仅支持color / background / cursor / outline
伪元素选择器
伪元素选择器:对元素内容进行操作,比伪类更深层次但动态性低,本身在文档中并不存在,是一个抽象元素
1. :after
2. :before
3. :first-line
4. :first-letter
CSS3中 伪元素以::开头,但是为了兼容平常还是以:开头