html中基本选择器的优先级,CSS选择器及其优先级

基本选择器

标签选择器

标签选择器又叫元素选择器，换句话说，文档的元素就是最基本的选择器，使用元素名称直接选择元素即可(如body,p,ul,ol,dl)。

类选择器

类选择以点"."开头，后面紧跟一个类名。类名不允许有空格，与元素中class属性的值保持一致。一个元素可以有多个class的值，每个值通过空格分割开。类名相同的元素属于一类元素。

.first{font-size:14px;}

.done{font-weight:bold;text-decoration:line-through;}

• Creat an HTML document
• Creat a CSS style sheet
• Link them all together

ID选择器

ID选择器以"#"开头，后面紧跟一个ID名，在一个文档中，ID值不能重复，因此在选择文档中唯一元素的时候该选择器比较有用。

#polite {font-family: cursive;}

#rude {

font-family: monospace;

text-transform: uppercase;

}

— "Good morning."

— "Go away!"

普遍选择器

使用"*"来表示普遍选择器，表示选择所有元素，通常用在组合选择器中。

.left-nav > * {

width:200px;

background-color:#fafafa

}

推荐

发现音乐

我的音乐

下载的音

多选择器

多个选择器并列使用，使用“,”分割

例如："div,.one,#tt" 表示选择div元素，class为one的元素以及id为tt的元素。

层次选择器

后代选择器

使用 “ ” 隔开两个选择器。例如 "ul li"表示选择ul的后代元素li，li可以为ul的直接子元素，也可以为ul的孙子元素。

子代选择器

使用 “>” 隔开两个选择器。例如 "ul>li"表示选择ul的直接子代元素li,ul的孙子元素li无法被选择到

相邻同胞元素

使用 “+” 隔开两个选择器。例如 ".one+*"表示选择class为"one"元素的下一个兄弟元素。

一般同胞选择器

使用 “~” 隔开两个选择器。例如 ".one~*"表示选择class为"one"元素的所有兄弟元素。

属性选择器(配合基本选择器进行筛选)

[attr] 选择具有attr属性的元素、无论该属性的值为什么

[attr=val] 选择具有attr属性的、并且attr的值为val元素

[attr~=val] 选择具有attr属性的、并且attr的值之一为val的元素

[attr^=val] 选择具有attr属性的、并且attr的值以val开头的元素

[attr$=val] 选择具有attr属性的、并且attr的值以val结尾的元素

[attr*=val] 选择具有attr属性的、并且attr的值包含val的元素

伪类选择器

伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中(配合基本选择器进行筛选)

子元素:

:only-child

:first-child

:last-child

:nth-child(n) 、: nth-last-child(n)

:first-of-type、:last-of-type

:nth-of-type(n)、:nth-last-of-type(n)

......

n可以为元素的序号，也可以为特殊的字符，比如“odd”，“even

元素状态相关

:hover

:active

:focus

......

伪元素选择器

伪元素以"::"开头，用在选择器后，用于选择指定的元素。

::after

::before

::first-letter

::first-line

::selection

......

选择器优先级

在所有的选择器中某个选择器定义的规则是否能够胜出(即优先级)取决于三个元素：Importance，特性值，代码顺序。

!important声明(Importance)

在css规则的值末尾添加"!important"能够保证该规则优先其他规则。但是一般建议不使用"!important",因为它会改变级联的工作方式，使得调试变得困难。

特性值

通过4个特性值来量化一个选择器

声明在元素的style属性中。特性值记为1000

包含在一个选择器中的所有ID选择器。特性值记为100

包含在一个选择器中的所有类选择器，属性选择器，伪类选择器。属性值记为10

包含在一个选择器中的所有元素选择器，伪元素选择器.属性值记为1

代码顺序

如果多个竞争选择器具有相同的重要性和特性值，代码顺序就发挥作用了，后来规则优先前面规则。