CSS常用选择器

对CSS常用的选择器总结一下

HTML是一门标记语言，我们在写html文件的时候会用很多的标签告诉浏览器来怎么布置网页，CSS就是给那些标签加上特定的样式，就要保证特定样式代码跟特定的标签是绑定状态。选择器就是绑定标签的工具。

常见的选择器有；

一.标签选择器：

像这样，选择所有的div标签，给他们设置一个宽高跟背景颜色 边框，所有的选择器都能被选中 

 

 标签选择器有几个特点：

1.选择的是html里所有特定的标签，只要是指定的类型，都会全部被选中

2.无论标签被多少层标签嵌套，它都会被选中，

例如

 

 3.只要是html里有的标签，都可以作为标签选择器去选择

二.id选择器

id选择器就是根据给标签设置的id来绑定这个标签

注意id选择器的格式为

#id名称{样式代码} 

三.类选择器

类选择器 ， 也就是class选择器，跟id选择器类似 它是根据给标签设置的class属性来找到特定的标签的，多个标签可以使用同一个类名，使用同一段样式代码.。一个标签可以绑定多个类名

格式     .class名{样式代码}

四.后代选择器

它会先找到指定的标签，然后再找到这个标签下的指定的后代标签，给这些后代标签增加样式

格式： 标签1   标签2{样式代码}

 

 注意这里不一定只选择到子代，是所有的后代中被指定的都会被选择到

比如下面第三行的p标签用a标签嵌套住，它已经变成了子元素的子元素  但是还是能被选择到

 

五.子元素选择器

子元素选择器的格式：  标签名1>标签名2{样式代码}

子元素选择器会找到特定标签下的子元素，不涉及别的后代元素

子代选择器的格式的左边的>号可以一直延伸下去  直到锁定特定的标签

六.并集选择器

并集选择器的格式：  标签1,标签2{样式代码}

并集选择器会把选择到的所有标签共同赋予一段样式代码

七.兄弟选择器

 给指定选择器后面的所有选择器选中的所有标签设置属性 ​

格式: ​ 选择器1~选择器2{ ​ 样式代码 ​ }

​ 1.通用兄弟选择器必须用~连接 ​ 2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

 

 

八.通配符选择器

这里的通配符是指整个页面所有的标签，可以用来设置全局的一些样式

格式   *{样式代码}   

 

可以看到我给全局增加了一个font-size = 20px的属性  然后整个页面内的所有标签文字的大小都变成了20px

九.伪类选择器

  伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中 。

十.序选择器（结构伪类选择器）

这个选择器最大的特点就是能在同级的兄弟元素中根据序号选中特定的元素

:first-child 选中同级别中的第一个标签

​ :last-child 选中同级别中的最后一个标签

​ :nth-child(n) 选中同级别中的第n个标签

​ :nth-child(odd) 选中同级别中的所有奇数 ​

:nth-child(even) 选中同级别中的所有偶数

​ :nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增

 

 

十一.动态伪类选择器

这里只介绍一个常用的 :hover   

格式：  标签名:hover{样式文件}

这里的:hover指的是鼠标悬停的意思  整个代码读起来就是当鼠标悬停在这个元素上的时候这个元素要产生什么变化

这里我设置了当鼠标悬停在div上的时候 ，div元素发生一个背景颜色的改变。