一、常见的选择器
1. 类型选择器和后代选择器，类型选择器：允许以一种独立于文档元素的方式来指定样式，该选择器可以单独使用，也可以与其他元素结合使用；后代选择器：以其它两个选择器之间的空格表示，后代选择器是所有的后代，下面例子中将div后面的2个p元素都调整边距
类型选择（又叫元素选择）：p {color: black;} h1 {font-weight: bold;}
<html><body><h1>This is test</h1> <p>this is paragraph</p></body></html>
后代选择（又叫包含选择）：div p {padding-left: 2em;}
<div><p>test paragraph1</p><p>test paragraph2</p></div>
PS：如上2种适合应用范围广的一般性样式；
2. ID选择器和类选择器，指定ID（以#开始）或者类名（class）【以.开始】的元素
ID选择：#paragraph1 {font-weight: bold;}
类选择：.context {color: #ccc;}
<p id="paragraph1">this is test</p> <p classnaub="context">testtest</p>
ps:配合使用：#maincontent h1 {font-size: 1.8em;}
#seccontent h1 {font-size:1.2em;}
<div id="maincontext"><h1>......</h1></div><div id="seccontent"><h1>......</h1></div>
3. 通用选择器，适用所有元素，由于渲染速度、以及实际需求问题很少使用，采用通配符方式
* {color:red;}
4. 子选择器和相邻同胞选择器
子选择器：#nav>li {} 只针对直接后代应用样式，ul id="nav"里面的 ul<li>不应用样式
<ul id="nav">
<li></li>
<li><ul><li></li><li></li></ul></li>
<li></li>
</ul>
相邻同胞：h1 + p {};只针对第一个p元素应用样式；
<h1> </h1> <p></p><p></p>
5. 属性选择器，根据某个属性或者属性值选择某个（类）元素
p[title] {} p[title="help"] {} [title="new"] {}
<p title="help"></p><p></p><p title="new"></p>
扩展：
p[title="help"]:hover {}
6. 伪类
:link,:visited为链接伪类，只能应用于锚元素<a></a>;:hover,:active,:focus为动态伪类，可以应用于任何元素
二、层叠样式与特殊性以及继承
层叠
层叠样式优先级由高到低分别为1. 网站开发者编写的样式 2.用户通过浏览器自定义的样式（可自写CSS文件关联到浏览器）3. 浏览器默认的样式（根据浏览器不同而不同）；
用户可通过!important提升优先级，从而得到1. !important用户样式 2.!important 作者样式 3上述三层样式
特殊性（对于调整样式、解决Bug、提升优先级有重要的意义并提供依据）
给每个选择器分配一个数字值，然后，将规则的每个选择器的值加在一起，计算出规则的特殊性；特殊性是对同一个层次（如上提到的层叠顺序）样式的优先级定义，总体规则是选择越细样式的优先级越高，如果级别相同则后定义的优先级高，如下一个简化的特殊性规则计算（在选择器少于10个的情况下）截图：
<<高级Web标准解决方案>>
继承
应用元素样式的后代会继承样式的某些属性，如颜色与字号等；
PS：有些情况样式感觉没有被继承，是因为浏览器的默认样式覆盖了继承的样式；这里误解是层叠优先级种浏览器样式没有自定义的高为什么会覆盖，原因是继承的样式的特殊性为空；
三、样式定义的原则
1. 命名在样式定义时class的名称按照内容定义时一个比较好的方法，后续修改也方便，比如 class=“news”，class=“head”;
2. 样式的分割注释很有意义，方便在大量的样式种寻找到定义、模块划分；同时方便后续问题排查
3. 页面样式文件过大，可进行压缩（浏览器下载样式、js的并行数量有限制，如果过多则会发生串行从而引发客户满意度问题）
4. 样式文档结构
一般性样式：主体样式、reset样式、链接、标题、其它元素
辅助样式：表单、通知和错误、一致的条目
页面结构：标题、页脚和导航、布局、其它页面结构
页面组件：各个页面
四、样式的引入方式
常用方式：<link href="/css/XXX" rel="stylesheet" type="text/css" />
倒入样式：<style>!import url(/css/XXX.css)</style> 效率低
网友评论