日期: 2020-10-03
1. CSS 选择器分类
- 通配符 *
- 标签选择器
- 类、伪类选择器
- id 选择器
- 派生选择器
1. * : 匹配 HTML 中所有的元素
* 的性能差, 因为他要匹配所有的元素, 所以开发时, 不建议使用
通配符
*, 匹配HTML 中所有的元素
2. 标签选择器: 用来匹配对应的标签
html 的标签都可以作为 选择器
p {
font-size:16px;
color:green;
}
3. 类选择器: 用来选择 class 命名的标签
class 名称前加 点号
.
.wrapper {
color: red;
}
<div class="wrapper">this is a division</div>
<p class="wrapper"> this is a paragraph</p>
4. ID 选择器: 用来选择 id 命名的标签
id 是唯一的,只能给定义一个, id 名称前加
#
#content {
color : grey;
}
<span id="content">this is a span</span>
5. 派生选择器: 根据上下文确定要选择的标签
层级之间用空格 或者大于号 ( > )隔开
.box2 li {
color: yellowgreen;
}
<ul class="box1">
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
<li>1.4</li>
</ul>
<ul class="box2">
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>2.4</li>
<ul><li>examle 1 <li><li>examle 2 <li></ul>
</ul>
6. 伪类选择器 （后面讲）
:hover
2. 选择器分组
- 让多个选择器（元素）具有相同的样式，一般用于设置公共样式。
- 被分组的选择器可以分享相同的声明，用逗号 （,） 将需要分组的选择器分开。
h1, p, .box1, .box2 { color: blue;}
3. 选择器继承
子元素可以继承父元素的样式，反之不可以。
4. 样式权重
如果外部样式，内部样式，内联样式 同时应用于同一个元素， 就是使用多重样式的情况， 这种情况下的优先级一般情况是
内联样式 > 内部样式 > 外部样式
!important(10000) >内联样式（1000） >id 选择器（100）>l类、 伪类选择器（10） >标签选择器( 1 )
<style>
/* 权重计算： 100 + 1 + 10 + 1 = 112 */
#content div.main_content h2 {
color: red;
}
/* 权重计算： 100 + 10 + 1 = 111 */
#content .main_content h2 {
color: blue;
}
</style>
<div id="content" >
<div class="main_content" >
52
<h2> this is a h2 title </h2>
</div>
</div>
这是一个 派生选择器，设置的是 h2 的属性，所以 h2 会被高权重的 设置为红色， 52 不会被设置
