c document 获取css,css选择器

id选择器

先看看class属性和id属性的区别吧。

id

id用于定义唯一的标识符，它是一个全局属性，在整个HTML文档中它的值必须是唯一的。它的用途是当进行链接时标识元素的(使用片段时的标识符)，比如使用脚本，或者样式(CSS)。

这个属性的值是一个不能读懂的字符串：这意味着网页作者不能用他来传递任何信息，比如语义，不能从该字符串中得到(译者认为这句话的意思是，id属性的值只是用来标识一个元素的字符串，该字符串没有实际的语义，即不能从中知道元素的功能或内容等信息)。

这个属性的值必须不能包含空格，对于包含空格的属性值浏览器会认为是不符合标准的。相比之下，class属性允许包含用空格隔开的多个值，而元素的id只能有一个单一的标识符。注意某个元素可能有几个id，但是其他的id应该是通过别的方法定义的，比如可以通过DOM接口操作元素的脚本。

class

全局属性class，是一个以空格分隔的class属性列表。可允许CSS和Javascript对Class属性进行选择，通过class选择器或者类似DOM方法的方程来选取文档中某一类特定的元素。document.getElementsByClassName.

id选择器

在一个HTML文档中,CSS ID 选择器会根据该元素的ID属性中的内容匹配元素,元素ID属性名必须与选择器中的ID属性名完全匹配，此条样式声明才会生效。

class选择器

类选择器，使用.name定义(name为类名，可任意取名)，使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时；

css常见选择器

Type selectors elementname 类型选择器

Class selectors .classname 类选择器

ID selectors #idname id选择器

Combinators组合子

Adjacent sibling selectors A + B (:first-of-type CSS 伪类匹配子元素中新的种类的元素(第一次出现叫做新))

General sibling selectors A ~ B(在使用 ~ 连接两个元素时,它会匹配第二个元素,条件是它必须跟(不一定是紧跟)在第一个元素之后,且他们都有一个共同的父元素 .)

Child selectors A > B(当使用 > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素. )

Descendant selectors A B(当使用 ␣

选择符 (这里代表一个空格,更确切的说是一个或多个的空白字符) 连接两个元素时使得该选择器可以只匹配那些由第一个元素作为祖先元素的所有第二个元素(后代元素) . 后代选择器与 子选择器 很相似, 但是后代选择器不需要相匹配元素之间要有严格的父子关系.)

Pseudo-elements(伪元素) 伪元素添加到选择器，但不是描述特殊状态，它们允许您为元素的某些部分设置样式。

Pseudo-classes(伪类)SS伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。

css优先级与复杂场景的计算方式

优先级,复杂场景的计算方式

这里作为补充：

"与"组合子

image.png

我在mdn上没有找到相关的信息，但是确实有这样的例子，感谢老师的帮助。暂且称之为“与”选择器吧。

直接选择和继承样式

image.png

这里，没有翻译，而且例子也有问题，我就大概说明一下吧，继承属性是会被直接选择的属性所替代的。

复杂场景的权重计算

1.类型选择器(type selectors)(例如, h1)和 伪元素(pseudo-elements)(例如, ::before)(假设=a)

2.类选择器(class selectors) (例如,.example)，属性选择器(attributes selectors)(例如, [type="radio"])，伪类(pseudo-classes)(例如, :hover)(假设=b)

3.ID选择器(例如, #example)(假设=c)

数值越大优先级越高

计算方法如下:

image.png

注意：相同类型的简单选择器是允许重复的而且，会增加对应的权重

状态伪类的覆盖

正确的覆盖顺序：link、a:visited、a:hover、a:active (其中，link和visited可以互换)

1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；

2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义(hover也可以覆盖active和link)；

实例：

image.png

1 .#header{}：匹配Id=header的元素

.header{}:匹配类class=header的元素

.header .logo{}：

匹配类为header元素的后代元素中类为logo的元素

.header.mobile{}：

匹配类名包含header和mobile的元素，如class = 'beader mobile'

.header p, .header h3{}：

匹配两个类型的元素(并集，‘或’关系)，类型1是header类的后代p标签，类型2是header类的后代h3标签

6.#header .nav>li{}：

匹配id为header的后代中，类名为nav的直接子元素中，的li标签

7.#header a:hover{}：

匹配id为header的后代a标签在hover状态(鼠标悬停其上)下的样式

8.#header .logo~p{}：

匹配id为header的后代中，类名为logo的元素之后的同级元素中，的p标签

9.#header input[type="text"]{}

id为header的后代中，input标签中，属性type的值为"text"的元素集合

常见选择器

E:first-child：匹配元素E的第一个子元素

E:nth-child：匹配元素E的第n个子元素

E:enabled和E:disabled：匹配元素E的状态为可用/不可用

E:checked和E:selection：匹配元素E的状态为单选框选中/复选框选中

a:link：未被点击的链接

a:visited：已被点击的链接

a:hover：鼠标悬停其上的链接

a:active：鼠标已经按下，但没有释放的链接

div:first-child和div:first-of-type的作用和区别

div:first-child：父元素的第一个子元素且必须符合指定类型(为div)

div:first-of-type：父元素中的第一个div元素

区别：如

title

div1

div2

1.div:first-child指定必须是第一个元素的div标签，所以无效果

2.div:first-of-type指定第一个div标签，所以是指div1所在的div标签样式

分析

image.png

原因：

item1:first-child{ color: red;}

指定父元素中第一个类名为item1的元素的字体颜色为红色

item1:first-of-type{ background: blue;}

父元素中每一类元素的第一个类名为item1的元素的背景色为蓝色，

(即现将div中的子元素分为p、h3两类标签，每一类取第一个类名为item1的元素，最终：内容为aa的p标签和内容为bb的h3标签被选中)