感激相遇你好我是阿ken

文章部分内容及图片出自网络，如有问题请与我本人联系(主页有公众号)

本博客暂适用于刚刚接触HTML以及好久不看想要复习的小伙伴

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

下面我们开始步入正题

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>

注意:

href：可以是所链接外部样式表的URL，也可以是相对路径或绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。
rel：定义当前的文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

4.2 CSS选择器样式规则

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

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

注意:

HTML5标签不严格区分大小写（<p></P>都一样），但是**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属性值，多个值之间使用空格隔开

实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>

<style type="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>

<h2 class="red">二级标题文本</h2>          
<!-- 红色 -->

<p class="green font22">段落一文本内容</p> 
<!-- 字体:绿色+像素22+微软雅黑+下划线 -->

<p class="red font22">段落二文本内容</p>   
<!-- 字体:红色+像素22+微软雅黑+下划线 -->

<P>段落三文本内容</p>                      
<!-- 字体:微软雅黑+下划线 -->

</body>
</html>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

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

4.3.3 id选择器

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>

<style type="text/css">

#bold {
font-weight: bold;
}

#font24 {
font-size:24px;
}

#bold#font24 {
font-weight: bold;
font-size: 24px;
}

</style>
</head>
<body>

<p id="bold">段落1:id="bold",设置粗体文字。</p>       <!-- 粗体文字 -->
<p id="font24">段落1:id="font24",设置字号为24px。</p> <!-- 字号为24px -->
<p id="font24">段落1:id="font24",设置字号为24px。</p> <!-- 字号为24px -->
<p id="bold font24">段落1:id="bold font24",同时设置粗体和字号为24px。</p>  <!-- 无变化 -->                     

</body>
</html>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

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

4.3.4 通配符选择器

通配符选择器用“ * ”号表示，能匹配页面中所有的元素\

基本语法格式：

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

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

4.3.5 标签指定式选择器(交集选择器)

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签指定式选择器</title>

<style type="text/css">

p {
color: blue;
}   /*指定下方body标签的第一行文字颜色为蓝色*/

.special {
color: green;
}                   /*指定下方body标签的第三行文字颜色为绿色*/

p.special {
color: red;
}/*标签指定式选择器*/  /*指定下方body标签的第二行文字颜色为红色*/

</style>
</head>
<body>

<p>普通段落文本（蓝色）</p>
<p class="special">指定了.special类的段落文本（红色）</p>
<h3 class="special">指定了.special类的段落文本（绿色）</h3>    
               
</body>
</html>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

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

元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接包含祖先元素的元素\

后代元素选择器
作用：
选中指定元素的指定后代元素

语法：
祖先元素后代元素{ }

子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素{ }
后面 9. 关系选择器中会讲到

该选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style type="text/css">

p strong {
color: red;
} /*后代选择器*/     /* 指定的是body标签第一行文字颜色为红色 */

strong {
color: blue;
}                    /* 指定的是body标签第二行文字颜色为蓝色 */

</style>
</head>
<body>

<p>段落文本<strong>嵌套在段落中，使用strong标记定义的文本（红色）</strong></p>
<strong>嵌套之外由strong标记定义的文本（蓝色）。</strong>

</body>
</html>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

4.3.7 并集选择器

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>并集选择器</title>
<style type = "text/css">

h2,h3,p {
color: red;
font-size: 14px;
} /*不同标记组成的并集选择器*/

h3,.special,#one {
text-decoration: underline;   
}  /* 加下划线 */

</style>
</head>
<body>

<h2>二级标题文本</h2>                           <!--字体14像素、红色-->
<h3>三级标题文本</h3>                           <!--字体14像素、红色、加下划线-->
<p class="special">段落文本1,加下划线。</p>      <!--字体14像素、红色、加下划线-->
<p>段落文本2</p>                               <!--字体14像素、红色-->
<p id="one">段落文本3</p>                      <!--字体14像素、红色、加下划线-->

</body>
</html>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

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

4.3.8 属性选择器

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

E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了 att 属性，att 属性值包含前缀为 value 的子字符串。

需要注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。\

例如：div\[id^=section]表示匹配包含id属性，且id属性值是以“section”字符串开头的div元素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E[att^=value] 属性选择器的应用</title>

<style type="text/css">

p[id^="one"] {
color: pink;
font-family: "微软雅黑";
font-size: 20px;
}

</style>
</head>
<body>

<p id="one">
天空是蔚蓝色
</p>   <!-- 属性选择器已定义 -->
<p id="two">
窗外有千纸鹤
</p>   <!-- 属性选择器不定义 -->
<p id="one1">
陪我弹琴写歌
</p>  <!-- 属性选择器已定义 -->
<p id="two2">
每一分每一刻
</p>  <!-- 属性选择器不定义 -->

