前端关于css选择器_html/css_WEB-ITnose

css选择器就好像表达式一样，返回一组或者一个html元素，后面的样式声明块应用到返回的元素上。所以可以把css选择器理解为某个或者某一类html元素的抽象的写法。

在讲具体的各种选择器之前要提一下选择器分组和选择器组合的不同，选择器分组是在各个选择器之间加上逗号操作符，分组执行的是“或”操作，例如h1,h2 {color:red}。选择器组合实在个选择器之间用空格或者其他+ 、>等符号连接，组合执行的是类似于只是类似于“与”的操作。任何选择器都可以进行分组或者组合（只要有意义）。

再介绍一个概念---词列表：用空格分隔的一组单词。（定语空格分开的是关键）

按类别分选择器一共有8种：

1.元素选择器，这种选择器是最基本的选择器，选择器的写法就是对应的html标签，后面的声明块中的样式应用到页面中所有选择器对应的标签。

2.id选择器，id选择器的写法是#id {}，id的开头只能是字母。返回的是页面标签中id值为选择器指定值的标签。id选择器不能和id选择器组合。

3.类选择器，类选择器的写法是.开头后面加类名，类名也只能是字母开头，后面可以跟数字、字幕或者下划线。这里要说明的是在类选择器和类选择器进行组合的时候，它所返回的页面元素是class属性的词列表中同时含有选择器指定类名的元素。只含有一个或者不是包含选择器类名全部的不在返回之列。

4.属性选择器，属性选择器的写法为[]里面写属性名或者用运算符连接的属性名和取值，例如[href]、[href$=.com],这表示选择器选择具有某个属性或者同时该属性取值为某个特殊值的标签。具体分类如下：

[href] 表示选择具有href属性的标签

[href=www.cnblogs.com] 表示选择href属性值为www.cnblogs.com的标签

[href^=www] 表示选择href属性值以www开头的标签

[href$=.com]表示选择href属性值以.com结尾的标签

[class~=button] 表示选择class属性值的词列表中包含button的标签

[class*=button]表示class属性值字符串中包含button字符的标签，注意这要和~=有所区分

[lang |= en] |=这是一种特殊写法，表示lang属性值以en开头或者en-开头的标签

以上写法中属性值没有加引号，引号一般可以加也可以不加，但在属性值为符号或者包含空格的时候必须要加引号,例如[href="#"]

属性选择器与属性选择器组合表示同时含有属性的意思

5.伪类选择器，伪类选择器顾名思义假装有个类，这是说一个标签的类不是显示出现的，而是浏览器在后台悄悄维护的。这种类是在特定状态或者操作下浏览器悄悄不可见的加给元素标签的，要是选择这类标签就要用：来引用那个类名常量。例如a:link ，没访问过的a标签浏览器都会偷偷加个link类给他，但在页面上是看不到这个类名的，要引用到就要用：link，a:visited表示访问过的a标签。这么来看，伪类可以理解为是元素选择器的后置定语。link visisted这两种是静态伪类，就是浏览器悄悄添加修改了就不会再给你该回去了，这两种伪类只能应用于a标签，还有一种伪类可以应用到任何标签，即动态伪类。动态伪类就是浏览器悄悄给你改过一次类名后还可以再根据情况改变多次。

动态伪类有：

:hover

:enabled

:disabled

:checked

其他静态伪类（若通过DOM接口修改了文档，原来的静态伪类是否还使用有待验证）

:first-child

:last-child

:nth-child(even)

:nth-last-child(even)

:only-child

:fist-of-type

:last-of-type

:nth-of-type(even)

:nth-last-of-type(even)

:only-of-type

伪类可以和伪类组合。

6.伪元素选择器，又顾名思义了，就是假装有个标签元素，浏览器偷偷给你价格你看不见他看得见的标签。为了和伪类选择器做区分，现在伪元素选择器都用：：双冒号。

常见的伪元素选择器有：

::first-letter

::first-line

::before {content:"";}

::after{content:""}

7.后代选择器 后代选择器其实就是选择器组合的应用

常见的后代选择器：

1.h2 p 选择器之间用空格连接，表示前面的所有后代中的后面元素

2.h2 > p 选择器之间用大于号连接，表示直接子元素

3.h2~p 选择器用~号连接，表示所有兄弟元素

4.h2+p 选择器用+号连接，表示直接相连兄弟元素

最后关于选择器特殊性的计算:

ID选择器 特殊性为100

类、属性、伪类 特殊性为10

元素、伪元素特殊性为1

写在行内的选择器特殊性为1000

例如 h2.button {}的特殊性就是1+10=11