CSS基础学习：CSS选择器与优先级规则

强子感冒了2026-02-02 10:41

CSS初识

CSS全称Cascading Style Sheets，级联样式表，是专门用来给HTML定义样式，美化网页的。

HTML跟Markdown一样，都是一种文本标记语言，用来结构化标记内容。Markdown编辑器一般有源码模式和渲染模式，在渲染模式下，不同的标记展示不同的样式，但是这个样式一般是不能修改的。网页则不同，可以通过CSS给HTML定义样式，比如可以修改<h1>标题的字体、字号、颜色等等。

CSS目前最新的版本是CSS3，支持定义圆角、阴影、动画等。

CSS快速入门

CSS一般有两种写法，第一种是在HTML的<head>标签内，用<style>标签，在其中编写CSS代码。

CSS的编写方式很简单，结构为：

CSS 复制代码 
选择器 {
	声明1;
	声明2;
	...
}

比如在HTML<style>标签内编写CSS：

html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Title</title>  
  <!--仅做入门演示，不建议HTML内写CSS-->  
  <style>  
    h1{  
      color: red;  
      background-color: #b3d4fc;  
    }  
  </style>  
</head>  
<body>  
<h1>我是标题</h1>  
<p>我是段落</p>  
</body>  
</html>

HTML内编写CSS，虽然可以这么操作，但是现代开发不再建议这么做，而是建议编写独立的CSS文件，再在HTML引入CSS文件。

在head内使用link标签，指定rel属性值为stylesheet，href属性值为CSS文件路径，比如：

html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Title</title>  
  <!-- 引入外部CSS文件 -->  
  <link rel="stylesheet" href="../css/demo.css">  
</head>  
<body>  
<h1>我是标题</h1>  
<p>我是段落</p>  
</body>  
</html>

HTML通过link标签引入CSS文件，实现了HTML+CSS的内容与样式分离。这样的好处在于：

  1. CSS文件可以复用，即样式复用。
  2. HTML简单，利于搜索引擎收录
  3. 修改样式可以直接修改CSS，而修改内容直接修改HTML，不容易相互受影响
  4. 网页打开时加载速度更快，因为CSS会被浏览器缓存

除了可以通过head位置的<style>标签编写CSS代码，以及通过<link>标签引入外部CSS文件外，还支持在HTML标签内使用style参数编写CSS代码，样式只对当前标签内容生效。

html 复制代码 
<body>
	<h1 style="color: #2346ff;">这是标题</h1>
</body>

CSS编写的三种方式： 内联样式 （HTML标签style属性内编写）、内部样式表 （HTML的head内的<style>标签内编写）、 外部样式表 （CSS写成单独的文件，通过<link>标签或者import方式引入）

三种方式都存在时，显示样式的优先级遵循CSS层叠规则，由多个因素共同决定：

  1. !important 声明：有声明时优先级最高
css 复制代码 
p { color: red !important; } /* 最高优先级 */
  1. 内联样式：没有声明时，有内联样式则展示内联样式，优先级高于内部和外部样式
  2. 内部样式和外部样式的优先级取决于它们在文档中出现的顺序 （遵循层叠规则）。在选择器权重相同的情况下，后定义的样式会覆盖先定义的样式。

基本选择器

CSS有三种基本的选择器：标签选择器、类选择器、id选择器。选择器用于给指定选择的对象设置样式。

标签选择器

CSS可以对某一类标签定义样式，CSS代码格式为：

CSS 复制代码 
标签名 {
	声明1;
	声明2;
}

标签选择器定义CSS样式，会对所有同类标签生效。

html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Title</title>  
<!--  在style标签内定义CSS样式，仅为方便学习  -->  
  <style>  
    /*  将h1标签的文本颜色设置为红色  */    h1{  
      color: red;  
    }  
    /*  将p标签的文本颜色设置为蓝色  */    p{  
      color: blue;  
    }  
  </style>  
