小白基础：CSS 基础与选择器详解什么是 CSS？ CSS（Cascading Style Sheets，层叠样式表）是

什么是 CSS？

CSS（Cascading Style Sheets，层叠样式表）是一种用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档样式的语言。通过 CSS，你可以控制网页的布局、颜色、字体、间距等视觉效果。

下面我们来看一下css基本规则

/* CSS规则 */
h1 { /* 选择器 */
    color: red; /* 声明 */
    text-align: center; /* 声明 */
}

选择器：h1 是选择器，用于指定要应用样式的元素。
声明：color: red; 和 text-align: center; 是声明，定义了具体的样式属性和值。可能你会好奇什么是选择器？先别急待会再告诉你！

CSS 的引入方式

CSS 可以通过多种方式引入到 HTML 文档中：

内联样式：
- 直接在 HTML 元素的 style 属性中定义样式。

<h1 style="color:blue;">A Blue Heading</h1>  
  
<p style="color:red;">A red paragraph.</p>

亲自试一试 »

内部样式表：

在 HTML 文档的 <head> 部分使用 <style> 标签定义样式。

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {background-color: powderblue;}  
h1   {color: blue;}  
p    {color: red;}  
</style>  
</head>  
<body>  
  
<h1>This is a heading</h1>  
<p>This is a paragraph.</p>  
  
</body>  
</html>

亲自试一试 »

外部样式表：

将样式定义在一个单独的 .css 文件中，并通过 <link> 标签引入。

<!DOCTYPE html>  
<html>  
<head>  
  <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
  
<h1>This is a heading</h1>  
<p>This is a paragraph.</p>  
  
</body>  
</html>

亲自试一试 »

以下是 “styles.css” 文件的样子：

“styles.css”：

body {  
  background-color: powderblue;  
}  
h1 {  
  color: blue;  
}  
p {  
  color: red;  
}

好介绍完css的引入方法之后我们可以来解释什么是选择器了！

什么是选择器？

选择器是CSS（层叠样式表）中的一个概念，用于指定HTML文档中的哪些元素应该应用特定的样式规则。通过选择器，你可以根据元素的标签名、类名、ID、属性或它们的组合来选择元素，并为这些元素定义样式。

以下是一些常见的选择器类型：

第一大类基础选择器

标签选择器：根据元素的标签名来选择元素。例如，p 选择器将选择所有 <p> 标签。
类选择器：根据元素的类名来选择元素。类名以 . 开头，例如 .my-class 选择器将选择所有具有 my-class 类的元素。
ID选择器：根据元素的ID来选择元素。ID以 # 开头，例如 #my-id 选择器将选择具有 my-id ID 的元素。
属性选择器：根据元素的属性来选择元素。例如，[type="text"] 选择器将选择所有 type 属性为 text 的元素。

例1 标签选择器

在这里页面上的所有 <p> 元素都将是居中对齐，带有红色文本颜色：

p {  
  text-align: center;  
  color: red;  
}

亲自试一试 »

例2 id选择器

下面的 CSS 规则将应用于 id=“para1” 的 HTML 元素：

#para1 {  
  text-align: center;  
  color: red;  
}

亲自试一试 »

例3 类选择器

在此示例中，所有带有 class=“center” 的 HTML 元素都将是红色并居中对齐：

.center {  
  text-align: center;  
  color: red;  
}

亲自试一试 »

第二大类组合选择器

组合选择器：可以将多个选择器组合在一起使用，以更精确地选择元素。例如，div.my-class 选择器将选择所有具有 my-class 类的 <div> 标签。

例

在此示例中，只有 class=“center” 的

元素才会是红色和居中对齐：

p.center {  
  text-align: center;  
  color: red;  
}

亲自试一试 »

后代选择器

在CSS中，后代选择器用于选择作为某元素后代的元素。后代选择器由两个或多个选择器之间的空格表示。例如，如果要选择所有<p>元素，这些元素是<div>元素的后代，可以使用以下CSS代码：

     div p{ 
     color: red; 
     }

在这个例子中，div p是一个后代选择器，它选择了所有作为<div>元素后代的<p>元素，并将它们的文本颜色设置为红色。

