阿ken的HTML、CSS的学习笔记_CSS3选择器（笔记四）

fwalker · 发表于 2022-6-27 11:54

你好，我是阿Ken
恭迎您能前来拜访

虽还未踏入社会尚处象牙塔内
却总总陷入迷茫不知所措
有时很渴望有一个信仰能够成为我的精神支柱促使我一路坚持走下去
但苦于一直未果
后来短暂接触了一下这社会环境
也看到了一些很有意思的灵魂
他们大多有趣且人心善良
但却也被生活折腾的一塌糊涂
这好像让我看到了如果再一直浑浑噩噩下去五年十年后自己的影子
稍微明白一点儿父亲的苦
… …
没有人在年少时想要成为一个普通人

4_CSS选择器

4.1_引入CSS样式表

1. 行内式

<标记名style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标记名>

复制代码

style是标记的属性
2. 内嵌式

<head><style type="text/css">
选择器{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;}</style></head>

复制代码

此方式放在head标签里
3. 链入式

<head><link href="css文件的路径" type="text/css" rel="stylesheet"/></head>

复制代码

注意:

是所链接外部样式表的URL，也可以是相对路径或绝对路径

定义所链接文档的类型

定义当前的文档与被链接文档之间的关系

链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个< link>标记链接多个CSS样式表。

链入式是使用频率最高，也是最实用的CSS样式表，
实现了结构和表现的完全分离，使得页面的前期制作和后期维护都十分方便。

4.2_CSS选择器样式规则

选择器{属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;}

复制代码

选择器用来指定CSS样式作用的HTML对象
大括号内是对该对象设置的具体样式
其中属性和属性值以“键值对”的形式出现
属性和属性值之间用英文“:”连接， “键值对”之间用英文“;”连接
注意:

HTML5标签不严格区分大小写

CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的形式。

如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。

CSS代码中空格是不被解析的，花括号及分号前后的空格可有可无。因此可以使用空格键、Tab键、回车键等对样式及进行排版，以增加代码的可读性。

h1{font-size: 20 px;} // 20和单位px之间有空格

复制代码

根据上述代码_注意：属性的值和单位之间是不允许出现空格的，否则浏览器解析时会出错。

多个"属性: 属性值"之间必须用英文分号";"隔开

4.3_CSS选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。
在CSS中，执行这一任务的样式规则部分被称为选择器。
4.3.1_标记选择器

标记选择器是指用HTML标记名作为选择器

标记名{属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;}

复制代码

