CSS（一）：选择器
目录
CSS关联HTML的方式
内联样式
内部样式表
外部样式表
选择器
基本选择器
标签选择器
类选择器
id选择器
层次选择器
后代选择器
子选择器
相邻兄弟选择器
通用兄弟选择器
结构伪类选择器
:first-child 和 :last-child
:nth-child(x) 和 :nth-of-type(x)
:hover
属性选择器
CSS关联HTML的方式
内联样式
内联样式是将 CSS 样式直接写在 HTML 元素的 style 属性中。这是最简单的方式，但只适用于少量样式，并且不便于维护
例如：
<p style="color: blue; font-size: 20px;">这是一个蓝色的文本</p>
内部样式表
内部样式表是将 CSS 代码放在 HTML 文件的 <head> 部分，使用 <style> 标签进行定义。这种方法适用于只需要为当前页面设置样式的情况
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式示例</title>
<style>
/* CSS 代码 */
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个绿色的文本。</p>
</body>
</html>
外部样式表
外部样式表是将 CSS 样式写在单独的 .css 文件中，并在 HTML 文件中通过 <link> 标签来引入（最常见方式）
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式示例</title>
<!-- 引入外部CSS文件 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>这是一个红色的文本。</p>
</body>
</html>
选择器
基本选择器
标签选择器
标签选择器是通过标签名来选择元素，可以应用于页面上所有指定的标签
例如：
h1 {
color: red;
}所有 <h1> 标签的文字颜色都将变为红色
类选择器
类选择器通过给 HTML 元素加上 class 属性来选择元素，可以使多个不同的标签共享同一个类
类选择器的使用方法为.+类名
例如：
<style>
.title {
color: red;
}
</style>
<h1 class="title">标题</h1>
<p class="title">段落文字</p>
id选择器
为标签附上属性id，使用#+id的名称选择
id必须全局唯一
例如：
<style>
#name {
color: red;
}
</style>
<h1 id="name">名称</h1>
只有具有特定 id="name" 的元素会应用该样式
层次选择器
后代选择器
元素的所有后代都被选中
用前元素+空格+后元素表示
body p {
background: red;
}
在这个例子中，所有在 <body> 元素中的 <p> 元素都会被选中并设置背景颜色为红色
子选择器
只选中元素的子代，不选中孙代
用父元素+>+子元素表示
body > p {
background: red;
}
在这个例子中，只有 <body> 元素下的直接 <p> 子元素才会应用这个样式，而嵌套在其他元素中的 <p> 不会受到影响
相邻兄弟选择器
只选择元素相邻的下方的，唯一一个标签，且不含本身
用前元素+加号+后元素表示
/*只有class为name的元素的下一个相邻p标签变色*/
.name + p {
background: red;
}
在这个例子中，只有紧接在 .name 元素之后的 <p> 元素会被选中并应用背景色
通用兄弟选择器
选中当前元素的向下所有兄弟元素
用前元素+~+后元素表示
/*class为name的元素下面的所有p标签变色*/
.name ~ p {
background: red;
}
在这个例子中，所有在 .name 元素之后的 <p> 元素都会应用这个样式，无论它们之间的元素是什么
结构伪类选择器
:first-child 和 :last-child
:first-child 选择器用于选中父元素的第一个子元素，:last-child 用于选择最后一个子元素
ul li:first-child {
color: red;
}
ul li:last-child {
color: blue;
}
在这个例子中，第一个 <li> 元素的文字颜色会变为红色，最后一个 <li> 元素的文字颜色会变为蓝色
:nth-child(x) 和 :nth-of-type(x)
element:nth-child(x) 选择父元素中的第 x 个子元素。这个选择器是根据元素在其父元素中的位置来进行选择的，而不考虑元素的类型。如果该元素的类型和element不同，则不会发生任何改变
element:nth-of-type(x) 选择父元素中第 x 个指定类型的子元素。这个选择器在选择时仅会考虑与指定类型相同的元素，忽略其他类型的元素
<div>
<p>段落 1</p>
<span>标签 1</span>
<p>段落 2</p>
<span>标签 2</span>
</div>
使用 :nth-child(2) 选择器：
p:nth-child(2) {
color: red;
}
这里，p:nth-child(2) 会选择父元素 <div> 中的第二个子元素。由于父元素的第二个子元素是 <span>（而不是 <p>），所以没有任何效果。
使用 :nth-of-type(2) 选择器：
p:nth-of-type(2) {
color: red;
}
这里，p:nth-of-type(2) 会选择父元素 <div> 中第二个 <p> 标签，文本颜色会变成红色
:hover
用于选择鼠标悬停在元素上的时候应用的样式
a:hover {
background: red;
}
当鼠标悬停在 <a> 标签上时，背景颜色会变成红色
属性选择器
属性选择器通过选择元素的特定属性及其值来应用样式
格式：标签名[属性名=属性值]，其中属性值可以为正则表达式
一些常用的正则表达式：
- =：绝对等于
- *=：包含
- ^=：以什么开头
- $=：以什么结尾
/*存在id属性的元素*/
a[id] {
color: red;
}
/*id为first的元素*/
a[id="first"] {
color: red;
}
/*class属性中含有link的元素*/
a[class*="link"] {
color: red;
}
/*href属性值以http开头的元素*/
a[href^="http"] {
color: red;
}