请注意，后代选择器可以选择任意深度的后代元素。例如，div p span将选择所有作为<div>元素后代的<p>元素中的<span>元素。

此外，后代选择器可以与其他类型的选择器结合使用，以创建更具体的选择条件。例如，div#main p将选择所有作为具有id="main"的<div>元素后代的<p>元素。

子元素选择器：

选择某个元素的直接子元素。
- 子选择器（>） ：
- 只能选择直接子元素。
- 不会选择孙子或更深层级的后代元素。

例

 .parent > p { 
    color: red; 
    }

子选择器用的是>号，后代选择器用的是空格。

如果你对子元素和后代元素不太清楚可以看看这是例子。

后代元素 vs 子元素的区别

后代元素和子元素的关键区别在于 层级关系：

子元素（Child Element） ：
- 是某个父元素的 直接下级元素。
- 与父元素之间只有 一级关系。
后代元素（Descendant Element） ：
- 包括某个父元素的 所有层级的子孙元素。
- 可以是直接子元素，也可以是更深层嵌套的孙子或曾孙元素。

HTML 示例

<div class="parent">
  <p class="child">我是子元素</p>
  <div class="child-container">
    <p class="descendant">我是后代元素</p>
  </div>
</div>

层级关系图

div.parent
- 直接子元素：
  - <p class="child">
  - <div class="child-container">
- 所有后代元素：
  - <p class="child">（子元素，也是后代元素）
  - <div class="child-container">（子元素，也是后代元素）
  - <p class="descendant">（仅为后代元素）

那继续来看兄弟选择器

相邻兄弟选择器
普通兄弟选择器

相邻兄弟选择器 (`+`) 和普通兄弟选择器 (`~`) 的区别

相邻兄弟选择器和普通兄弟选择器都用于选择同级元素，但它们在选择范围上有所不同：

1. 相邻兄弟选择器 (`+`)

选择紧跟在指定元素后面的 第一个兄弟元素。
只能选择紧邻的兄弟，无法选中后续的其他兄弟。

2. 普通兄弟选择器 (`~`)

选择指定元素后面的 所有兄弟元素。
可以选择与目标元素同级的所有后续兄弟元素。

HTML 示例

<div class="container">
  <h1>标题</h1>
  <p class="first">第一个段落</p>
  <p class="second">第二个段落</p>
  <p class="third">第三个段落</p>
</div>

CSS 示例

相邻兄弟选择器 (`+`)

h1 + p {
  color: red;
}

效果：
- 只选择紧跟在 <h1> 后面的第一个 <p>（即 class="first" 的段落）。
- 如果<h1>后面的第一个标签不是<p>则与<h1>相邻的段落不会产生效果。
- 输出：
  - "第一个段落" 的文字变红。
  - "第二个段落" 和 "第三个段落" 不受影响。

普通兄弟选择器 (`~`)

h1 ~ p {
  color: blue;
}

效果：
- 选择 <h1> 后面的所有兄弟 <p> 元素（class="first"、class="second" 和 class="third"）。
- 输出：
  - "第一个段落"、"第二个段落" 和 "第三个段落" 的文字都变蓝。

直观效果对比

相邻兄弟选择器 (`+`)

只选中紧邻的一个兄弟：

<h1>标题</h1>
<p class="first" style="color: red;">第一个段落</p>
<p class="second">第二个段落</p>
<p class="third">第三个段落</p>

普通兄弟选择器 (`~`)

选中后续所有兄弟：

<h1>标题</h1>
<p class="first" style="color: blue;">第一个段落</p>
<p class="second" style="color: blue;">第二个段落</p>
<p class="third" style="color: blue;">第三个段落</p>

使用场景总结

相邻兄弟选择器 (+) ：当你只想选中紧邻的兄弟元素时（例如仅为标题后的第一个段落加样式）。
普通兄弟选择器 (~) ：当你需要选中目标元素后所有同级兄弟元素时（例如为标题后所有段落加样式）。

最后一个大类：伪类选择器

伪类选择器

以 : 或 :: 开头，用于选择处于特定状态的元素。
例如：:hover, :active, ::before, ::after 等。

伪类选择器分类

1. 用户交互伪类

与用户操作相关。

常见伪类

