想要学会CSS3选择器那你就不得不看这篇博文（四）
你好，我是阿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>
注意:
- href：可以是所链接外部样式表的URL，也可以是相对路径或绝对路径。
- type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。
- rel：定义当前的文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用， 同时一个HTML页面也可以通过多个< link>标记链接多个CSS样式表。
链入式是使用频率最高，也是最实用的CSS样式表，
实现了结构和表现的完全分离，使得页面的前期制作和后期维护都十分方便。
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 属性值，多个值之间使用空格隔开
实例：
<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>
<p class="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;
}
<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>
<p id="font24">段落1:id="font24",设置字号为24px。p>
<p id="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。
<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>
4.3.6_后代选择器(和子元素)
_
元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接包含祖先元素的元素
_
后代元素选择器
作用：
选中指定元素的指定后代元素
_
语法：
祖先元素 后代元素{ }
_
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素{ }
后面 9. 关系选择器中会讲到
_
该选择器用来选择元素或元素组的后代，其**写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。**当标记发生嵌套时，内层标记就成为外层标记的后代。
<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>
4.3.7_并集选择器
_
并集选择器又叫复合选择器
可以选中同时满足多个选择器的元素
并集选择器是各个选择器通过逗号连接而成
<html>
<head>
<meta charset="utf-8">
<title>并集选择器title>