css样式详解及覆盖顺序
文章目录
- 1. 覆盖顺序
- 2. 样式类别
- 2.1. 浏览器缺省值
- 2.2. 内联样式
- 2.3. 内部样式表
- 2.4. 外部样式表
- 3. 选择器
- 3.1. 基本选择器
- 3.1.1. 元素选择器
- 3.1.2. 属性选择器
- 3.1.2.1. 选择包含某种属性的元素。
- 3.1.2.2. 根据具体属性值选择
- 3.1.2.3. 类和id属性
- 3.1.3. 类选择器（.class）
- 3.1.4. id选择器（#id）
- 3.2. 选择器分组
- 3.3. 后代选择器
- 3.3.1. 派生选择器
- 3.3.1.1. 类派生选择器（.class h1）
- 3.3.1.2. id派生选择器（#id h1）
- 3.4. 子元素选择器
- 3.5. 相邻兄弟选择器
- 3.6. 伪类选择器
- 3.6.1. 锚伪类
- 3.6.2. :first-child 伪类
- 3.6.3. :lang伪类
- 3.7. 伪元素
- 3.7.1. :before 伪元素
- 3.7.2. :after
- 3.7.3. :first-letter
- 3.7.4. :first-line
参考：
W3School-CSS 选择器
css样式的加载顺序及覆盖顺序
1. 覆盖顺序
根据权重值，加载如下：浏览器缺省值<外部样式<内部样式<内联样式。权重小的被权重大的覆盖。
但是，需要考虑一种情况，如在外部样式表中在id选择器和类选择器中都定义了元素的颜色，那应该怎么办？或者在一个元素的多个class中均设置了不同的元素颜色，要按照哪个显示？这也需要指定覆盖顺序。
下边是权重值：
类选择器(.class) < 类派生选择器(.class h1) < ID选择器(#id) < ID派生选择器(#id h1)
所以完整的层叠优先级是:
浏览器缺省 < 外部样式表(css文件) < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表(标签定义的样式。
<style>
h1{
background:red;
}
style>
2.4. 外部样式表
单独的css文件，由标签使用href引入。
<link rel="stylesheet" href="/lib/share/css/share.min.css">
3. 选择器
在内部样式表和外部样式表中，还有不同的选择器。需要注意的是，这些选择器都不是独立的，你可以任意的选择起来组合，这正是css选择器的强大之处，也是弥补style属性的不足之处。
3.1. 基本选择器
这个基本选择器并不是CSS中定义的，而是相对于后代选择器，我自己分类的，它们都是单一的、不影响子节点的选择器。
3.1.1. 元素选择器
文档的元素就是最基本的选择器。下边的规则匹配所有的h1元素
h1{
background:red;
}
3.1.2. 属性选择器
3.1.2.1. 选择包含某种属性的元素。
/*选择所有带有title属性的元素*/
*[title] {
color:red;
}
/*选择所有带有href的a标签*/
a[href]{
color: #0e2231;
}
3.1.2.2. 根据具体属性值选择
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
3.1.2.3. 类和id属性
特殊的，如果要选择id为特定值或者class为特定值的元素，可以简写如下(注意元素和点或者#之间没有空格，如果有空格，就变成后代选择器了)：
/*选择class为test的div*/
div.test{
color: #000;
}
/*选择id为test的div*/
div#test{
color: #000;
}
3.1.3. 类选择器（.class）
以点开头，在html元素中使用class属性引入。这是css最常用的方式。因为一般来说id选择器为javascript服务的可能性更大且在上下文必须保持唯一，所以css尽量不使用id选择器，避免和javascript产生不必要的交叉冲突。
/*选择所有class属性中包含test的元素*/
.test{
background:red;
}
<div class="test">123div>
<p class="test">123div>
3.1.4. id选择器（#id）
以井号#开头，在html元素中使用id属性引入。因为id属性为javascript服务的可能性更大且在上下文必须保持唯一，所以css尽量不使用id选择器，避免和javascript产生不必要的交叉冲突。
/*选择所有class属性中包含test的元素*/
#test{
background:red;
}
<div id="test">123div>
<p class="test">123div>
3.2. 选择器分组
假如现在有一个需求，让所有的h元素背景为红色。那么实现方式如下：
/*第一种*/
h1{
background:red;
}
h2{
background:red;
}
h3{
background:red;
}
/*第二种*/
h1,h2,h3{
background: red;
}
显然第二种写法更符合我们的习惯。这种在选择器之间用逗号隔开的写法就是选择器分组。
3.3. 后代选择器
在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。
有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
3.3.1. 派生选择器
感觉派生选择器就是后代选择器。只是目前我还不知道类派生和id派生的优先级是否有差别。所以暂时先这样写。
3.3.1.1. 类派生选择器（.class h1）
以class选择器开始，后边跟上其它元素选择器、id选择器或者类选择器，中间用空格隔开。这样的写法就是类派生选择器
/*选择class属性为test元素下的h1元素。.test下的其它元素不受影响*/
.test h1{
background:red;
}
<div class="test">123<h1>456h1>div>
<p class="test">123div>
3.3.1.2. id派生选择器（#id h1）
类似于类选择器。以id选择器开始，后边跟上其它元素选择器、id选择器或者类选择器，中间用空格隔开。这样的写法就是id派生选择器
/*选择id属性为test元素下的h1元素。.id下的其它元素不受影响*/
#test h1{
background:red;
}
<div #="test">123<h1>456h1>div>
<p class="test">123div>
3.4. 子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。可以说子元素是一种特殊的后代选择器
子结合符两边可以有空白符，这是可选的。
如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
3.5. 相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。
注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符
如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
3.6. 伪类选择器
比如说a标签，它有很多种状态：未点击、已点击、鼠标移入、正在活动…，这就需要使用伪类选择器。
伪类选择器使用半角冒号作为结合符
3.6.1. 锚伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
3.6.2. :first-child 伪类
使用 :first-child 伪类来选择元素的第一个子元素。它的使用一定是结合了父元素的，即父元素下的第一个子元素，如果没有指定父元素，则对于全部节点有效
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。
3.6.3. :lang伪类
:lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
style>
head>
<body>
<p>文字<q lang="no">段落中的引用的文字q>文字p>
body>html>
3.7. 伪元素
伪元素也是比较重要的。随处可见:after和:before的使用
3.7.1. :before 伪元素
“:before” 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个
元素前面插入一幅图片：
h1:before
{
content:url(logo.gif);
}
3.7.2. :after
“:after” 伪元素可以在元素的内容后面插入新内容。
下面的例子在每个
元素后面插入一幅图片：
h1:after
{
content:url(logo.gif);
}
3.7.3. :first-letter
向文本的第一个字母添加特殊样式。
3.7.4. :first-line
向文本的首行添加特殊样式。