前端基础:常见CSS选择器用法
- [1. 基础选择器](#1. 基础选择器)
- [1.1 标签选择器](#1.1 标签选择器)
- [1.2 类选择器
.](#1.2 类选择器 .) - 1.3 ID 选择器
# - [1.4通配符选择器
*](#1.4通配符选择器 *)
- [2. 复合选择器](#2. 复合选择器)
- [2.1 后代选择器 空格](#2.1 后代选择器 空格)
- [2.2 子元素选择器
>](#2.2 子元素选择器 >) - [2.3 并集选择器
,](#2.3 并集选择器 ,) - [2.4 相邻兄弟选择器
+](#2.4 相邻兄弟选择器 +) - [2.5 通用兄弟选择器
~](#2.5 通用兄弟选择器 ~)
- [3. 属性选择器](#3. 属性选择器)
- [4. 伪类选择器](#4. 伪类选择器)
- [4.1
nth‑child和nth‑of‑type的对比](#4.1 nth‑child 和 nth‑of‑type 的对比)
- [4.1
- [5. 伪元素选择器
::](#5. 伪元素选择器 ::) - [6. 选择器优先级](#6. 选择器优先级)
- [7. 简单使用示例完整代码](#7. 简单使用示例完整代码)
前言：
这里是小谢同学整理的前端CSS选择器用法的笔记。笔记用于自我复盘巩固，有错误欢迎大家指出，专栏还有 Java、网络、C 语言等系列笔记欢迎翻阅.同时也希望,我的文章能够帮助到你~
1. 基础选择器
基础选择器是所有选择器的根基，共四种：标签、类、ID、通配符。
选中之后,我们可以对所选中的标签进行修饰
标签选择器
直接使用 HTML 标签名，选中页面中所有同名标签。
css
div {
color: red;
}类选择器 .
使用
.开头，对应标签的class属性，可复用、可多个叠加。(选择器名字自己决定)
css
.box {
font-size: 16px;
}D 选择器
使用
#开头，对应标签 id，页面唯一，不能够重复。(选择器名字自己决定)
css
#main {
background: #ccc;
}通配符选择器 *
使用
*，选中页面所有元素，常用于清除默认边距。(不需要写名字)
css
* {
margin: 0;
padding: 0;
}[🔙 返回目录](#🔙 返回目录)
复合选择器
复合选择器可以组合条件，精准选中指定范围的元素，是开发主力选择器。
后代选择器 空格
选中父元素内部所有后代元素（子、孙子全部）。
css
ul li {
color: blue;
}子元素选择器 >
只选中直接子元素，孙子层级不会生效。
css
ul > li {
border: 1px solid #000;
}并集选择器 ,
多个选择器共用同一套样式，简化代码。
css
h1, h2, p {
margin: 10px;
}相邻兄弟选择器 +
只选中紧挨着的下一个同级元素。
css
div + p {
color: green;
}通用兄弟选择器 ~
选中当前元素后面所有同级兄弟元素。
css
div ~ p {
color: orange;
}[🔙 返回目录](#🔙 返回目录)
3. 属性选择器
会根据标签自带属性 筛选元素，常用于链接、图片、表单。
css
[title] { color: red; } /* 拥有title属性 */
[title="test"] { } /* 属性完全匹配 */
[href^="https"] { } /* 以https开头 */
[src$=".jpg"] { } /* 以.jpg结尾 */
[class*="item"] { } /* 包含指定字符 */4. 伪类选择器
伪类以
:开头，用于描述元素的不同状态。链接四状态: link → visited → hover → active(必须按照顺序来写)
css
a:link { color: #333; } /* 未访问 */
a:visited { color: purple; }/* 已访问 */
a:hover { color: red; } /* 鼠标放上去形式 */
a:active { color: blue; } /* 鼠标点击瞬间 */例如:
刚打开页面，没点链接：
#333深灰色鼠标移上去：瞬间变成红色
鼠标按住不松手：变成蓝色
松开访问完页面回来：文字变成紫色
注意:
:link、:visited只对<a href="...">有效，a 标签必须写 href 属性。如果 a 不加 href，这两个伪类不生效。
hover不止 a 能用！div、p 都可以写div:hover{}，但是 link、visited 只能给 a 链接。
nth‑child 和 nth‑of‑type 的对比
- nth-child(n)：统计父元素所有子节点，不区分标签类型
- nth-of-type(n)：只统计相同标签的排序
例如:
css
<body>
<style>
p:nth-child(1) {
background: red;
}
</style>
<div class="box">
<p>第1个p</p>
<span>这是span标签</span>
<p>第2个p</p>
<p>第3个p</p>
</div>
</body>层级：父
.box，子依次：p→span→p→p父的第 2 个子是
<span>，不是 p 标签，所以这条规则选不到任何元素，完全失效(括号内部填第几个标签的顺序位置)
css
<body>
<style>
p:nth-of-type(2) {
background: green;
}
</style>
<div class="box">
<p>第1个p</p>
<span>这是span标签</span>
<p>第2个p</p>
<p>第3个p</p>
</div>
</body>
只会对 p 标签单独计数，跳过别的标签 (span)。
[🔙 返回目录](#🔙 返回目录)
5. 伪元素选择器 ::
伪元素可以创建虚拟元素，常用于装饰、前缀后缀内容。
注意：必须携带 content 属性！不能为空！
css
.box::before {
content: "★";
color: red;
}
.box::after {
content: "";
display: block;
}[🔙 返回目录](#🔙 返回目录)
6. 选择器优先级
当同一个元素被多条 CSS 选中，权重数字大的生效 ；权重不进位！不是十进制！
口诀：通标类 ID 行，important 称王
权重等级从低到高：
- 通配符、继承：0 0 0 0
- 标签选择器：0 0 0 1
- 类、伪类、属性选择器：0 0 1 0
- ID选择器：0 1 0 0
- 行内样式：1 0 0 0
- !important：最高优先级（慎用）
css
/* 10个类选择器：0 0 10 */
.box1.box2.box3.box4.box5.box6.box7.box8.box9.box10 {
color: red;
}
/* ID选择器：0 1 0 0 */
#demo {
color: blue;
}最终文字还是蓝色 ，ID 权重直接碾压一堆类。
结论：再多类选择器，也覆盖不了一个 ID 选择器。
[🔙 返回目录](#🔙 返回目录)
7. 简单使用示例完整代码
css
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS选择器示例</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
color: #333;
}
.demo {
font-size: 18px;
}
ul .item {
color: blue;
}
</style>
</head>
<body>
<p class="demo">测试文本样式</p>
<ul>
<li class="item">列表项1（变色）</li>
<li>列表项2（默认）</li>
</ul>
</body>
</html>[🔙 返回目录](#🔙 返回目录)
