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>

选择器

基本选择器

标签选择器

标签选择器是通过标签名来选择元素，可以应用于页面上所有指定的标签

例如：

css">h1 {
		color: red;
	}

所有 <h1> 标签的文字颜色都将变为红色

类选择器

类选择器通过给 HTML 元素加上 class 属性来选择元素，可以使多个不同的标签共享同一个类

类选择器的使用方法为.+类名

例如：

css"><style>
	.title {
		color: red;
	}
</style>

<h1 class="title">标题</h1>
<p class="title">段落文字</p>

id选择器

为标签附上属性id，使用#+id的名称选择
id必须全局唯一

例如：

css"><style>
	#name {
		color: red;
	}
</style>

<h1 id="name">名称</h1>

只有具有特定 id="name" 的元素会应用该样式

层次选择器

后代选择器

元素的所有后代都被选中
用前元素+空格+后元素表示

css">body p {
	background: red;
}

在这个例子中，所有在 <body> 元素中的 <p> 元素都会被选中并设置背景颜色为红色

子选择器

只选中元素的子代，不选中孙代
用父元素+>+子元素表示

css">body > p {
	background: red;
}

在这个例子中，只有 <body> 元素下的直接 <p> 子元素才会应用这个样式，而嵌套在其他元素中的 <p> 不会受到影响

相邻兄弟选择器

只选择元素相邻的下方的，唯一一个标签，且不含本身
用前元素+加号+后元素表示

css">/*只有class为name的元素的下一个相邻p标签变色*/
.name + p {
	background: red;
}

在这个例子中，只有紧接在 .name 元素之后的 <p> 元素会被选中并应用背景色

通用兄弟选择器

选中当前元素的向下所有兄弟元素
用前元素+~+后元素表示

css">/*class为name的元素下面的所有p标签变色*/
.name ~ p {
	background: red;
}

在这个例子中，所有在 .name 元素之后的 <p> 元素都会应用这个样式，无论它们之间的元素是什么

结构伪类选择器

`:first-child` 和 `:last-child`

:first-child 选择器用于选中父元素的第一个子元素，:last-child 用于选择最后一个子元素

css">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) 选择器：

css">p:nth-child(2) {
  color: red;
}

这里，p:nth-child(2) 会选择父元素 <div> 中的第二个子元素。由于父元素的第二个子元素是 <span>（而不是 <p>），所以没有任何效果。

使用 :nth-of-type(2) 选择器：

css">p:nth-of-type(2) {
  color: red;
}

这里，p:nth-of-type(2) 会选择父元素 <div> 中第二个 <p> 标签，文本颜色会变成红色

:hover

用于选择鼠标悬停在元素上的时候应用的样式

css">a:hover {
	background: red;
}

当鼠标悬停在 <a> 标签上时，背景颜色会变成红色

属性选择器

属性选择器通过选择元素的特定属性及其值来应用样式

格式：标签名[属性名=属性值]，其中属性值可以为正则表达式

一些常用的正则表达式：

=：绝对等于
*=：包含
^=：以什么开头
$=：以什么结尾

css">/*存在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;
}