作用
通过设置 id 值来选取元素。语法实例
#idName{ margin:0px; } 类选择器作用
通过设置类名来选取元素。语法实例
.className{ margin:0px; } 标签选择器作用
通过选取标签名来选取元素。语法实例
div{ margin:0px; } 类选择器作用
通过设置类名来选取元素。语法实例
.className{ margin:0px; } 相邻选择器作用
紧跟着 A 元素后面的 B 元素（同级）语法实例
div+ul{margin:0px;} <div> <p>这是第二级元素</p> </div> <ul> <li>这也是第二级元素</li> </ul> 子代选择器作用
紧跟着 A 元素后面的直接子代 B 元素语法实例
div > p{margin:0px;} <div> <p>这是第二级元素</p> </div> <ul> <li>这也是第二级元素</li> </ul> 后代选择器作用
紧跟着 A 元素后面的子代 B 元素（可以是孙子，，重孙子这样的元素）语法实例
div a{margin:0px;} <div> <p> <a>第三级元素</a> </p> </div> <ul> <li>这也是第二级元素</li> </ul> 通配符选择器作用
选择所有的元素语法实例
*{margin:0px;} 属性选择器作用
通过属性来选择语法实例
E[attr]:选择元素 E 中含有 attr 属性的所有元素。 div[title]{...} //选择 div 元素中含有 title 的元素 div[title][href] //选择 div 元素中含有 title 和 href 的元素 E[attr = val]：选择元素 E 中的 attr 属性等于某个值的所有元素。 //选择 div 元素中含有 title 为 www.baidu.com 的元素 div[href = "www.baidu.com"]{...} E[attr ~= val]：选择元素 E 中的 attr 属性包含某个值的所有元素。 //选择 div 元素中含有 title 为 www.baidu.com 的元素 div[class ~= "hh"]{...} //这个元素就会被选取 <div class = "hh ww"></div> 伪类选择器所有的伪类
常见的语法实例
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */伪类选择器搭配可以其他选择器
a.content:link {color: #FF0000} /* 选择 a 和 它的 类为 content 的元素 */ 选择器优先级问题参考
《层叠和继承》-MDN
《CSS选择器优先级总结》
《如何和何时使用CSS的!important》
实例
div{margin:0px !important;} div{margin:10px;} //理论上 div 的 margin 应该会被设置成为 10px，因为后面的样式会覆盖 //前面的样式，但是实际上 margin 为 0px ，因为 ！important 增加了 //第一个的权重实际开发中，强烈不建议使用 ！important 来操作。
相互冲突的声明将按以下顺序适用，后一种将覆盖先前的声明：在用户代理样式表的声明 (例如：浏览器在没有其他声明的默认样式).用户样式表中的普通声明（由用户设置的自定义样式）。作者样式表中的普通声明（这是我们设置的样式，Web开发人员）。作者样式表中的重要声明用户样式表中的重要声明（摘自 MDN） 专用性 1. 千位：如果声明是在style 属性中该列加1分。 2. 百位：在整个选择器中每包含一个ID选择器就在该列中加1分。 3. 十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列 中加1分。 4. 个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。注意: 通用选择器 (*), 复合选择器 (+, >, ~, ’ ‘) 和否定伪类 (:not) 在专用性中无影响。
总结排序：!important > 行内样式（style）>ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性
代码顺序 如果重要性和专用性一样的话，就通过代码的顺序决定那个样式被采用。