常见CSS选择器分类

CSS选择器
基本/基础选择器
通配符选择器
例：*{color:red;} 引入后会把html里所有内容变成红色
元素选择器
例：h1{color:red;}
并集/组合选择器
例：h1,h2,p{color:red;}
类选择器
必须要以点符号开始
类名包含字母、数字、连字符-、下划线_
点号后面必须是字母开始
区分大小写
一个类选择器可以应用到多个标签
例：.F46{color:red;}
ID选择器
必须要以#符号开始
ID名包含字母、数字、连字符-、下划线_
#号后面必须是字母开始
区分大小写
一个ID选择器的名只能与一个标签对应
例：#F46{color:red;}
层次选择器
后代选择器
格式：祖先元素+空格+后代元素{声明块}
子级选择器
格式：父级元素+大于号+子级元素{声明块}
兄弟选择器
格式：兄弟元素A+"+"+兄弟元素B{声明块}
注意：该选择器是选择A元素后面的B元素，并且AB元素必须是紧邻的，即AB之间不许有其他元素
通用选择器
格式：兄弟元素A+"~"+兄弟元素B{声明块}
注意：该选择器是选择匹配的B元素，即A元素后面的所有B元素
伪类选择器
动态伪类选择器
① a:link{声明块} 表示未访问状态的样式
② a:visited{声明块}表示已访问状态的样式
③ a:focus{声明块} 触发焦点(TAB键)时的样式
④ a:hover{声明块}鼠标悬停时的样式
⑤ a:active{声明块}鼠标点击时的样式
静态伪类(只适用于a标签)
动态伪类(不仅限于a标签)
结构伪类选择器(不是只有li子元素才能用这个选择器)
li:first-child{声明块} 表示第一个li的样式
li:last-child{声明块} 表示最后一个li的样式
li:nth-child(n){声明块} 表示从前往后数第n个li的样式
li:nth-last-child(n){声明块} 表示从后往前数第n个li的样式
li:child(2n+1)或child(odd) 表示奇数项的li样式；n从0开始取值
li:child(2n)或child(even) 表示偶数项的li样式；n从0开始取值
div>p:nth-of-type(n){声明块} 表示div下的第n个p标签的样式
div>p:only-child{声明块} 表示div下只有一个p标签时才会出现的样式
div>p:empty{声明块}表示如果p里面是空的元素内容才会有的样式
否定伪类结构选择器
div>ul>li:not(:nth-child(n)){声明块} 表示div下的ul下的除开第n个li之外的其他所有li的样式
伪元素选择器
p::selection{声明块} 表示选中文本时出现的样式 声明块里的规则只能有color和background-color
p::first-letter{声明块} 表示文本首字母样式
p::first-line{声明块} 表示文本第一行样式
p::before{
content:" "; 表示在p之前加入内容
color:red;表示给加入的内容变成红色
}
p::after{
content:" ";表示在p之后加入内容
}
在a标签中使用顺序为①②③④⑤或者②①③④⑤
属性选择器
标签名[属性名=“属性值”] (通常是input标签)