</head>  
<body>  
  
  <h1>标题1</h1>  
  <h1>标题2</h1>  
  <p>段落1</p>  
  <p>段落2</p>  
  
</body>  
</html>

类选择器

类选择器可以对某一些标签定义成一个类，对这一类的所有标签的样式做设置，并且可以跨标签类型。

类选择器的使用，需要先在HTML标签中用class属性定义一个类名，然后在CSS中，使用符号.+类名的方式，设置CSS样式。格式如下：

CSS 复制代码 
.类名 {
	声明1;
	声明2;
}

类选择器可以跨标签类型，比如给某些<h1>标签和某些<p>标签元素都设置相同的CSS样式。

html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Title</title>  
  <!--  在style标签内定义CSS样式，仅为方便学习  -->  
  <style>  
    /*  将special类设置color和font-size（其他样式属性会继承原本标签）  */    .special {  
      color: red;  
      font-size: 30px;  
    }  
  </style>  
</head>  
<body>  
  
<!--定义一个类special-->  
<h1 class="special">标题1</h1>  
<h1 class="special">标题2</h1>  
<p class="special">段落1</p>  
<p>段落2</p>  
  
</body>  
</html>

ID选择器

ID选择器可以为指定的标签元素设置CSS样式。ID选择器设置CSS，需要先在HTML标签元素定义一个全局唯一的ID。然后在CSS内使用符号#+ID名的方式，进行CSS样式设置。格式为：

css 复制代码 
#ID名 {
	声明1;
	声明2;
}
html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Title</title>  
  <style>    /*  将id为special的标签设置color和font-size  */  
    #special {  
      color: red;  
      font-size: 30px;  
    }  
  </style>  
</head>  
<body>  
  
<h1>标题1</h1>  
<h1>标题2</h1>  
<p id="special">段落1</p>  
<p>段落2</p>  
  
</body>  
</html>

基本选择器的优先级

在CSS快速入门时，提到CSS样式的优先级是：内联样式>外部样式，外部样式遵循覆盖原则。

而基本选择器类型的优先级，是：ID选择器>类选择器>标签选择器。

比如：

html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>demo</title>  
  <style>    /* 将h1标签字体颜色设置为红色 */    h1 {  
      color: red;  
    }  
  
    /* 将Myclass类字体颜色设置为蓝色 */    .class {  
      color: blue;  
    }  
  
    /* 将id为Myid的元素颜色设置为绿色 */    #id {  
      color: green;  
    }  
  </style>  
</head>  
<body>  
  
  <h1 class="Myclass" id="Myid">标题1</h1>  <!-- 绿色 -->  
  <h1 class="Myclass">标题2</h1> <!-- 蓝色 -->  
  <h1>标题3</h1> <!-- 红色 -->  
  
</body>  
</html>

层次选择器

CSS支持层次选择器，用户选择HTML文档中特定关系的元素，具体来说，是通过HTML文档树的位置关系来应用样式。

常见的层次选择器有：后代选择器、子元素选择器、相邻兄弟选择器、通用兄弟选择器。

  1. 后代选择器（使用空格分隔），可以指定元素的所有后代，包括子元素、孙元素等，设置CSS样式。
html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Title</title>  
  <style>    /* 为ul标签的p标签后代都设置样式 */    ul p {  
      color: red;  
    }  
  
  </style>  
</head>  
<!--body标签内的文档树-->  
<!--  
  body-h1      -p1      -p2      -p3      -ul-li-p4         -li-p5-->  
<body>  
<h1>h1</h1>  
<p>p1</p>  
<p>p2</p>  
<p>p3</p>  
<ul>  
  <li>    <p>p4</p> <!-- 红色-->  
  </li>  
  <li>    <p>p5</p> <!-- 红色-->  
  </li>  
