CSS样式表详解-优快云博客

本文深入讲解CSS（层叠样式表）的基本概念、特征、优先级、权重计算及使用方式。探讨了继承性、层叠性、选择器的类型，如元素、ID、类选择器，以及复合选择器的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS（cascading style sheet）：样式表，又叫层叠样式表、级联样式表。是用来美化网页的语言，用来给 HTML 标签添加样式，实现了将结构与样式的分离。

不同浏览器对于小数的处理是不一样的，有的会四舍五入，有的会向下取整，因此设置样式最好不要使用小数。

特征:

继承性：大多数 CSS 的样式规则可以被继承。只需要给祖先标签设置属性，即可在后代所有标签中生效。

color、font- 开头的、text- 开头的、line- 开头的、list- 开头的都具有继承性。
层叠性：可以定义多个样式表，不冲突时，多个样式表中的样式可以层叠为一个。
优先级：样式定义冲突时，按照不同样式的优先级来应用样式。

在继承的情况下，选择器权重计算失效，而是要遵循就近原则。

<div id="box1" class="box1">
	<div id="box2" class="box2">
		<div id="box3" class="box3">
			<p>我是文字</p>
		</div>
	</idv>
</div>

// 继承的选择器的权重没有直接选中的大
#box1 #box2 #box3 {
	color: red;
}
p {
	color: green;  // 直接选中了 p 标签，这条样式生效
}

// 都没有选中的情况下，遵循就近原则，谁描述的近谁生效
#box1 #box2 {
	color: red;
}
.box1 .box3 {
	color: green;  // 描述到了 box3，这条样式生效
}

// 都没有选中且描述的一样近的情况下，再去比较选择器的权重
#box1 #box2 # box3 {
	color: red; // 权重更大，这条样式生效
}
.box1 .box2 .box3 {
	color: green;  
}

权重：

CSS 权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式。

!important，权重值为 10000。

!important 写在属性值的后面，使用 !important 可以改变优先级别为最高。这种方式需要谨慎使用。
内联样式，如：style=””，权重值为1000。
ID选择器，如：#content，权重值为100。
类，伪类和属性选择器，如： .content、:hover、 [type] 权重值为10。
标签选择器和伪元素选择器，如：div、::before 权重值为1。
通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为 0。

<style type="text/css">
	//权重的计算： 100+1+10+1，结果为112
    #content div.main_content h2{
        color:red;    
    }
    // 权重的计算： 100+10+1，结果为111
    #content .main_content h2{
        color:blue;
    }
</style>

// 最终颜色为 red
<div id="content">
    <div class="main_content">
        <h2>这是一个h2标题</h2>
    </div>
</div>

使用方式:

内联方式：样式直接定义在 HTML 标签的 style 属性里，属性和属性值之间用 : 连接，属性与属性之间用 ; 连接。

不推荐使用这种方式。内联方式牺牲了样式表的批量设置样式的能力，只能给一个标签设置样式。
```
<h1 style=”background-color:red; color:white;”>你好</h1>
```
内部样式表：在文档的 <head></head> 标签中添加 <style></style> 标签，在<style></style> 标签中紧跟样式规则。可以定义多个样式规则。

每个样式规则由选择器和样式声明组成。
选择器：决定哪些元素使用这些规则。
样式声明：一对大括号，包含一个或多个 属性: 属性值;
```
<head>
     <style>
          h1 {
          	background-color:red; 
          	color:white;
          }
    </style>
</head>
```
外部样式表：将样式规则定义在一个以 .css 结尾的外部文件中，在需要使用该样式表文件的页面中，在 <head></head> 标签内添加 <link> 标签来链接外部样式表文件。
```
<head>
    <link rel=”stylesheet” href=”css/index.css”>
</head>
```
导入方式：将样式规则定义在一个以 .css 结尾的外部文件中，在需要使用该样式表文件的页面中，在<head></head> 标签内添加 <style></style> 标签，在 <style></style> 标签内使用 @import url(样式表文件) 来导入。

不推荐使用这种方式。因为页面不会等待导入式引入的样式表加载完毕，就会立即渲染 HTML 结构，会导致页面有几秒钟没有样式的情况。
```
<head>
     <style>
          @import url(css/index.css);
    </style>
</head>
```

注释：

CSS 注释的方式是：/*注释的文字*/。

选择器：

通配符选择器：*，表示选择页面中的所有元素。
元素选择器：直接使用元素的标签作为选择器，将选择页面上所有的该种标签，无论它所处的位置的深浅。
```
<h1>我是文章的标题</h1>

h1{
	color:red;
}
```
id 选择器：使用 # 前缀来选择指定 id 的标签。格式为 #idName{ }。

id 的名称只能由大小写字母、数字、下划线、短横线构成，且不能以数字开头。一个标签只能有一个 id 属性。一个页面中的 id 名称必须唯一。
```
<p id="para1">我是一个段落</p>

#para1{
	color:red;
}
```
类选择器（class 选择器）：使用 . 前缀来选择指定 class 的标签。格式为 .className{ }。

class 的名称只能由大小写字母、数字、下划线、短横线构成，且不能以数字开头。同一个标签可以同时有多个类名，类名用空格隔开。多个标签也可以有相同的类名。
```
<p class=”spec”>我是一个段落</p>
<div class=”spec>我是又一个段落</div>

.spec{
	color: pink;
}
```
```
<p class="spec warning">我是一个段落</p>
```
原子类：在做网页项目之前，可以将所有常用的字号、文字颜色、行号、外边距、内边距等都设置为单独的类。
```
// 字号
.fs12 {
	font-size: 12px;
}
.fs14 {
	font-size: 14px;
}

// 文字颜色
.color-red {
	color: red;
}
.color-blue{
	color: blue;
}
```
. 伪类选择器：是添加到选择器上的描述性词语，指定要选择的元素的特殊状态。使用冒号作为结合符，左边是选择器，右边是伪类。常用伪类有：:link、:visited、:hover、:active、:focus 等。
```
a:hover{
	color:red;
}
```
超链接有 4 个特殊状态：
1. a:link：没有被访问过的超链接。
2. a:visited：已经被访问过的超链接。
3. a:hover：鼠标正悬停的超链接。
4. a:active：正被激活的超链接（鼠标按下按键但还没有松开）。
a 标签的伪类要按照 :link、:visited、:hover、:active 这样的前后顺序书写，否则会有伪类不生效。

复合选择器：是由两个或多个基本选择器，通过不同的方式组合而成。包括以下几种类型：

交集选择器：不同选择器紧紧相连。

<li class="spec">我会变成红色</li>
<li>我不会改变颜色</li>

// 选择既是 li 标签，也属于 spec 类的标签
li.spec {
	color: red;
}

并集选择器（分组选择器）：使用逗号表示分组。

ul, ol {
	color: red;
}

// 同时选择 ul 标签和 ol 标签
<ul><li>我会变成红色</li></ul>
<ol><li>我会变成红色</li></ol>

《一》CSS

特征:

权重：

使用方式:

注释：

选择器：