CSS选择器

1.id选择器:根据指定的id名称找到对应的标签,然后设置属性
格式:
#id名称{
属性:值;
}
2.类选择器:根据指定的类名找到对应的标签,然后设置属性
格式:
.类名{
属性:值;
}
3.标签选择器:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性
格式:
标签名称:{
属性:值;
}
4.后代选择器:找到指定标签的所有特定的后代标签,设置属性
格式
选择器1 选择器2{
属性:值;
}
5.子元素选择器:找到指定标签的所有特定的直接子元素标签,然后设置属性
格式:
选择器1>选择器2{
属性:值;
}
6.交集选择器:给所有选择器选中的标签中相交的那部分标签设置属性
格式:
选择器1选择器2{
属性:值;
}
注意:交集选择器的选择器之间没有任何符号
7.并集选择器:给所有选择器选中的标签设置属性
格式:
选择器1,选择器2{
属性:值;
}
8.相邻兄弟选择器(css2):给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式
选择器1+选择器1{
属性:值;
}
9.通用兄弟选择器(css3):给指定选择器后面的所有选择器选中的标签设置属性
格式
选择器1~选择器2{
属性:值;
}
10.伪类选择器:伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中
10.1.序选择器（结构伪类选择器）: CSS3中新增的选择器最具代表性的就是序选择器,
1.同级别中的第几个
:first-child 选中同级别中的第一个标签
​:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增

例如(3n+1)分别对应1,4,7…
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素仅有的一个子元素E。仅有一个子元素时生效
注意点: 不区分类型
10.2.#### 动态伪类选择器

​ E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接 描点上
​ E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于 链接描点上
​ E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
​ E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持 a:hover
10.3.#### 否定伪类

​ 作用：可以从已选中的元素中剔除出某些元素
​ 语法：
​ :not(选择器)
​ 例如:
​ p:not(.hello){
​ background-color: yellow;
​ }
11.伪元素选择器
使用伪元素来表示元素中的一些特殊的位置
::after
​ 表示元素的最后边的部分
​ 一般需要结合content这个样式一起使用，
​ 通过content可以向after的位置添加一些内容
::before
​ 表示元素最前边的部分
​ 一般需要结合content这个样式一起使用，
​ 通过content可以向before的位置添加一些内容
​ ::first-letter
​ 为第一个字符来设置一个样式
​ ::first-line
​ 为第一行设置一个样式
12.属性选择器
作用: 根据指定的属性名称找到对应的标签, 然后设置属性
​ 格式:
​ [attribute]

​ [attribute=value]
​ 作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
​ 最常见的应用场景, 就是用于区分input属性
13.#### - 通配符选择器

​ 作用: 给当前界面上所有的标签设置属性
​ 格式:
​ *{
​ 属性:值;
​ }
14.#### 组合选择器

​ 多个选择器组合使用。例如 “div.one” 表示class为one的div元素