</body>
</html>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

在上述代码中，使用了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元素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E[att$=value]属性选择器的应用</title>

<style type="text/css">

p[id$="one"] {
color: pink;
font-family: "微软雅黑";
font-size: 20px;
}

</style>
</head>
<body>

<p id="one1">
天空是蔚蓝色
</p>   <!-- 属性选择器不定义 -->
<p id="two">
窗外有千纸鹤
</p>   <!-- 属性选择器不定义 -->
<p id="1one">
陪我弹琴写歌
</p>  <!-- 属性选择器已定义 -->
<p id="two2">
每一分每一刻
</p>  <!-- 属性选择器不定义 -->

</body>
</html>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

在上述代码中，使用了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元素。

案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E[att*=value]属性选择器的应用</title>

<style type="text/css">

p[id*="one"] {
color: pink;
font-family: "微软雅黑";
font-size: 20px;
}

</style>

</head>
<body>

<p id="one1">
天空是蔚蓝色
</p>   <!-- 属性选择器已定义 -->
<p id="two">
窗外有千纸鹤
</p>   <!-- 属性选择器不定义 -->
<p id="1one">
陪我弹琴写歌
</p>  <!-- 属性选择器已定义 -->
<p id="two2">
每一分每一刻
</p>  <!-- 属性选择器不定义 -->

</body>
</html>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

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

4.3.9 关系选择器

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

子代选择器（>）

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子代选择器的应用</title>

<style type="text/css">

h1>strong {
color: red;
font-family: "微软雅黑";
font-size: 20px;
}

</style>
</head>
<body>

<h1>心怀梦想，<strong>不丢信仰</strong></h1>          <!-- （1） -->
<h1><em><strong>看透疾苦，</strong></em>深爱人间</h1> <!-- （2） -->

</body>
</html>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

在上述代码中，（1）中的strong元素为h1元素中的子元素，（2）中的strong元素为h1元素的孙元素，因此代码中设置的样式只对（1）中代码有效。

兄弟选择器（+、~）

兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。

兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种。

临近兄弟选择器

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>临近兄弟选择器的应用</title>

<style type="text/css">

p+h2 {
color: green;
font-family: "宋体";
font-size: 20px;
}

</style>
</head>
<body>

<h2>题菊花</h2>
<p>[唐] 黄巢</p>
<h2>飒飒西风满院栽，蕊寒香冷蝶难来。</h2>  <!-- （1） -->
<h2>他年我若为青帝，报与桃花一处开。</h2>

</body>
</html>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

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

普通兄弟选择器

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>普通兄弟选择器的应用</title>

<style type="text/css">

p~h2 {
color: pink;
font-family: "宋体";
font-size: 20px;
}

</style>
</head>
<body>

<h2>题菊花</h2>
<p>[唐] 黄巢</p>
<h2>飒飒西风满院栽，蕊寒香冷蝶难来。</h2>  <!-- （1） -->
<h2>他年我若为青帝，报与桃花一处开。</h2>  <!-- （2） -->

</body>
</html>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

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

4.3.10 :empty 选择器

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>empty 选择器的使用</title>

<style type="text/css">

p {
width:150px;
height:30px;
}

:empty {
background-color: #999;
}  /* (1) */

</style>
</head>
<body>

<p>题菊花</p>     
<p>[唐] 黄巢</p>
<p></p>      <!-- (2) -->
<p>飒飒西风满院栽，蕊寒香冷蝶难来。</p>
<p>他年我若为青帝，报与桃花一处开。</p> 

</body>
</html>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

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

4.3.11 :target 选择器

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>target选择器的使用</title>

<style type="text/css">

:target {
background-color: #e5eece;
}

</sty1e>
</head>
<body>

<h1>这是标题</h1>
<p><a href="#news1">跳转至内容1</a></p>
<p><a href="#news2">跳转至内容2</a></p>
<p>请单击上面的链接,:target选择器会突出显示当前活功的HTML锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
<p><b>注释：</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p>

</body>
</html>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

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

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

4.3.12 伪类选择器

结构化伪类选择器

:root 选择器

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>:root 选择器的应用</title>
<style type="text/css">

:root {
color: pink;
}

h2 {
color: red;
}

</style>
</head>
<body>

<h2>题菊花</h2>        //（1）
<p>[唐] 黄巢  飒飒西风满院栽，蕊寒香冷蝶难来。
他年我若为青帝，报与桃花一处开。</p>  //（2）

</body>
</html>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

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

:not 选择器

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>:not选择器的应用</title>

<style type="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>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

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

拓展参考：

:only-child 选择器

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>:only-child 选择器的应用</title>

<style type="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>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

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

