CSS选择器

CSS选择器

元素选择器html元素{}用“,”分隔完成分组
类选择器.class名{}针对class
id选择器#id{}针对id
属性选择器html元素[属性]{}可根据具体属性、有无该属性选择
后代选择器html元素 后代元素{}空格分隔,层次间隔可以是无限的
子元素选择器html元素>子元素{}只支持一层子代关系
相邻兄弟选择器html元素+html元素{}紧接在另一个元素后的元素
伪元素selector:pseudo-element{}用于向某些选择器设置特殊效果
伪类selector:pseudo-class{}可与CSS类搭配使用

伪类:

属性描述
:active向被激活的元素添加样式。
:focus向拥有键盘输入焦点的元素添加样式。
:hover当鼠标悬浮在元素上方时,向元素添加样式。
:link向未被访问的链接添加样式。
:visited向已被访问的链接添加样式。
:first-child向元素的第一个子元素添加样式。
:lang向带有指定 lang 属性的元素添加样式。

伪元素:

属性描述
:first-letter向文本的第一个字母添加特殊样式。
:first-line向文本的首行添加特殊样式。
:before在元素之前添加内容。
:after在元素之后添加内容。

属性选择器

选择器描述
[attribute]用于选取带有指定属性的元素。
[attribute=value]用于选取带有指定属性和值的元素。
[attribute~=value]用于选取属性值中包含指定词汇的元素。
[attribute|=value]用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value]匹配属性值以指定值开头的每个元素。
[attribute$=value]匹配属性值以指定值结尾的每个元素。
[attribute*=value]匹配属性值中包含指定值的每个元素。

使用恰当的CSS选择器能让我们在实现元素样式的时候更方便。

发表评论

电子邮件地址不会被公开。 必填项已用*标注