html中包含选择器,css选择器包括有哪些？

CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。

在CSS中，选择器是一种模式，用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点。

css选择器包括有哪些？

一：类选择器

class元素可以有多个值，中间用空格隔开。一个文件中，可以有多个相同的class值。

样式：.first{

background-color: red;

}

二：ID选择器

#(哈希)符号加上id名称组成。但是单个文件中id值要保持唯一。一个element中只设置一个id。

样式：#polite{

text-transform: uppercase;

}

三：通用选择器

* 允许选择一个页面的所有元素。

样式：* {

text-decoration: line-through;

}

四：属性选择器

1：存在和值属性选择器(presence and value)

分为三种情况：属性名存在；属性名存在并且有对应的值；属性名存在并且包含对应的值。[attr] 只要包含该属性即可。不论是否有值，不论值为何。

样式：[data-fruit]{

color: green;

}[attr=val] 包含该属性，并且值也相等。

样式：[data-fruit="apple"]{

color: red;

}[attr~=val] 包含该属性，并且该属性中至少有一个值为val。

样式：[data-fruit~="apple"]{

color: blue;

}

上面两个标签都会被匹配到。

2：子串值属性选择器(substring value 也叫伪正则)[attr|=val] 包含attr属性，并且值为value，或者值是以val- 这样的形式开头。

[attr^=val] 包含attr属性，并且值以val开头。

[attr$=val] 包含attr属性，并且值以val结尾。

[attr*=val]包含attr属性，并且值中包含子字符串val。

五：伪类(pseudo-class)

以:作为前缀，被添加到一个选择器末尾的关键字。当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上伪类。

比如让超链接，访问前后样式一致，同时鼠标悬停时不一致。a:visited{

color: blue;

}

/** 选择器上的逗号不能省略*/

a:hover,

a:active,

a:focus{

color: red;

text-decoration: none;

}

比如当一个列表的偶数行和奇数行的背景不同

• 这是第一行

• p>这是第一行
• p>这是第一行
• p>这是第一行

li:nth-of-type(2n){

background-color: red;

}

li:nth-of-type(2n+1){

background-color:blue;

}

这里的nth-of-type() 是匹配兄弟节点。因此不能写成p:nth-of-type。另外如果使用的是nth-child()的话，它匹配的也是兄弟节点。虽然看名字像是一个孩子节点。

六：伪元素(Pseudo-element)

通过::这样两个冒号前缀，组合关键字，添加到某个元素的后面，去选择该元素的某个部分。moremom

a::after{

content:"后面追加内容";

}

或者

[href^="http"]::after{

content:"后面追加的内容";

}

七：组合器名称组合器选择选择器组A,B匹配A或B的任意元素 ，或者匹配A和B

后代选择器A BB是A的后代节点,匹配B

子选择器A>BB是A的直接子节点,匹配B

相邻兄弟选择器A+BB是A的下一个兄弟节点，B紧跟A，匹配B

通用兄弟选择器A~BB是A之后的兄弟节点中的任一个，匹配B