:first-child 和 :last-child 选择器

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>first-child和last-child选择器的使用</title>

<style type="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选择器无法定义，该伪类方法比较繁琐

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战
之后会更新一下该类选择器如何正确使用

: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属性用来指定要插入的具体内容，该内容既可以为文本也可以为图片。

案例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>before选择器的使用</title>
<style type="text/css">

p:before {
content: "我是";
color: #c06;
font-size: 20px;
font-family: "微软雅黑";
font-weight: bold;
}
</style>
</head>
<body>

<p>阿ken啊，</p>

</body>
</html>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

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

:after 选择器

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>after选择器的使用</title>
<style type="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>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

链接伪类

在CSS中，通过链接伪类可以实现不同的链接状态。

所谓伪类并不是真正意义上的类，它的名称是由系统定义的，通常由标记名、类名或id名加":”构成。

超链接标记< a>的伪类有4种

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

案例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>链接伪类</title>
</head>
<style type="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>

<a href="#">公司首页</a>
<a href="#">公司简介</a>
<a href="#">产品介绍</a>
<a href="#">联系我们</a>

</body>
</html>

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

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

注意:

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

4.4 CSS层叠性和继承性

层叠性
所谓层叠性是指多种CSS样式的叠加
继承性
所谓继承性是指书写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结构:

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

这时，页面文本将应用权重最高的样式，即文本颜色为红色。

此外，在考虑权重时，还需要注意些特殊的情况。

继承样式的权重为0，即在嵌套结构中，不管父元素样式的权重多大，被子元素维承时，它的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。\

继承即子元素继承父元素的相关样式属性，如：

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

上面的实例中段落的文字就会继承body的样式

例如下面的CSS样式代码:

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

对应的HTML结构为:

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

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

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，它拥有比上面提到的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说最靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
例如:

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

// HTML文档结构为:
<doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS优先极</title>

<link rel="stylesheet" href="style.css" type="text/css"/>
<style type="text/css">

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

</style>
</head>
<body>

<p id="header">权重相同时，就近优先</p>

</body>
</html>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

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

如果此时将内嵌样式更改为:

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

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

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何及样式位置的远近，!important都具有最大优先级。例如:

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

// HTML文档结构为:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>!important命令最优先</title>

<link rel="stylesheet" href="style.css" type="text/css"/>
<style type="text/css">

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

</style>
</head>

<body>
<p id="header" style="color:yellow">
<!--行内式CSS样式-->天王盖地虎，!important命令最优先
</p>
</body>
</html>

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

该页面被解析后，段落文本显示为红色，即使用!important命令的样式拥有最大的优先级。
需要注意的是，important 命令必须位于属性值和分号之间，否则无效。

需要注意的是，复合选择器的权重为组成它的基础选择器权重的叠加，但是这种叠加并不是简单的数字之和。

案例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器权重的叠加</title>

<style type="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>
<div class="inner"> 文本的样式</div>
</div></div></div></div></div></div></div></div></div>
</div>

</body>
</html>

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

今天阿ken的学习笔记到此就先告一段落啦我们下次再见

PEACE

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战
如果累了就给自己加加油
这一路注定孤独

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

我们都能努力坚持走下去
祝你也祝我

你好，我是阿ken
感谢阅读
博文若有瑕疵请在评论区留言或私聊我感谢不吝赐教

阿ken的HTML、CSS的入门指南_CSS3选择器（笔记四）｜8月更文挑战

4 CSS选择器

4.1 引入CSS样式表

1. 行内式

2. 内嵌式

3. 链入式

4.2 CSS选择器样式规则

4.3 CSS选择器

4.3.1 标记选择器

4.3.2 类选择器

4.3.3 id选择器

4.3.4 通配符选择器

4.3.5 标签指定式选择器(交集选择器)

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

4.3.7 并集选择器

4.3.8 属性选择器

4.3.9 关系选择器

4.3.10 :empty 选择器

4.3.11 :target 选择器

4.3.12 伪类选择器

4.4 CSS层叠性和继承性

4.5 CSS优先级

常见问题FAQ

掘金(请叫我阿ken) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

4 CSS选择器

4.1 引入CSS样式表

1. 行内式

2. 内嵌式

3. 链入式

4.2 CSS选择器样式规则

4.3 CSS选择器

4.3.1 标记选择器

4.3.2 类选择器

4.3.3 id选择器

4.3.4 通配符选择器

4.3.5 标签指定式选择器(交集选择器)

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

4.3.7 并集选择器

4.3.8 属性选择器

4.3.9 关系选择器

4.3.10 :empty 选择器

4.3.11 :target 选择器

4.3.12 伪类选择器

4.4 CSS层叠性和继承性

4.5 CSS优先级

常见问题FAQ

掘金(请叫我阿ken) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式