</ul>  
  
  
</body>  
</html>
  1. 子元素选择器（大于号>分隔）
    只选择指定元素的直接子元素（不包括孙元素及更深）。
    例如：div > p 选择所有作为div直接子元素的p元素。
  2. 相邻兄弟选择器（加号+分隔）
    选择紧接在另一元素后的元素，且二者有相同的父元素。
    例如：h1 + p 选择紧接在h1元素后的第一个p元素。
  3. 通用兄弟选择器（波浪号~分隔）
    选择指定元素后的所有兄弟元素，且二者有相同的父元素。
    例如：h1 ~ p 选择h1元素后面的所有兄弟p元素。

层次选择器的意义在于，可以精准控制定位在文档树中的特定元素，避免为元素添加过多的类和ID。并且样式与HTML结构关联，当结构发生变化时，样式可以自动调整，提高可维护性。

结构伪类选择器

当我们在使用层次选择器的时候，如果不用类和ID选择器，如果要求满足某些条件的元素被选择设置CSS样式，我们会遇到困难，比如要求在子类的第一个元素选择设置成红色，子类的最后一个元素设置成蓝色，用层次选择器-子元素选择器无法实现这样的需求。

使用伪类选择器，可以实现。如下：

html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Title</title>  
  <style>    /* 使用子类伪类选择器，选择第一个子类进行CSS设置 */    body > p:first-child {  
      color: red;  
    }  
  
    /* 使用子类伪类选择器，选择最后一个子类进行CSS设置 */    body > p:last-child {  
      color: blue;  
    }  
  </style>  
</head>  
<!--body标签内的文档树-->  
<!--  
  body-p1      -p2      -p3-->  
<!--要求：要求为p1设置红色、p3设置蓝色-->  
<body>  
  <p>p1</p> <!-- 红色-->  
  <p>p2</p>  
  <p>p3</p> <!-- 蓝色-->  
  
</body>  
</html>

这就是结构伪类选择器的作用，他可以在结构选择器的基础上，增加条件进行元素选择。语法为使用符号:+条件。常见的结构伪类选择器有：

  1. :first-child：选择属于其父元素的第一个子元素。
  2. :last-child：选择属于其父元素的最后一个子元素。
  3. :nth-child(n)：选择属于其父元素的第n个子元素。
    • n可以是数字、关键字（如even、odd）或公式（如2n、2n+1）。
  4. :nth-last-child(n)：选择属于其父元素的倒数第n个子元素。
  5. :first-of-type：选择属于其父元素的特定类型的第一个子元素。
  6. :last-of-type：选择属于其父元素的特定类型的最后一个子元素。
  7. :nth-of-type(n)：选择属于其父元素的特定类型的第n个子元素。
  8. :nth-last-of-type(n)：选择属于其父元素的特定类型的倒数第n个子元素。
  9. :only-child：选择属于其父元素的唯一子元素。
  10. :only-of-type：选择属于其父元素的特定类型的唯一子元素。

非结构（普通）伪类选择器

除了结构伪类选择器，CSS还有大量基于元素状态、用户交互、内容特性等其他条件的伪类选择器。

这些伪类选择器，可以增强用户体验，比如提供清晰的交互反馈（悬停、点击、焦点状态），用纯CSS实现复杂的交互逻辑（下拉菜单、标签页、手风琴等）。

用户交互状态伪类

  1. :hover - 鼠标悬停。当用户将鼠标悬停在元素上时触发。
  2. :active - 激活状态（鼠标按下时）。元素被激活（鼠标按下但未释放）时的状态。
  3. :focus - 获得焦点。元素获得焦点时（如表单字段被点击或通过Tab键选中）。
html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Title</title>  
  <style>    /* 鼠标悬停时触发 */    button:hover {  
      background-color: #007bff;  
      transform: translateY(-2px);  
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);  
    }  
  
    /* 鼠标按下时触发 */    button:active {  
      transform: translateY(1px);  
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);  
    }  
  
    /* 点击获得焦点时触发 */    input:focus {  
      outline: 2px solid #007bff;  
      border-color: #007bff;  
    }  
      
  </style>  
