- 基础选择器
1.*
通用元素选择器,匹配页面任何元素
* {
box-sizing: border-box;
}
.flex-container * {
flex-basis: 100%;
}
-
#id
id选择器,匹配特定id的元素<p id="welcome">hello</p> #welcome { font-size: 24px; }
-
.class
类选择器,匹配class包含(不是等于)特定类的元素
一个 CSS 类可以应用到多个不同的元素
一个元素也可以应用多个不同的 CSS 类
<ul>
<li class="first done">1</li>
<li class="second done">2</li>
</ul>
.first {
font-weight: bold;
}
.done {
text-decoration: line-through;
}
-
element
标签选择器p { color: red; }
- 组合选择器
-
A, B
多元素选择器,用,分隔,同时匹配元素A或元素B -
A B
后代选择器,用空格分隔,匹配A元素所有的后代(不只是子元素、子元素向下递归)元素B<div class="first">第一层 <div class="second">第二层 <div class="third">第三层 <span class="inner">最内层 </span> </div> </div> </div> .first .second{ color:red; }
-
A > B
选中匹配 B 且为匹配 A 的元素的直接子元素。.second > .third{ color:red; }
third不是first的直接子元素,故css未生效
- 属性选择器
-
[attr]
选择包含 attr 属性的所有元素,不论 attr 的值为何。[disabled] { cursor: not-allowed; }
-
[attr=val]
仅选择 attr 属性被赋值为 val 的所有元素。[data-color="gray"] { color: #ccc; }
- 伪类选择器
<style>
.box:first-child {
color: red;
}
.box:first-of-type {
background: blue;
}
.box :first-child {
font-size: 30px;
}
.box :first-of-type {
font-weight: bold;
}
</style>
<div class="container">
<div class="box">div.box</div>
<p class="box">p.box</p>
<div class="box">div.box</div>
<div class="box">
<div class="item">div.item</div>
<p class="item">p.item</p>
</div>
<p class="box"></p>
</div>
.box:first-child 匹配class=box的第一个子元素(div.box为第一个,所以颜色为红色)
.box:first-of-type 匹配class=box使用同种标签的第一个子元素(div.box为第一个使用div标签,p.box为第一个使用p标签,所以背景颜色为蓝色)
.box :first-child 匹配父元素class=box下的第一个子元素(div.item为div.box下的第一个子元素,所以字体为30px)
.box :first-of-type 匹配父元素class=box下所有使用同种标签的第一个子元素(div.item为div.box下的第一个使用div标签,p.item为div.box下第一个使用p标签,所以加粗)
E F:nth-child(n)
匹配其父元素的第n个子元素
E F:nth-of-type(n)
匹配使用同种标签的第n个子元素
n的取值1,2,3,4,5;2n+1, 2n, 4n-1;odd(奇数), even(偶数)
- 伪元素选择器
选择器优先级:
- 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
网友评论