如何理解 css 样式表的层叠性

html-css020

如何理解 css 样式表的层叠性,第1张

可以有三种理解方式,如下:

一:层叠性指的是样式的优先级,当产生冲突时以优先级高的为准。

开发者样式>读者样式>浏览器样式(除非使用!important标记

id选择符>(伪)类选择符>元素选择符

权重相同时取后面定义的样式

二:

CSS层叠性是指CSS样式在针对同一元素配置同一属性时,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作层叠。每个CSS选择器都会有一个权重,当两个选择器同时配置同一元素的同一属性时(比如一个设置color:red,另一个color:black),就会产生冲突,而解决冲突的方案就是CSS选择器的权重,权重高的来覆盖权重低的。

三:层叠性指的是上级标签的样式会自动继承到其所有下级标签,如针对<body>设置的标签选择器所设的字体样式会自动应用到<body>下的<p>中,除非<p>重写了相关样式将其覆盖。

div img{} 这样的话只有div内的img才会匹配这个样式,div本身不会的。

像这样用空格隔开的选择器表示前后包含关系,用文字来描述就是“div内的img”;

如果是用逗号隔开的比如 div,img{} 则是平行关系,用文字来描述就是“div以及img”,这样的话这个样式就会同时匹配到这两种标签上;

如果是类似这样的 div.abc 则是一种叠加的关系,即“类(class)名为abc的div”;

div#abc 则是“ID为abc的div”

你对于标签的语义没搞明白

text-align标签不能写在H1,P这些标签里面,这从语义上也读不通啊

<div>简介层

<div id="1">简介</div>//这个居中

<div id="2">内容</div>//这个坐对齐

</div>

当然你的意思似乎是让h1标签在上一级div层里居中,那text-align只能写在div层里。

text-aign只对下级标签有效