:hover：鼠标悬停时匹配。
```
a:hover {
  color: red;
}
```
效果：鼠标悬停在链接上时，链接颜色变红。
:active：鼠标按下（激活状态）时匹配。
```
button:active {
  background-color: blue;
}
```
效果：按下按钮时，背景颜色变蓝。
:focus：元素获得焦点时匹配。
```
input:focus {
  border: 2px solid green;
}
```
效果：输入框被点击后，边框变为绿色。

2. 结构伪类

根据元素在文档结构中的位置匹配。

常见伪类

:first-child：选择父元素的第一个子元素。
```
p:first-child {
  color: blue;
}
```
效果：父元素中第一个 <p> 的文字变蓝。
:last-child：选择父元素的最后一个子元素。
```
p:last-child {
  color: green;
}
```
效果：父元素中最后一个 <p> 的文字变绿。
:nth-child(n)：选择父元素的第 n 个子元素。
```
li:nth-child(2) {
  font-weight: bold;
}
```
效果：列表的第二个 <li> 变为加粗。
:nth-of-type(n)：选择父元素中某一类型的第 n 个子元素。
```
p:nth-of-type(2) {
  color: red;
}
```
效果：选择父元素中第二个 <p>，并将文字变红。
:not(selector)：选择不匹配某选择器的元素。
```
p:not(.special) {
  color: gray;
}
```
效果：选择所有没有 class="special" 的 <p>，并将文字变灰。

3. 表单伪类

用于选择表单元素的特定状态。

常见伪类

:checked：匹配选中的复选框、单选按钮或选中状态的 <option>。
```
input[type="checkbox"]:checked {
  border: 2px solid red;
}
```
效果：选中的复选框边框变红。
:disabled：匹配禁用状态的表单控件。
```
input:disabled {
  background-color: lightgray;
}
```
效果：禁用的输入框背景变为灰色。

:enabled：匹配启用状态的表单控件。

input:enabled {
  background-color: white;
}

:placeholder-shown：匹配显示占位符的输入框。

input:placeholder-shown {
  border: 1px dashed blue;
}

4. 链接伪类

专门用于链接元素。

常见伪类

:link：选择未访问的链接。
```
a:link {
  color: blue;
}
```
:visited：选择已访问的链接。
```
a:visited {
  color: purple;
}
```
注意：出于隐私保护，:visited 样式只能更改链接的部分样式（如颜色），不能修改布局或属性。

5. 动态伪类

匹配元素的动态状态。

常见伪类

:root：匹配文档的根元素（通常是 <html>）。
```
:root {
  --main-color: blue;
}
```
效果：定义全局 CSS 变量。

:empty：匹配没有任何子元素的元素。

div:empty {
  border: 1px dashed gray;
}

:target：匹配 URL 中指定的锚点目标。
```
#section1:target {
  background-color: yellow;
}
```
效果：当锚点 #section1 被访问时，背景变黄。

6. 否定伪类

:not() ：排除特定选择器。
```
div:not(.active) {
  opacity: 0.5;
}
```
效果：选择所有没有 class="active" 的 <div>，并设置半透明。

伪类的结合使用

伪类可以与普通选择器组合使用，形成复杂的选择模式。

示例

ul li:nth-child(odd):hover {
  background-color: lightblue;
}

效果：为列表中的奇数项添加鼠标悬停效果。

CSS 优先级

CSS 的优先级决定了当多条样式规则作用于同一元素时，哪条规则会生效。优先级是通过 选择器的权重 来计算的。更高优先级的规则会覆盖低优先级的规则。

优先级计算规则

优先级由 4 组数字表示：(A, B, C, D)，其中：

A：是否使用了内联样式（直接写在元素上的 style 属性）。
B：选择器中 ID 的数量。
C：选择器中类、属性选择器和伪类的数量。
D：选择器中元素和伪元素的数量。

优先级比较时，从左到右逐位比较，前一位高的优先级更高。

优先级权重示例

选择器	权重 (A, B, C, D)	示例
内联样式	(1, 0, 0, 0)	`<div style="color: red;">`
ID 选择器	(0, 1, 0, 0)	`#header`
类、属性选择器、伪类	(0, 0, 1, 0)	`.btn`, `[type="text"]`, `:hover`
元素选择器、伪元素	(0, 0, 0, 1)	`div`, `h1`, `::after`
通配符选择器 `*`	(0, 0, 0, 0)	`*`

