CSS选择器
|
.class |
.intro |
选择 class="intro" 的所有元素。 |
1 |
|
#id |
#firstname |
选择 id="firstname" 的所有元素。 |
1 |
|
* |
* |
选择所有元素。 |
2 |
|
element |
p |
选择所有 <p> 元素。 |
1 |
|
element,element |
div,p |
选择所有 <div> 元素和所有 <p> 元素。 |
1 |
|
element?element |
div p |
选择 <div> 元素内部的所有 <p> 元素。：后代选择器 |
1 |
|
element>element |
div>p |
选择父元素为 <div> 元素的所有 <p> 元素。(子选择器，只选子代) |
2 |
|
element+element |
div+p |
选择所有{紧接在 <div> 元素之后}的 <p> 元素。相邻同胞选择器 |
2 |
|
[attribute] |
[target] |
选择带有 target 属性所有元素。 |
2 |
|
[attribute=value] |
[target=_blank] |
选择 target="_blank" 的所有元素。 |
2 |
|
[attribute~=value] |
[title~=flower] |
选择 title 属性包含单词 "flower" 的所有元素。 |
2 |
|
[attribute|=value] |
[lang|=en] |
选择 lang 属性值以 "en" 开头的所有元素。 |
2 |
相邻同胞选择器
1 <!DOCTYPE html>
2 <html>
3 <head><!--相邻同胞选择器-->
4 <style>
5 div+p
6 {
7 background-color:yellow;
8 }
9 </style>
10 </head>
11
12 <body>
13
14 <div></div>
15 <p>我是唐老鸭。</p><!--紧接在div之后-->
16
17 <p>我住在 Duckburg。</p><!--未紧接在div之后-->
18
19
20 </body>
21 </html>
层叠(样式优先级)：
首先
- 标有！important的用户样式 用户样式（读者）:就是浏览网页的用户，自己所设置的样式。
- 标有！important的作者样式 作者样式:指的是制作者（即做网页的那人）所写的用来把想要的效果呈现出来的样式。
- 作者样式
- 用户样式
- 浏览器/用户代理应用的样式
然后，根据选择器的特殊性决定规则的次序。特殊性高的选择器的样式覆盖特殊性低的。特殊性的描述可以把它看成一个4位数: abcd（0000）。既特殊性分为四个等级，abcd
- 如果样式是行内样式，既style=“~~~~”,那么a=1 特殊性1000
- b为ID选择器的总数 如#a1 #a2{} 特殊性为 0200
- c为类，伪类，属性选择器的总数
- d为类型选择器和伪元素选择器的总数
如果两个样式特殊性相同，后定义的覆盖前面的。
时间： 2024-09-28 11:18:52