CSS添加方法、选择器分类、选择器组合、样式优先级
css 添加方式
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中，甚至可以在 HTML 结构中设置样式表。
行级样式
当特殊的样式需要应用到个别元素时，就可以使用行级样式。使用行级样式的方法是在相关的标签中使用 style 属性。样式属性可以包含任何 css 属性，exp：
\<div style="color: red; font-size: 20px;">hello world\</div>
内联样式
当单个文件需要特别样式时，就可以使用内部样式表。可以在 head 部分通过 <style> 标签定义内部样式表，exp：
<head>
<style type="text/css">
body {
background-color: red
}
p {
font-size: 20px
}
</style>
</head>
外联样式
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，可以通过更改一个文件来改变整个站点的外观。使用外联样式是为了解决内容与表现分离的问题，外部样式表通常存储在 .css 文件中，exp：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
选择器分类
通配符选择器：
通配符选择器直接使用 “*”，会对所有标签产生效果，通常用于样式初始化，exp：
* {margin: 0; padding: 0;}
标签选择器：
标签选择器又称为 “元素选择器” 或 “类型选择器（type selector）”，标签选择器直接以标签名作为选择器名称，通常用于样式初始化，exp：
body {background-color: pink}
id 选择器：
id 选择器以一个井号显示，id 属性只能在每个 HTML 文档中出现一次，具备唯一性，exp：
#about {text-align: center}
类选择器：
类选择器以一个点号显示，类名的第一个字符不能使用数字，在实际项目中使用场景是最多的，exp：
.center {text-align: center}
在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：
<p class="important warning">注意事项</p>
这两个词的顺序无关紧要，写成 warning important 也可以。
css选择器组合语法
条件关系
选择器可以结合起来使用，已达到条件的筛选限制，exp：
p.important {
color:red;
}
选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important 的所有 p 元素”。
并列关系
并列关系可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用 “逗号” 将需要分组的选择器分开，在实际项目中会大量使用，exp：
h1,h2,h3,h4,h5,h6 {
color: green;
}
派生关系
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。派生语法使用 “空格” 分隔选择器，通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁，在实际项目中会大量使用，exp：
li p{ background-color: #ddd; } /*该样式仅针对 <li> 后的 <p>*/
子集关系
如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，可以使用子元素选择器，其语法为使用 “>” 分隔选择器，exp：
h1 > strong {color:red;}
，这个规则仅针对 h1 的子级 strong 元素，其子级的子级 strong 元素不受影响。
“>” 分隔符两边可以有空白符，这是可选的。因此，以下写法都没有问题：
h1 > strong
h1> strong
h1 >strong
h1>strong
相邻关系
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）其语法为使用 “+” 或 “~” 分隔选择器，语法规范同子级关系选择器一致，exp：
h1 + p { margin-top:50px; } /*这个规则仅针对 h1 相邻靠后的一个 p 元素。*/
h1 ~ p { margin-top:50px; }/* 这个规则针对 h1 相邻靠后的全部 p 元素。*/
css层叠次序（样式优先级）
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省默认设置
- 外部样式表
- 内部样式表（位于 标签内部）
- 行级样式（在 HTML 元素内部）
然而实际使用时会遵守 “就近原则”，即离 html 元素近的样式设置优先级会更高，因此，外部样式表样式设置优先级有可能高于内部样式表，exp：
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
color: red;
}
</style>
<link href="a.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div>hello world</div> <!-- 呈现蓝色blue -->
</body>
此外选择器的使用也存在优先级问题，该权重高于 “就近原则”，通常而言 “id选择器” 优先级最高，其次分别依次是 “类选择器” “标签选择器”。对于相同选择器设置同一样式还会受到选择器层级细分度影响，在同等细分度情况下则遵循 "就近原则"
最后 ！important 关键字可以设置最高样式优先级，不受前面所提的规则限制，当然如果存在同一样式的多个 important 设置，还是遵循 “就近原则” 的。
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