优先级计算示例

假设以下规则作用于同一元素：

/* 权重 (0, 0, 1, 0) */
p.highlight {
  color: blue;
}

/* 权重 (0, 1, 0, 0) */
#main p {
  color: green;
}

/* 权重 (1, 0, 0, 0) */
style="color: red;"

style="color: red;" 的优先级最高，因为它是内联样式。
#main p 的优先级高于 p.highlight，因为 ID 选择器的权重高。

最终颜色：red。

继承与优先级

继承的样式（如 color, font 等）默认优先级最低。
直接定义在元素上的样式会覆盖继承的样式。

重要性声明

如果某条样式使用了 !important，它会优先于普通规则：

p {
  color: blue !important;
}

p {
  color: red;
}

即使第二条规则写在后面，!important 仍会使第一条规则生效。

注意： 如果多个 !important 冲突，则按照优先级规则比较权重。

冲突解决规则总结

比较优先级权重。
如果权重相同，按规则的书写顺序，后写的覆盖前写的。
如果规则带有 !important，优先于其他规则。

常见问题和注意事项

权重叠加：多个选择器组合的权重是各部分的累加。

/* 权重 (0, 1, 1, 1) */
#main .highlight div {
  color: blue;
}

避免滥用 !important：!important 应尽量少用，以免破坏样式的可维护性。
通配符选择器的最低优先级：* 的权重是 (0, 0, 0, 0)，几乎可以被所有规则覆盖。

实战建议

写选择器时遵循简洁性：
- 优先使用类选择器。
- 避免过于深层的嵌套选择器。
按需使用 ID 选择器：
- ID 选择器权重高，可能导致样式难以覆盖，推荐主要使用类选择器。
调试时善用浏览器开发者工具：
- 开发者工具可以清晰地看到每条样式的来源和优先级。

总结

CSS 是 Web 开发中非常重要的工具，通过合理使用选择器和理解优先级，可以使你的网页更加美观和易用。希望本文能帮助你更好地掌握 CSS 的基本概念和选择器的使用方法。

** 点个赞再走吧！**

小白基础：CSS 基础与选择器详解

什么是 CSS？

下面我们来看一下css基本规则

CSS 的引入方式

“styles.css”：

好介绍完css的引入方法之后我们可以来解释什么是选择器了！

什么是选择器？

第一大类 基础选择器

例1 标签选择器

例2 id选择器

例3 类选择器

第二大类 组合选择器

例

后代选择器

例

如果你对子元素和后代元素不太清楚可以看看这是例子。

后代元素 vs 子元素的区别

HTML 示例

层级关系图

那继续来看兄弟选择器

相邻兄弟选择器 (+) 和 普通兄弟选择器 (~) 的区别

1. 相邻兄弟选择器 (+)

2. 普通兄弟选择器 (~)

HTML 示例

CSS 示例

相邻兄弟选择器 (+)

普通兄弟选择器 (~)

直观效果对比

相邻兄弟选择器 (+)

普通兄弟选择器 (~)

使用场景总结

最后一个大类： 伪类选择器

伪类选择器

伪类选择器分类

1. 用户交互伪类

常见伪类

2. 结构伪类

常见伪类

3. 表单伪类

常见伪类

4. 链接伪类

常见伪类

5. 动态伪类

常见伪类

6. 否定伪类

伪类的结合使用

示例

CSS 优先级

优先级计算规则

优先级权重示例

优先级计算示例

继承与优先级

重要性声明

冲突解决规则总结

常见问题和注意事项

实战建议

总结

第一大类基础选择器

第二大类组合选择器

相邻兄弟选择器 (`+`) 和普通兄弟选择器 (`~`) 的区别

1. 相邻兄弟选择器 (`+`)

2. 普通兄弟选择器 (`~`)

相邻兄弟选择器 (`+`)

普通兄弟选择器 (`~`)

相邻兄弟选择器 (`+`)

普通兄弟选择器 (`~`)

最后一个大类：伪类选择器