</head>  
<body>  
<form action="层次结构.html" method="post">  
  <input type="text" name="用户名" placeholder="请输入用户名">  
  <button type="button">点我</button>  
</form>  
  
</body>  
</html>

表单状态伪类

  1. :checked - 选中状态。用于单选按钮、复选框等被选中的状态。
  2. :disabled / :enabled - 禁用/启用状态。
  3. :required / :optional - 必填/可选。
  4. :valid / :invalid - 有效/无效输入。
  5. :in-range / :out-of-range - 范围检查。用于number、range等有范围的输入类型。
  6. :read-only / :read-write - 只读/可写。

属性选择器

CSS属性选择器可以根据HTML元素的属性及属性值来选择元素。属性选择器有以下类型：

  1. [属性名]：选择带有指定属性的元素，不关心属性值。
html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Title</title>  
  <style>    /*  选择所有有href属性的a标签  */  
    a[href] {  
      color: red;  
      font-size: 30px;  
    }  
  </style>  
</head>  
<body>  
  <a href="www.baidu.com">跳转百度</a>  
  <a href="www.taobao.com">跳转淘宝</a>  
</body>  
</html>
  1. [属性名=属性值]：选择带有指定属性，并且指定属性值的元素。
html 复制代码 
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Title</title>  
  <style>    /*  选择href属性值为www.baidu.com的a标签  */    a[href="www.baidu.com"] {  
      color: red;  
      font-size: 30px;  
    }  
  </style>  
</head>  
<body>  
  <a href="www.baidu.com">跳转百度</a>  
  <a href="www.taobao.com">跳转淘宝</a>  
</body>  
</html>

  1. [属性名~="value"] ：选择属性值中，包含"value"的元素（由空格分隔）。比如[title~="flower"]，title="flower rose"会被选择，但是title="flower-rose"不会。

  2. [属性名|="value"] ：选择属性值以指定值开头（后跟连字符或整个值）的元素。比如[lang|="en"]匹配 lang="en"、lang="en-US" 等。

  3. [属性名^="value"] ：选择属性值以指定值开头的元素。比如[href^="https"]匹配所有 href 以 "https" 开头的链接。

  4. [属性名$="value"] ：选择属性值以指定值开头的元素。比如[href$=".pdf"]匹配所有链接到 PDF 文件的元素（以 .pdf 结尾）。

  5. [属性名*="value"] ：选择属性值中包含指定子字符串的元素。比如[href*="example"]匹配 href 中包含 "example" 的所有链接。

需要注意：属性选择器可以组合使用，例如 a[href^="https"][target="_blank"] 选择同时满足两个条件的 <a> 元素。

相关推荐
啟明起鸣3 小时前
【Nginx 网关开发】上手 Nginx，简简单单启动一个静态 html 页面
运维·c语言·前端·nginx·html
vortex54 小时前
深度字典攻击（实操笔记·红笔思考）
前端·chrome·笔记
我是伪码农4 小时前
Vue 1.30
前端·javascript·vue.js
利刃大大4 小时前
【Vue】默认插槽 && 具名插槽 && 作用域插槽
前端·javascript·vue.js
修己xj4 小时前
一月存档，二月加载
学习
艳阳天_.4 小时前
web 分录科目实现辅助账
开发语言·前端·javascript
蒸蒸yyyyzwd4 小时前
c网络编程学习笔记
c语言·网络·学习
小白64024 小时前
2025年终总结-迷途漫漫，终有一归
前端·程序人生
驱动探索者4 小时前
linux hwspinlock 学习
linux·运维·学习
热门推荐
01GitHub 镜像站点02Clawdbot 中文汉化版 接入微信、飞书03OpenClaw部署与配置教程：在Mac mini上接入国产大模型与飞书04OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)052026美赛A题智能手机电池续航时间预测的连续时间数学模型06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08UV安装并设置国内源09Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services10在Trae中使用Pencil MCP