【武汉第88期】CSS有哪些选择器，优先级如何计算

1.背景介绍

选择器(selector)是一种模式，用于选择需要添加样式的元素。

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器

2.知识剖析

2.1常用的选择器：类型选择器和后代选择器。

适用于应用那些使用范围广的一般性样式

类型选择器：是用来寻找特定类型的元素，譬如段落或者标题元素。

类型选择器也称之为 元素选择器 或 简单选择器等等

后代选择：可用来寻找特定元素或元素组的后代。

作用在子代和子代所包含的与其相同标签的所有元素，比如子代是div，那么子代所包含的所有div标签都会被作用到。

2.2特定元素选择器 ：ID选择器以及类选择器

ID选择器由一个#字符表示

类选择器由一个.点号表示

2.3 伪类选择器:

:active 向被激活的元素添加样式。

:focus 向拥有键盘输入焦点的元素添加样式。

:hover 当鼠标悬浮在元素上方时，向元素添加样式。

:link 向未被访问的链接添加样式。

:visited 向已被访问的链接添加样式。

:checked 选择器匹配每个已被选中的 input 元素。

:first-child 向元素的第一个子元素添加样式。

2.4 通用选择器 *

通用选择器可能是所有选择器中最强大却最少使用的，通用选择器的作用就像是通配符，它可以匹配所有可用的元素。

起作用主要在实际中的使用是删除每个元素上默认的浏览器内外边距。

通过*号来表示

 2.5高级选择器 

子选择器  >

子选择器只作用第一代子元素,它表示“父>子”的直属关系。

即只会作用到子代，子代所包含的所有标签都不会作用到。

相邻兄弟选择器

相邻同胞选择器可用于定位同一个父元素下某个元素之后相邻的元素</p>

属性选择器           

如：

[href] {color: #ccc;]

3.常见问题

问题: 选择器使用的优先级是怎么进行计算的？

4.解决方案

    不同级别：

                    1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

                    2.作为style属性写在元素内的样式

                    3.id选择器

                    3.类选择器

                    5.标签选择器

                    6.通配符选择器

                    7.浏览器自定义或继承

     同一级别：

                    同一级别中后写的会覆盖先写的样式

但是有时候有些规则是多个级别的组合：

                选择器的特殊性分为4个等级:

                内联样式表的权值为 1000

                ID 选择器的权值为 100

                Class 类选择器的权值为 10

                HTML 标签选择器的权值为 1

                我们可以把选择器中规则对应做加法，比较权值

5.编码实战

     请见demo

6.扩展思考

           问题一:子选择器和后代选择器的区别？

                子元素选择器作用于“儿子”， 后代选择器作用于“子子孙孙

           问题二：什么时候需要使用子选择器？

               父元素下一级的某种元素具有一些公共的样式 

          问题三：伪类和伪元素的区别? 

                   伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树

            外的元素。因此，伪类与伪元素的区别在于: 有没有创建一个文档树之外的元素。

7.参考文献

            参考一：http://www.baidu.com

            参考二：http://www.w3school.com.cn/cssref/css_selectors.asp

            参考三：http://www.runoob.com/cssref/css-selectors.html

8.更多讨论

讨论点一：该不该使用 !important?何时需要使用 !important ?

         一般情况下不建议用！important, 不然代码的可维护性很低。

但是有些时候可以使用：

          一、特殊需要的用户能够添加!important到字体的排版属性上，

                比如font-size可以把文本变得更大，或者添加到颜色相关

                的规则上，提高网页的对比度。

          二、有时候，当客户网站上的Css出现一些bug时，需要非常快速

                地进行修改，这种情况下，就可以使用firebug或者其他一些

                开发者工具追踪需要修复的Css代码，但如果问题是发生在IE6

                或者其他一些无法使用调试工具的浏览器上，就需要使用!impo

                rtant代码进行快速修复了。