本文深入讲解CSS（层叠样式表）的基本概念、特征、优先级、权重计算及使用方式。探讨了继承性、层叠性、选择器的类型，如元素、ID、类选择器，以及复合选择器的应用。
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 个特殊状态：
a:link：没有被访问过的超链接。a:visited：已经被访问过的超链接。a:hover：鼠标正悬停的超链接。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>
- 交集选择器：不同选择器紧紧相连。
扫一扫
1120
到【灌水乐园】发言
