一, CSS 的三大特性?
1.1 继承: 子类能够继承父类的某些样式
1.2 优先级: 不同选择器定义的样式具有不同的优先级数量
1.3 层叠: 当优先级数量相同时, 后面定义的样式的覆盖前面定义的样式
二, CSS 有哪些选择器?
2.1 元素选择器: div,p,img,a 等
2.2 id 选择器:#id1,#id2
2.3 class 选择器:.class1,.class2
2.4 全局选择器:*
2.5 群组选择器: 拥有相同样式的元素分组显示, 用逗号隔开 div,p,a{color:#000;}
2.6 属性选择器:
a[attribute=value]: 属性值为 value 的属性
a[attribute~=value]: 属性值包含 value 的属性
a[attribute|=value]: 属性值以 value 开头的属性
a[attribute*=value]: 属性值包含 value 的属性
a[attribute^=value]: 属性值以 value 开头的属性
a[attribute$=value]: 属性值以 value 结尾的属性
2.7 后代选择器: 子元素和父元素之前用空格分开 div p
2.8 子元素选择器: 子元素和父元素用大于号隔开 div> p
后代选择器选择所有符合添加的子元素, 包括子元素的子元素; 然而子元素选择器只选择符合条件的直接后代.
2.9 相邻同胞选择器: 兄弟元素之间用加号隔开 h1+p
2.10 伪类选择器: a:link,a:visited,a:active,a:hover,input:focus
2.11 伪元素选择器:
div:after: 在 div 元素之后插入内容
div:before: 在 div 元素之前插入内容
p:first-letter: 为 p 元素的文本首字母添加样式
p:first-line: 为 p 元素的文本首行添加样式
三, 选择器权重
提问: 为什么不同的选择器为什么会有权重?
回答: 在开发当中, 我们经常会遇到设置的样式出来的情况, 其实我们之前可能已经为某个元素设定了一个样式, 但是该样式的优先级比较高, 那么规定好权重, 在开发时, 就可以根据权重来计算优先级大小, 从而避免各种样式覆盖的情况.
3.1 优先级分类
第一优先级: 无条件优先的属性只需要在属性后面使用! important.(它会覆盖页面内任何位置定义的元素样式)
第二优先级: 在 html 中给元素标签加 style, 即内联样式.(该方法会造成 css 难以管理, 所以不推荐使用)
第三优先级: 由一个或多个 id 选择器来定义.
第四优先级: 由一个或多个类选择器, 属性选择器, 伪类选择器定义.
第五优先级: 由一个或多个类型选择器定义.
第六优先级: 通配选择器.
1.!important> 内联样式 > id 选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
2. 然而大多数情况下, 我们常见的选择器都是组合在一起的, 于是了解具体选择器代表的权值可以方便我们在开发时进行简单的计算.
3.2 选择器权重的等级
第一等级: 代表内联样式, 如 style="", 权值为 1000
第二等级: 代表 id 选择器, 如 #id1, 权值为 100
第三等级: 代表 class, 伪类和属性选择器, 权值为 10
第四等级: 代表标签选择器和伪元素选择器, 权值为 1
通用选择器, 子元素选择器和相邻同胞选择器并不在这个等级中, 所以权重为 0
四, 选择器优先级的简单计算
- <nav>
- <ul id="nav">
- <li class="checked"><a href="#"> 您好 </a></li>
- <li><a href="#"></a></li>
- <li><a href="#"></a></li>
- <li><a href="#"></a></li>
- </ul>
- </nav>
那么计算下面的元素的优先级
nav ul#nav li.checked a:hover{color:#red;}
图片. png
来源: http://www.jianshu.com/p/77196a894cc6