p{font-size: 12px;color: #666;font-family:"微软雅黑";}

复制代码

4.3.2_类选择器

类选择器使用“ . ”进行标识，后面紧跟类名。

.类名{属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;}

复制代码

class 属性和 id 选择器类似，只不过 class 属性可以定义多个属性
拥有相同 class 属性值的元素，我们可以说它们是一类元素
也可以同时为一个元素设置多个 class 属性值，多个值之间使用空格隔开
实例：

<!doctypehtml><html><head><metacharset="utf-8"><title>类选择器</title><styletype="text/css">.red{color: red;}.green{color: green;}.font22{font-size: 22px;}/* class后带有font22的字体像素22 */p{text-decoration: underline;font-family:"微软雅黑";/* 所有p标签内字体: 微软雅黑+下划线 */}</style></head><body><h2class="red">二级标题文本</h2><pclass="green font22">段落一文本内容</p><pclass="red font22">段落二文本内容</p><P>段落三文本内容</p></body></html>

复制代码

可见多个标记可以使用同一个类名，这样可以实现不同类型的标记指定相同的样式。
同时一个HTML元素也可以应用多个class类来设置多个样式，在HTML标签中多个类名之间需要用空格隔开，如上述代码中的green font22、red font22 。
4.3.3_id选择器

通过元素的 id 属性值选中唯一的一个元素
记住是选中属性值中唯一的元素
基本语法格式：

#id名{属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;}

复制代码

<!doctypehtml><html><head><metacharset="utf-8"><title>id选择器</title><styletype="text/css">#bold{font-weight: bold;}#font24{font-size:24px;}#bold#font24{font-weight: bold;font-size: 24px;}</style></head><body><pid="bold">段落1:id="bold",设置粗体文字。</p><pid="font24">段落1:id="font24",设置字号为24px。</p><pid="font24">段落1:id="font24",设置字号为24px。</p><pid="bold font24">段落1:id="bold font24",同时设置粗体和字号为24px。</p></body></html>

复制代码

第四行代码即id = "bold font24"这样的写法是错误的，id 选择器并不支持像类选择器那样定义多个值。
4.3.4_通配符选择器

_
通配符选择器用“ * ”号表示，能匹配页面中所有的元素
_
基本语法格式：

*{属性1: 属性值1;属性2: 属性值2;属性3: 属性值3;}

复制代码

在实际网页开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要样式，这样反而降低了代码的执行速度。
4.3.5_标签指定式选择器(交集选择器)

_
又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为 class 选择器或 id 选择器，两个选择器之间不能有空格，如 h3.special 或 p#one。

<!doctypehtml><html><head><metacharset="utf-8"><title>标签指定式选择器</title><styletype="text/css">p{color: blue;}/*指定下方body标签的第一行文字颜色为蓝色*/.special{color: green;}/*指定下方body标签的第三行文字颜色为绿色*/p.special{color: red;}/*标签指定式选择器*//*指定下方body标签的第二行文字颜色为红色*/</style></head><body><p>普通段落文本（蓝色）</p><pclass="special">指定了.special类的段落文本（红色）</p><h3class="special">指定了.special类的段落文本（绿色）</h3></body></html>

复制代码

4.3.6_后代选择器(和子元素)

_
元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接包含祖先元素的元素
_
后代元素选择器
作用：
选中指定元素的指定后代元素
_
语法：
祖先元素后代元素{ }
_
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素{ }
后面 9. 关系选择器中会讲到
_
该选择器用来选择元素或元素组的后代，其**写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。**当标记发生嵌套时，内层标记就成为外层标记的后代。

<!doctypehtml><html><head><metacharset="utf-8"><title>后代选择器</title><styletype="text/css">p strong{color: red;}/*后代选择器*//* 指定的是body标签第一行文字颜色为红色 */strong{color: blue;}/* 指定的是body标签第二行文字颜色为蓝色 */</style></head><body><p>段落文本<strong>嵌套在段落中，使用strong标记定义的文本（红色）</strong></p><strong>嵌套之外由strong标记定义的文本（蓝色）。</strong></body></html>

复制代码

4.3.7_并集选择器

_
并集选择器又叫复合选择器
可以选中同时满足多个选择器的元素
并集选择器是各个选择器通过逗号连接而成

<!doctypehtml><html><head><metacharset="utf-8"><title>并集选择器</title><styletype="text/css">h2,h3,p{color: red;font-size: 14px;}/*不同标记组成的并集选择器*/h3,.special,#one{text-decoration: underline;}/* 加下划线 */</style></head><body><h2>二级标题文本</h2><h3>三级标题文本</h3><pclass="special">段落文本1,加下划线。</p><p>段落文本2</p><pid="one">段落文本3</p></body></html>

复制代码

上述代码字号和颜色相同，只是有一个标题和两个段落文本有下划线效果（上述已注明）。
4.3.8_属性选择器

E[att^=value] 属性选择器

E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了 att 属性，att 属性值包含前缀为 value 的子字符串。
_
需要注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。
_
例如：div[id^=section] 表示匹配包含 id 属性，且 id 属性值是以“ section ”字符串开头的 div 元素。

<!doctypehtml><html><head><metacharset="utf-8"><title>E[att^=value] 属性选择器的应用</title><styletype="text/css">p[id^="one"]{color: pink;font-family:"微软雅黑";font-size: 20px;}</style></head><body><pid="one">
天空是蔚蓝色
</p><pid="two">
窗外有千纸鹤
</p><pid="one1">
陪我弹琴写歌
</p><pid="two2">
每一分每一刻
</p></body></html>

复制代码

在上述代码中，使用了E[att^=value]属性选择器 “ p[id ^=“one”] ” 。
只要p元素中的 id 属性值是以“ one ”字符串开头就会被选中，从而呈现特殊的文本效果。
E[att$=value] 属性选择器

E[att$=value]属性选择器是指选择名称为E的标记，且该标记定义了 att 属性，att 属性值包含后缀为 value 的子字符串。
_
E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。
_
例如：div[ id $=section] 表示匹配包含 id 属性，且 id 属性值是以“ section ”字符串结尾的 div 元素。

<!doctypehtml><html><head><metacharset="utf-8"><title>E[att$=value]属性选择器的应用</title><styletype="text/css">p[id$="one"]{color: pink;font-family:"微软雅黑";font-size: 20px;}</style></head><body><pid="one1">
天空是蔚蓝色
</p><pid="two">
窗外有千纸鹤
</p><pid="1one">
陪我弹琴写歌
</p><pid="two2">
每一分每一刻
</p></body></html>

复制代码

在上述代码中，使用了E[att$=value]属性选择器 “ p[id $=“one”] ” 。
只要p元素中的 id 属性值是以“ one ”字符串结尾就会被选中，从而呈现特殊的文本效果。
E[att*=value] 属性选择器

E[att*=value]属性选择器是指选择名称为E的标记，且该标记定义了 att 属性，att 属性值包含 value 的子字符串。
E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。
例如：div[id*=section] 表示匹配包含 id 属性，且 id 属性值包含“ section ”字符串的 div 元素。
案例：

<!doctypehtml><html><head><metacharset="utf-8"><title>E[att*=value]属性选择器的应用</title><styletype="text/css">p[id*="one"]{color: pink;font-family:"微软雅黑";font-size: 20px;}</style></head><body><pid="one1">
天空是蔚蓝色
</p><pid="two">
窗外有千纸鹤
</p><pid="1one">
陪我弹琴写歌
</p><pid="two2">
每一分每一刻
</p></body></html>

复制代码

在上述代码中，使用了E[att*=value]属性选择器 “ p[id *=“one”] ” 。
只要p元素中的 id 属性值是包含“ one ”字符串就会被选中，从而呈现特殊的文本效果。
4.3.9_关系选择器

关系选择器主要包括子代选择器和兄弟选择器，其中子代选择器由符号“>”连接，兄弟选择器由符号“+”和“~”连接。
子代选择器（>）

子代选择器主要用来选择某个元素的第一级子元素。
例如希望选择只作用于 h1 元素子元素的 strong 元素，可以这样写：h1 > strong。

<!doctypehtml><html><head><metacharset="utf-8"><title>子代选择器的应用</title><styletype="text/css">h1>strong{color: red;font-family:"微软雅黑";font-size: 20px;}</style></head><body><h1>心怀梦想，<strong>不丢信仰</strong></h1><h1><em><strong>看透疾苦，</strong></em>深爱人间</h1></body></html>

复制代码

在上述代码中，（1）中的 strong 元素为 h1 元素中的子元素，（2）中的 strong 元素为 h1 元素的孙元素，因此代码中设置的样式只对（1）中代码有效。
兄弟选择器（+、~）

兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。
兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种。
临近兄弟选择器

该选择器使用加号“+”来；连接前后两个选择器。
选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。

<!doctypehtml><html><head><metacharset="utf-8"><title>临近兄弟选择器的应用</title><styletype="text/css">p+h2{color: green;font-family:"宋体";font-size: 20px;}</style></head><body><h2>题菊花</h2><p>[唐] 黄巢</p><h2>飒飒西风满院栽，蕊寒香冷蝶难来。</h2><h2>他年我若为青帝，报与桃花一处开。</h2></body></html>

复制代码

临近兄弟选择器应用在（1）
从结构中看出p元素后紧邻的第一个兄弟元素所在位置为（1）
普通兄弟选择器

普通兄弟选择器使用“~”来链接前后两个选择器。
选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。

<!doctypehtml><html><head><metacharset="utf-8"><title>普通兄弟选择器的应用</title><styletype="text/css">p~h2{color: pink;font-family:"宋体";font-size: 20px;}</style></head><body><h2>题菊花</h2><p>[唐] 黄巢</p><h2>飒飒西风满院栽，蕊寒香冷蝶难来。</h2><h2>他年我若为青帝，报与桃花一处开。</h2></body></html>

复制代码

临近兄弟选择器应用在（1）、（2）
从结构中看出p元素后紧邻的第一个兄弟元素所在位置为（1）、（2）
4.3.10_:empty 选择器

:empty 选择器用来选择没有子元素或文本内容为空的所有元素。

<!doctypehtml><html><head><metacharset="utf-8"><title>empty 选择器的使用</title><styletype="text/css">p{width:150px;height:30px;}:empty{background-color: #999;}/* (1) */</style></head><body><p>题菊花</p><p>[唐] 黄巢</p><p></p><p>飒飒西风满院栽，蕊寒香冷蝶难来。</p><p>他年我若为青帝，报与桃花一处开。</p></body></html>

复制代码

(1) 中代码使用" :empty 选择器 "定义(2)空元素p，将其空元素的背景颜色设置为灰色。
4.3.11_:target 选择器

:target 选择器用于为页面中的某个 target 元素（该元素的id被当做页面中的超链接来使用）指定样式。只有用户单击了页面中的超链接，并且跳转到target元素后，:target选择器所设置的样式才会起作用。

<!doctypehtml><html><head><metacharset="utf-8"><title>target选择器的使用</title><styletype="text/css">
:target {
background-color: #e5eece;
}
</sty1e></head><body><h1>这是标题</h1><p><ahref="#news1">跳转至内容1</a></p><p><ahref="#news2">跳转至内容2</a></p><p>请单击上面的链接,:target选择器会突出显示当前活功的HTML锚。</p><pid="news1"><b>内容 1...</b></p><pid="news2"><b>内容 2...</b></p><p><b>注释：</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p></body></html>

复制代码

当单击“跳转至内容1”或“跳转至内容2”时，所链接到的内容才会被添加背景颜色效果：

4.3.12_伪类选择器

结构化伪类选择器

:root 选择器

:root 选择器用于匹配文档根元素。
使用 :root 选择器定义的样式，对所有页面元素都生效，对于不需要该样式的元素，可以单独设置样式进行覆盖。

<!doctypehtml><html><head><metacharset="utf-8"><title>:root 选择器的应用</title><styletype="text/css">:root{color: pink;}h2{color: red;}</style></head><body><h2>题菊花</h2> //（1）
<p>[唐] 黄巢飒飒西风满院栽，蕊寒香冷蝶难来。
他年我若为青帝，报与桃花一处开。</p> //（2）
</body></html>

复制代码

开始第一步 :root 选择器将页面中所有的文本设置为粉色，
第二部将（1）中元素文字设置为红色
:not 选择器

如果对某个结构使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用 :not 选择器。

<!doctypehtml><html><head><metacharset="utf-8"><title>:not选择器的应用</title><styletype="text/css">body *:not(h3){ // 格式不能变，只有这样才能成功运行
color: orange;font-size: 20px;font-family:"宋体";} //(1)</style></head><body><h3>题菊花</h3> // 唯独<h3>未应用(1)中的文本样式
<p>[唐] 黄巢</p><p>飒飒西风满院栽，蕊寒香冷蝶难来。</p><p>他年我若为青帝，报与桃花一处开。</p></body></html>

复制代码

(1) 中定义了页面body的文本样式，" body *: not(h3) " 选择器用于排除 body 结构中的子结构元素 h3，使其不应用该文本样式。

拓展参考：

:only-child 选择器

:only-child 选择器用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用 " :only-child 选择器 " 可以选择这个子元素。

<!doctypehtml><html><head><metacharset="utf-8"><title>:only-child 选择器的应用</title><styletype="text/css">li:only-child{color:red;}/* (1) */</style></head><body><div>
国内电影：
<ul><li>一代宗师</li><li>叶问</li><li>非诚勿扰</li></ul>
美国电影：
<ul><li>侏罗纪世界</li></ul>
日本动漫：
<ul><li>蜡笔小新</li><li>火影忍者</li><li>航海王</li></ul></div></body></html>

复制代码

上述代码中使用了 :only-child 选择器 “li:only-child”，用于选择作为ul唯一子元素的li元素，并设置其文本颜色为红色。
:first-child 和 :last-child 选择器

:first-child 选择器和 :last-child 选择器分别用于为父元素中的第一个或者是最后一个子元素设置样式。

<!doctypehtml><html><head><metacharset="utf-8"><title>first-child和last-child选择器的使用</title><styletype="text/css">p:first-child{color:pink;font-size:16px;font-family:"宋体";}p:last-child{color:blue;font-size:16px;font-family:"微软雅黑";}</style></head><body><p>题菊花</p><p>[ 唐 ] 黄巢</p><p>飒飒西风满院栽，蕊寒香冷蝶难来。</p><p>他年我若为青帝，报与桃花一处开。</p></body></html>

复制代码

上述代码中，分别使用了 :first-child 选择器和 :last-child 选择器
前者:first-child 选择器能定义，后者 :last-child 选择器无法定义，该伪类方法比较繁琐

之后会更新一下该类选择器如何正确使用
:nth-child(n)和:nth-last-child(n)选择器

:nth-child(n) 和：nth-last-child(n)选择器是用来选择第n个和倒数第n个子元素的选择器
案例代码可参考4.3.4，把其中 :first-child和 :last-child更换成 :nth-child(n)和：nth-last-child(n) 理解即可。
:nth-of-type(n)和:nth-last-of-type(n)选择器

:nth-of-type(n)和 :nth-last-of-type(n)选择器用来匹配属于父元素的特定类型的第n个子元素或倒数第n个子元素
案例同上解释
之后会特意整理出几篇博客讲解伪类选择器细节
伪元素选择器

所谓伪元素选择器，是针对CSS中已经定义好的伪元素使用的选择器。
CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器。
:before 选择器

:before伪元素选择器用于在被选元素的内容前面插入内容，必须配合 content 属性来指定要插入的具体内容。
其基本语法格式:

标签名:before{content:文字/url();}

复制代码

在上述语法中，被选元素位于“:before" 之前，“{ }"中的 content 属性用来指定要插入的具体内容，该内容既可以为文本也可以为图片。
案例:

<!doctypehtml><html><head><metacharset="utf-8"><title>before选择器的使用</title><styletype="text/css">p:before{content:"我是";color: #c06;font-size: 20px;font-family:"微软雅黑";font-weight: bold;}</style></head><body><p>阿ken啊，</p></body></html>

复制代码

使用了选择器 " :before"，用于在段落前面添加内容，同时使用content属性来指定添加的具体内容。为了使插入效果更美观，还设置了文本样式。
:after 选择器

:after伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。
案例:

<!doctypehtml><html><head><metacharset="utf-8"><title>after选择器的使用</title><styletype="text/css">/*p:after{content:url(images/tu.jpg);}*/p:after{content:url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3083554353,73017423&fm=26&gp=0.jpg);}</style></head><body><p>十五的月亮<br/></p></body></html>

复制代码

链接伪类

在CSS中，通过链接伪类可以实现不同的链接状态。
所谓伪类并不是真正意义上的类，它的名称是由系统定义的，通常由标记名、类名或id名加":”构成。
超链接标记< a>的伪类有4种

超链接标记< a>的伪类	含义
a:link{ CSS样式规则;}	未访问时超链接的状态
a:visited{ CSS样式规则: }	访问后超链接的状态
a:hover{ CSS样式规则; }	鼠标经过、悬停时超链接的状态
a:active{ CSS样式规则; }	鼠标单击不动时超链接的状态

案例:

<!doctypehtml><html><head><metacharset="utf-8"><title>链接伪类</title></head><styletype="text/css">a:link, a:visited{/*未访问和访问后都为粉色*/color: pink;text-decoration: none;/*清除超链接默认的下划线*/}a:hover{/*鼠标悬停时文字颜色是蓝色*/color: blue;text-decoration: underline;/*鼠标悬停时出现下划线*/}a:active{color: #F00;}/*鼠标单击不动时为红色*/</style></head><body><ahref="#">公司首页</a><ahref="#">公司简介</a><ahref="#">产品介绍</a><ahref="#">联系我们</a></body></html>

复制代码

特别注意：

只有按上述定义中 :link, :visited、 :hover、:active顺序定义，一般 :link, :visited 一起定义，如果不按上述顺序定义，将会按上述中的顺序显示，在 :link, :visited之前和 :active 之后的代码将不运行

在实际工作中，通常只需要使用a:link、a:visited、a:hover定义未访问、访问后和鼠标悬停时的链接样式，并且常常对a:link和a:visited定义相同的样式，使未访问和访向后的链接样式保持一致。

注意:
(1) 同时使用链接的4种伤类时，通常按照a:link、a:visited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用。
(2) 除了文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。
4.4_CSS层叠性和继承性

4.5_CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

选择器名称	权重
标记选择器	1
类选择器	10
id选择器	100

P strong {color:black;} /*权重为: 1+1*/
strong.blue {color:green;} /*权重为: 1+10*/
.father strong {color:yellow;} /*权重为: 10+1*/
p.father strong {color:orange;} /*权重为: 1+10+1*/
p.father.blue {color:gold;} /*权重为: 1+10+10*/
#header strong {color:pink;} /*权重为: 100+1*/
#header strong.blue {color:red;} /*权重为: 100+1+10*/

复制代码

对应的HTML结构为:

<pclass="father"id="header"><strongclass="blue">文本的颜色</strong></p>

复制代码

这时，页面文本将应用权重最高的样式，即文本颜色为红色。
此外，在考虑权重时，还需要注意些特殊的情况。

<html><bodystyle="background:red;font-size:12px;"><p>测试一下</p><body></html>

复制代码

上面的实例中段落的文字就会继承body的样式
例如下面的CSS样式代码:

strong{color: red;}
#header{color: green;}

复制代码

对应的HTML结构为:

<pid="header"class="blue"><strong>继承样式不如自已定义</strong></p>

复制代码

在上面的代码中，虽然#header 具有权重100, 但被strong继承时权重为0，而strong选择器的权重虽然仅为1，但它大于继承样式的权重，所以页面中的文本显示为红色。

权重相同时，CSS遵循就近原则

/*CSS文档，文件名为style.css*/#header{color: red;}/*外部样式*/

复制代码

// HTML文档结构为:
<doctypehtml><html><head><metacharset="utf-8"><title>CSS优先极</title><linkrel="stylesheet"href="style.css"type="text/css"/><styletype="text/css">#header{color: gray;}/*内嵌式样式*/</style></head><body><pid="header">权重相同时，就近优先</p></body></html>

复制代码

上面的页面被解析后，段落文本将显示为灰色，即内嵌式样式优先，
这是因为内嵌式比链入的外部样式更靠近HTML元素。
同样的道理，如果同时引用两个外部样式表，则排在下面的样式表具有较大的优先级。
如果此时将内嵌样式更改为:

p{color: gray;}/*内嵌式样式*/

复制代码

权重不同，#header 的权重更高，文字将显示为外部样式定义的红色。

/* CSS 文档，文件名为style.css */#header{color: red!important;}/*外部样式表*/

复制代码

// HTML文档结构为:
<!doctypehtml><html><head><metacharset="utf-8"><title>!important命令最优先</title><linkrel="stylesheet"href="style.css"type="text/css"/><styletype="text/css">#header{color: gray;}/*内嵌式样式*/</style></head><body><pid="header"style="color:yellow">天王盖地虎，!important命令最优先
</p></body></html>

复制代码

怎么不对？？？

该页面被解析后，段落文本显示为红色，即使用!important命令的样式拥有最大的优先级。
需要注意的是，important 命令必须位于属性值和分号之间，否则无效。
需要注意的是，复合选择器的权重为组成它的基础选择器权重的叠加，但是这种叠加并不是简单的数字之和，
案例：

<!doctypehtml><html><head><metacharset="utf-8"><title>复合选择器权重的叠加</title><styletype="text/css">.inner{text-decoration: line-through;}/*类选择器定义到除线，权重为10*/div div div div div div div div div div div{text-decoration: underline;}/*后代选择器定义下划线，权重为11个1的叠加*/</style></head><body><div><div><div><div><div><div><div><div><div><div><divclass="inner"> 文本的样式</div></div></div></div></div></div></div></div></div></div></div></body></html>

复制代码

最后文本并没有像预期的那样添加下划线，而显示了类选择器 .inner 定义的删除线，
即标记选择器无论怎么叠加，权重都不会高于类选择器
同理类选择器无论怎么叠加，权重都不会高于id选择器

如果累了就给自己加加油
这一路注定孤独

我们都能努力坚持走下去
祝你也祝我
你好，我是阿Ken
博文若有瑕疵请在评论区留言或私聊我
感谢不吝赐教

		自动登录	找回密码
密码			立即注册

阿ken的HTML、CSS的学习笔记_CSS3选择器（笔记四）

本帖子中包含更多资源

浏览过的版块