CSS笔记 ( 二 ) CSS 选择器及选择器的权重

---

博主的 Github 地址

---

 
 
 

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进制.