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> 元素。

相关推荐
徐小夕5 小时前
我用 AI 撸了个开源"万能预览器"：浏览器直接打开 Office、CAD 和 3D 模型
前端·vue.js·github
小码哥_常5 小时前
Flutter Android 延迟加载代码指南：提升应用性能的关键
前端
yangyanping201086 小时前
Go语言学习之对象关系映射GORM
jvm·学习·golang
这是个栗子6 小时前
TypeScript（三）
前端·javascript·typescript·react
网络工程小王6 小时前
【Transformer架构详解】（学习笔记）
笔记·学习
kvo7f2JTy6 小时前
基于机器学习算法的web入侵检测系统设计与实现
前端·算法·机器学习
北风toto6 小时前
前端CSS样式详细笔记
前端·css·笔记
nanfeiyan6 小时前
git commit
前端
倒酒小生8 小时前
今日算法学习小结
学习
醇氧8 小时前
【学习】【说人话版】子网划分
学习
热门推荐
01GitHub 镜像站点02OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程03Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南05VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）06Claude Code 未登录 使用第三方模型07Oh My Codex 快速使用指南08UV安装并设置国内源09最新更新版本，OpenClaw v2026.4.2 深度解读剖析：Task Flow 重磅回归与安全架构的全面硬化10【技术干货】Gemma 4 上手深度指南：本地多模态大模型的新基线