CSS选择器介绍

学习&实践爱好者

已于 2024-05-24 08:32:47 修改

阅读量612

点赞数 2

分类专栏： HTML5与CSS3 前端开发文章标签： css 前端

于 2022-07-26 21:15:00 首次发布

本文链接：https://blog.csdn.net/cnds123/article/details/125926256

版权

HTML5与CSS3 同时被 2 个专栏收录

78 篇文章 14 订阅

订阅专栏

前端开发

64 篇文章 4 订阅

订阅专栏

CSS选择器介绍

CSS（Cascading Style Sheets 层叠样式表）。CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。层叠指多个样式可以作用在同一个html的元素上，同时生效。

CSS快速入门 https://blog.csdn.net/cnds123/article/details/112976663

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

要对HTML页面中的元素实现一对一，一对多或者多对一的控制，可用CSS 规则集（rule-set）实现，CSS 规则集也称为css样式定义，CSS 规则集由选择器和声明块组成，形式如下：

选择器（selector）指向您需要设置样式的 HTML 元素。

声明块（declaration block）指明了样式，包含一条或多条用分号分隔的声明，用花括号括起来。每条声明都包含一个 CSS 属性（property）名称和一个值（value），以冒号分隔。

换句话说，声明块指明了样式，选择器指明了 “样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

CSS 的选择器分为两大类：基本选择题和扩展选择器。

基本选择器

标签（标记）选择器（也称为元素选择符）：针对一类标签（标记）

ID 选择器：针对某一个特定的标签使用

类选择器：针对你想要的所有标签使用

通用选择器（通配符）：针对所有的标签都适用（不建议使用）

标签选择器

是指用HTML标签名称作为选择器，基本语法格式如下：

标签名{属性1:属性值1;属性2:属性值2;……}

HTML所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input、div 等。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述 “共性”，无法描述某一个元素的 “个性”。

如：

p {
font-size:14px;
color: red;
}

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器示例</title>
<style>
p{
    font-size:14px;
    color: red;
}
</style>
</head>
<body>
<p>Hello！</p>
<p>你好！</p>
</body>
</html>

用浏览器打开运行效果：

id选择器

id选择器使用“#”开头后面紧跟id名，其基本语法格式如下:

#id名{属性1:属性值1;属性2:属性值2;……}

大多数 HTML 标签都可以有 id 属性，使用id="id名"引用，注意ID名字大小写严格区分且不能和标签同名，且id 名称不能以数字开头。

如：

#myp{
font-size:14px;
color: red;
}

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ID 选择器示例</title>
<style>
#myp{
    font-size:14px;
    color: red;
}
</style>
</head>
<body>
<p id="myp">Hello！</p>
<p id="myp">你好！</p>
</body>
</html>

用浏览器打开运行效果：

类选择器

选择器使用“.”(英文点号)进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1;属性2:属性值2;……}

大多数HML标记都可以定义class属性。类选择器最大的优势是可以为标记对象定义单独或相同的样式。注意，类名不能以数字开头！id选择器和类选择器使用上相近，但同一个标签可以使用多个类选择器，用空格隔开。

如：

.myclass{
font-size:14px;
color: red;
}

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器示例</title>
<style>
.myclass{
    font-size:14px;
    color: red;
}
</style>
</head>
<body>
<p class="myclass">Hello！</p>
<p class="myclass">你好！</p>
</body>
</html>

用浏览器打开运行效果：

同一个标签可以使用多个类选择器，用空格隔开，例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器示例</title>
<style>
.myclass{
    font-size:14px;
    color: red;
}
.myclass2{
     width:100px;
     border:solid 5px red;
  }

</style>
</head>
<body>
<p class="myclass myclass2" >Hello！</p>
<p class="myclass">你好！</p>
</body>
</html>

用浏览器打开运行效果：

通用选择器（通配符*选择器）

通配符选择器用“*”号表示，能匹配页面中任何标签。其基本语法格式如下：

*{属性1:属性值1;属性2:属性值2;……}

将匹配任何标签——不需要进行引用，就可以起到通配的效果——对所有的HTML标生效，不好控制，实际网页开发中很少使用。

*{
font-size:14px;
color: red;
}

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通配符选择器</title>
<style>
*{
    font-size:14px;
    color: red;
}
</style>
</head>
<body>
<p>Hello！</p>
<p>你好！</p>
</body>
</html>

用浏览器打开运行效果：

扩展选择器（高级选择器）

后代选择器：用空格隔开

等等

后代选择器

用来选择某标记的后代标记，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。用后代选择符的前提是这个元素是某个元素的后代元素。如：

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器示例</title>
<style>
.div1 p{
    font-size:24px;
    color: red;
}
</style>
</head>
<body>
<div class="div1">
<p>Hello！</p>
</div>
<p>你好！</p>
</body>
</html>

用浏览器打开运行效果：

注意：后代选择器，只要保持一个后代的关联即可，写法可以灵活运用。如：

和

效果相同

使用前者完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器示例</title>
<style>
 p b i{
    font-size:24px;
    color: red;
}
</style>
</head>
<body>
<p>在不懂社会<b>的年纪<i>你</i>就得</b>走向社会！</p>
</body>
</html>

用浏览器打开运行效果：

使用后者完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器示例3</title>
<style>
 p b .iA{
    font-size:24px;
    color: red;
}
</style>
</head>
<body>
<p>在不懂社会<b>的年纪<i class="iA">你</i>就得</b>走向社会！</p>
</body>
</html>

使用后者完整示例代码如下：

CSS选择器的优先级

CSS选择器的优先级，是指当有多个选择器针对同一元素时，浏览器应用哪个选择器的样式。CSS 选择器的优先级是根据选择器的类型和特异性来决定的，这个优先级规则决定了当多个样式应用到同一个元素上时，哪些样式会生效。浏览器会在幕后自动完成specificity（特异性、特指度）值的计算和比较。

要用好CSS选择器优先级，程序员需要理解并应用以下原则：

知道CSS选择器优先级的计算规则:!important > 内联样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器 > 继承的样式。掌握这个规则是前提。

避免使用!important：!important虽然是最高优先级，但它破坏了优先级的自然规则，应该尽量避免使用它，除非是覆盖第三方不可改变的样式。

层叠规则：如果两个选择器的优先级相同，后面定义的样式会覆盖前面的样式。

使用合理的命名和结构：为组织内部或大型项目制定统一的CSS命名规范,使用合理的命名空间(NameSpace)前缀,防止全局污染。

利用开发者工具调试：使用浏览器的开发者工具（如Chrome DevTools）查看和调试选择器的优先级和应用情况。

简单示例

假设你有以下HTML和CSS：

Html文件

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div id="header" class="main-header">
    <h1>Welcome to My Site</h1>
  </div>
</body>
</html>

CSS文件：

/* styles.css */
h1 {
  color: blue; /* 权重: 1 */
}

.main-header h1 {
  color: green; /* 权重: 11 */
}

#header h1 {
  color: red; /* 权重: 101 */
}

h1 {
  color: orange !important; /* 强制覆盖 */
}

在这种情况下，h1 元素的最终颜色将是 orange，因为 !important 覆盖了所有其他样式。

测试时，将这两个文件放在同一文件夹中。

CSS 特异性 | CSS 教程

附录

CSS 选择器 - 学习 Web 开发 | MDN

CSS 选择器

学习&实践爱好者

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS选择器介绍

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。要对HTML页面中的元素实现一对一，一对多或者多对一的控制，可用CSS 规则集（rule-set）实现，CSS 规则集也称为css样式定义
复制链接

扫一扫