css选择器有哪些

一、选择器（按照一定的规则选出符合条件的元素，为之添加css样式）有哪些？

答：

1. 通用选择器*；

2. 元素选择器div；

3. 类选择器.类名；

4. id选择器#id名；

5. 属性选择器[属性名]

a.[属性名=具体的值]后者更精准（如：[data-id=1]；

b.[attr*=val]:属性值包含某一个值val;

c.[attr^=val]:属性值以val开头;

d.[attr$=val]:属性值以val结尾;

e.[attr|=val]:属性值等于val或者以val开头后面紧跟连接符-;（title='box' 或者title='box-1）

f.[attr~=val]:属性值包含val，如果有其他值必须以空格和val分隔;(title='box box1')

6. 后代选择器(.home span所有后代、.home>span直接后代）

7. 兄弟选择器（.one~div所有兄弟、.one+div相邻兄弟）

8. 选择器组（div.box交集选择器即是div元素也有box的类名、p,span,div,.box并集选择器即是提到的所有选择器;

9. 伪类选择器(用于选择处于特定状态的元素;)

a.动态伪类：（如果直接给元素设置某个样式，则默认给该元素的所有状态都设置了该样式）

a:link(未访问的连接）、

a:visited（已访问的连接）、

a:hover（鼠标挪动到连接上）、

a:active（激活的链接即鼠标再链接上长按住未松开）、

focus（指当前拥有输入焦点的元素在聚焦获取焦点的时候，一般用于可以交互的元素如：a（可以被tab键选中聚焦，所以也可以）、input等，对div无效；）;

注意1：hover必须放在link和visited后面才能完全生效，

注意2：active必须放在hover后面才能完全生效；

注意3：focus一般放在hover前面；

注意4：hover和active可以用于其它元素。

b.目标伪类：target用来匹配文本中某个标志符的目标元素;

c.语言伪类：lang(en);

d.元素状态伪类：enabled、disabled、checked

e.结构伪类：nth-child()、nth-last-child()、nth-of-type()、nth-last-of-type()

first-child、last-child、first-of-type、last-of-type

root、only-child、only-of-type、empty

f.否定伪类：not()

10. 伪元素（：，：：伪元素默认是行内非替换元素，所以如果要设置宽高的话需要display为非纯行内元素）

a. first-line(div::first-line{}表示div的首行选中)

b.first-lettle(div::first-letter{}表示div的首个字选中）

c.before（div::before{content:''}content不能省略，可以是空，可以是文字，可以是图片（svg、png等等content:url(图片路径)）

d.after