文章目录
1. CSS 选择器
本篇介绍 9 种 CSS 选择器
(1) id 选择器
在 html 元素的头标签中定义其 id 属性, 如 id="only"
,
然后即可在 css 中, 通过 “#” + “id” 来进行选择目标 html 元素并定义其样式, 如:
#only{
width: 100px
}
备注:
一个元素只有一个 id 值, 一个 id 只可以对应一个元素
(2) class 选择器
在 html 元素的头标签中定义 class 属性, 如class="demo"
,
然后即可在 css 中通过 “.” + “class 名字” 来选取目标 html 元素并定义其样式, 如:
.demo{
width: 100px
}
备注:
一个 class 可以对应多个元素, 一个元素可以有多个 class 属性,
一个元素若要对应多个 class 值可以在每个 class 名字之间加空格,
如: class="demo0 demo1"
(3) 标签选择器
直接在 css 中选择所想要的元素标签, 对其样式进行定义, 选择器样式: 标签名称{CSS样式}
如div{width: 100px}
这种选择器是针对全局该标签的所有元素进行样式设定的
(4) 通配符选择器
在 css 中定义*{CSS样式}
, 这是对全局的所有元素进行样式分配
备注:
通常用来消除全局元素默认自带的内外边距以及文字样式
(5) 属性选择器
在 css 中定义[标签中的属性名]{CSS样式}
, 在中括号内写入标签内的属性名称,
即可为所有拥有该属性的元素进行样式定义,
如[id]{width: 100px}
, 意为对所有拥有 id 属性的元素将其宽度调整为 100px
(6) 父子选择器 / 派生选择器
在 css 中定义一个父子结构的 html 元素的选择器,
选择器样式父元素 1级子元素 ... n级子元素{css样式}
父子结构如:
<div>
<span>父子结构</span>
</div>
示例中<div>
和<span>
形成了一个父子结构
然后可在 css 中定义div span{padding: 20px}
,
意为所有包含在 div 中的 span 元素的内边距变为 20px
备注:
父子选择器中的每一层不需要一定是标签选择器, 也可以是其它形式的选择器,
只要父子关系成立即可
(7) 直接子元素选择器
由于父子选择器所选择的元素是父元素下的所有该名称子元素, 因此会让无关元素受到影响
直接子元素选择器则选择的是父元素下一层关系的子元素, 不会选到更深层的子元素, 会更有针对性
选择器样式父元素 > 子元素{css样式}
如:
<div>
<em>一号</em>
<strong>
<em>二号</em>
</strong>
</div>
若在这种情况下,
使用父子选择器div em{}
, 则会让一号和二号都会受到样式影响
而直接子元素选择器div > em{}
, 则只会让一号受到样式影响, 二号并不会有改变
备注:
浏览器遍历父子选择器是自右向左开始遍历的
(8) 并列选择器
用多个限制条件不加空格进行对元素选择
如若要将<div class="demo">demo</div>
该 div 进行选择,
则可写为div.class名称
的形式, 即写为div.demo{}
就可以选到该元素
(9) 分组选择器
为减少代码冗余从而使用分组选择器
如下:
<div class="demo1">demo1</div>
<div class="demo2">demo2</div>
若要使这两个 div 拥有相同的样式, 不必重复写两次样式定义
只需要定义选择器.demo1,.demo2{}
即可完成同时对这两个元素进行 css 样式定义
2. CSS选择器的权重
- 在 css 的定义属性后面加入
!important
, 会将该属性的优先级提到最高.
CSS权重 | 权重值 |
---|---|
!important | infinity |
行间样式 | 1000 |
id 选择器 | 100 |
class 选择器 / 属性选择器 / 伪类选择器 | 10 |
标签选择器 / 伪元素选择器 | 1 |
通配符选择器 | 0 |
备注:
这个数值是256进制.