1.CSS层叠性
CSS的全名是"层叠式样式表"。所谓的层叠性,就是指多个选择器可以同时作用于同一个标签,样式效果叠加的特性。比如下面这段代码:
css:
p{
color: red;
}
.spec{
font-style: italic;
}
#para{
text-decoration: underline;
}
html:
<p id="para" class="spec">段落</p>
这个p标签,上面有id属性是para,class属性是spec,
现在分别用标签选择器、class选择器、id选择器给它添加样式,
用标签选择器p给它添加的样式是字体颜色是红色,
用class选择器.spec给它添加的样式是字体倾斜,
用id选择器#para给它添加的样式是文字下面加下划线。
你会发现这三个选择器的样式,都会同时叠加作用到这个p标签上,相当于一层一层叠加上去的。
这就是CSS的层叠性。
2. 层叠性的冲突处理
如果多个选择器定义的属性样式有冲突,CSS有严密的处理冲突的规则。
比如还是同一个p标签,它有的id是para,它的class是spec,分别用标签选择器、id选择器、class选择器给这个p标签添加相同的样式,如下面的代码:
p{
color: red;
}
.spec{
color: green;
}
#para{
color: bule;
}
这三种选择器选择的都是这同一个p标签,但是这三种选择器添加的字体颜色分别是红色、绿色、蓝色。
那么此时这个p标签的文字到底是什么颜色呢?这就冲突了。
从而引出权重问题。
在讲解计算规则之前,先来大概再了解下具体的CSS选择器有哪些,才可以更方便的知道权重如何计算。
3、CSS选择器
id选择器(#id)
使用ID选择器之前需要先在html文档中的元素添加id名称,这样在样式选择器中才能找到相对应的元素。
id选择器具有唯一性。
我们在类使用时是在相对应的类名前加上一个“.”号(.className)而id选择器是在名称前使用"#"如(#id)。
类选择器(.className)
类选择器是以一独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,换句话说需要保证类名在html标记中存在,这样才能选择类。
元素选择器(E)
元素选择器,是css选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素,如html,body,p,div等等。
群组选择器(selector1,selector2,…,selectorN)
群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号“,”隔开,如上面所示selector1,selector2,…,selectorN。这个逗号告诉浏览器,规则中包含多个不同的选择器,如果不有这个逗号,那么所表达的意就完全不同了,省去逗号就成了我们前面所说的后代选择器。
通用兄弟选择器(E 〜 F)
通用兄弟元素选择器是CSS3新增加一种选择器,这种选择器将选择某元素后面的所有兄弟元素,他们也和相邻兄弟元素类似,需要在同一个父元素之中,换句话说,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E ~ F 选择器将选择中所有E元素后面的F元素。
相邻兄弟元素选择器(E + F)
P+b : 同一个父元素下p标签后面的第一个兄弟元素b。
子元素选择器(E>F)
子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E>F所表示的是选择了E元素下的所有子元素F。这和后代选择器(E F)不一样,在后代选择器中F是E的后代元素,而子元素选择器E > F,其中F仅仅是E的子元素而以。
后代选择器(E F)
后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素,比如说:E F,前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,请注意他们之间需要一个空格隔开。这里F不管是E元素的子元素或者是孙元素或者是更深层次的关系,都将被选中,换句话说,不论F在E中有多少层关系,都将被选中
通配符选择器(*)
通配符选择器是用来选择所有元素,也可以选择某个元素下的所有元素。
伪类选择器
比如:link:未访问的链接
伪元素选择器
伪元素可用于定位文档中包含的文本,为与伪类进行区分,伪元素使用双冒号 :: 定义,但单冒号 : 也能被识别。
列举几个常用的:
::before 与 ::after :使用 contnet 属性生成额外的内容并插入在标记中
属性选择器
将元素属性用于选择器中,从而获取指定元素属性或者值得元素;
语法:
- [属性] : 匹配 “指定属性” 的 “所有” 元素;
- 元素[属性] : 匹配 “指定属性” 的 “指定” 元素;
input[type] : 获取具备type属性的input;
input[id] : 获取具备id属性的input; - 元素[属性][属性] :匹配 “多个指定属性” 的 “指定” 元素;
- 元素[属性=“值”] :匹配 “指定属性等于值” 的 “指定” 元素;
- 元素[属性~=“值”] : 匹配 “指定属性中包含这个值(独立的单词)” 的 “指定” 元素;
- 元素[属性^=“值”] : 匹配 “指定属性以指定值开始” 的 “指定” 元素;
- 元素[属性*=“值”] : 匹配 “指定属性包含值(可以是非独立的单词)” 的 “指定” 元素;
- 元素[属性$=“值”] : 匹配 “指定属性以指定值结束” 的 “指定” 元素;
- 元素[属性!=“值”] : 匹配 “指定属性不等于值” 的 “指定” 元素;
4.权重计算规则
根据样式所在位置,对元素的影响也有关系:内联样式(标签内style形式) > style标签 > link标签。
另外一点需要注意的是 !improtant ,凡是属性值后加上了 !important ,那么它的值不会被其他值替换。
权重计算规则:
- 第一等:代表内联样式,如: style=””,权值为1000。
- 第二等:代表ID选择器,如:#content,权值为0100。
- 第三等:代表类,伪类和属性选择器,如.content,权值为0010。
- 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
- 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
- 继承的样式没有权值。
权重计算第一个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible