CSS选择器
CSS优先级
优先级是由 ABCD 的值来决定的
- 如果存在内联样式,那么 A = 1, 否则 A = 0;
- B 的值等于
ID选择器
出现的次数 - C 的值等于
类选择器
和属性选择器
和伪类
出现的总次数 - D 的值等于
标签选择器
和伪元素
出现的总次数 - 通配符、子类选择器、兄弟选择器、如
*, >, +
为0。
继承的样式没有权值
从左到右依次比较,如果A相同继续往下比较取较大值,如果A不同取A大的值。
伪类和伪元素的区别:是否创造了“新的元素”
伪类表示被选择元素的某种状态,例如:hover
伪元素表示的是被选择元素的某个部分,这个部分看起来像一个独立的元素,但是是"假元素",只存在于css中,所以叫"伪"的元素,例如:before
和:after
CSS选择器
常见选择器: 通配符选择器*
标签选择器标签名
类选择器.类名
ID选择器#id名
属性选择器
写法 | 描述 |
---|---|
[attribute] | 选择带有attribute属性的元素 |
[attribute=value] | 选择 attribute=value 的所有元素 |
[attribute~=value] | 选择选择 attribute 属性值包含单词 value 的所有元素(单词以空格为分隔符) |
[attribute^=value] | 选择 attribute 属性值以 value 开头的所有元素 |
[attribute$=value] | 选择 attribute 属性值以 value 结束的所有元素 |
[attribute*=value] | 选择 attribute属性中包含value子串的每个元素 |
文档结构选择器
选择器 | 描述 |
---|---|
后代选择器 element element | 选择 element 元素内部的所有 element 元素 |
子选择器 element1>element2 | 选择父元素为 element1 的所有 element2 |
相邻兄弟选择器 element1+element2 | 选择紧接在 element1元素之后的 element 2元素。 |
一般兄弟选择器 element1~element2 | 选择 element1 元素后面的每个 element2元素。 |
伪类选择器
除了a元素,:hover
、:active
也能用在其他元素上
a:link
未访问的链接
a:visited
已访问的链接
a:hover
鼠标挪动到链接
a:active
激活的链接(鼠标在链接上长按住未松开)
使用注意
:hover
必须放在:link
和:visited
后面才能完全生效;:active
必须放在:hover
后面才能完全生效;
所以建议的编写顺序是:link
、:visited
、:hover
、:active
(LVHA)
结构伪类选择器
<div>
<p>1</p>
<span>2</span>
<p>3</p>
<span>4</span>
<p>5</p>
<span>6</span>
<p>7</p>
<span>8</span>
<p>9</p>
<span>10</span>
</div>
E
表示子元素,它有父元素
E:first-child
在E
父元素的子元素中,选中第一个子元素,并且该子元素的类型需要是E
E:last-child
同E:first-child
,只不过选择的是最后一个子元素E:first-of-type
在父元素的子元素中,选中第一个E
类型的元素E:last-of-type
同E:first-of-type
,只不过选择的是最后一个子元素E:nth-child(m)
同E:first-child
,选择的元素是第m
个元素,并且该元素的类型需要时E
E:nth-of-type(m)
同E:first-of-type
,选中的元素是第m
个元素- m可以取
2n
,表示第偶数个,n从0开始 - m可以取
2n+1(odd)
,表示第偶数个,n从0开始 - m可以取n,表示所有
- m可以取
E:not(伪类选择器)
选择除了被伪类选择器选中的E元素
/* 类名不是 `.fancy` 的 <p> 元素*/
p:not(.fancy) {
color: green;
}
body :not(p) {
text-decoration: underline;
}
/* 既不是 <div> 也不是 <span> 的元素 */
body :not(div):not(span) {
font-weight: bold;
}
/* 不是 <div> 或 `.fancy` 的元素*/
body :not(div, .fancy) {
text-decoration: overline underline;
}
/* <h2> 元素中不是有 `.foo` 类名的 <span> 元素 */
h2 :not(span.foo) {
color: red;
}