CSS选择器

基础选择器

        元素选择器
类选择器
ID选择器


通配符选择器
  匹配所有元素，一般用于兼容器
格式：*+声明块
例：*{color:red;}

并集选择器
格式：元素或类或ID+","+元素或类或ID+声明块
例子：h1,h2,h3{color:red;}
     p,.container,#box{background-color:deeppink;}

    

层次选择器

        【子集选择器】
格式：父级元素名称+">"+子级元素名称+声明块
例子：div>p{color:red;}

【后代选择器】
格式：祖先元素名称+"空格"+后代元素名称+声明块
例子：div p{color:red;}

【兄dei选择器】
格式：兄弟元素A+"+"+兄弟元素B+声明块
例子：div+p{color:red;}

注：只能选中元素A后面的第一个元素

【通用选择器】
格式：兄弟元素A+"~"+兄弟元素B+声明块
例子：div~p{color:red;}

注：表示可以选择元素A后面任意位置的同级元素

    

伪类选择器

        【动态伪类选择器】

未访问
格式：a +":"+"link"+声明块
例子：a:link{color:black;}

已访问(访问后）
格式：a +":"+"visited"+声明块
例子：a:visited{color:green;}

悬停（鼠标停留在链接上时的样式）
格式：a +":"+"hover"+声明块
例子：a:hover{color:deeppink;}

点击时
格式：a +":"+"active"+声明块
例子：a:active{color:deeppink;}

以上四个伪类书写顺序
A方案：
link,visited,focus,hover,active
B方案：
visited,link,focus,hover,active

焦点框（多用于输入框肯链接，使用时声明顺序在第三位）
格式：a +":"+"focus"+声明块
a:focus{color:五光十色；}

注：IE7以前是不支持:focus
注：IE6以前是不支持:hover,active

一次性生成层级结构标签：
header>nav>a*10

    

结构伪类选择器

        格式：元素名称+":nth-child(n)"+{声明块}
例子： h1:nth-child(5){color:gray;}
表示选中第5个h1元素，颜色为灰色
表示选中第5个元素，并且满足是h1的情况，才会应用样式

注：（n）中的n表示元素的位置


格式：元素名称+":nth-of-type(n)"+{声明块}
例子： h1:nth-of-type(5){color:gray;}

表示选中类别为h1的第5个h1
表示先筛选出所有的h1标签，然后在结果里选中第5个h1


格式：元素名称+":first-child"+{声明块}
例子： h1:first-child{color:gray;}
表示选中第1个h1元素

格式：元素名称+":last-child"+{声明块}
例子： h1:last-child{color:gray;}
表示选中最后1个h1元素


格式：元素名称+":nth-child(odd)"+{声明块}
例子： h1:nth-child(odd){color:gray;}
表示选中奇数项(2n+1)

格式：元素名称+":nth-child(even)"+{声明块}
例子： h1:nth-child(even){color:gray;}
表示选中偶数项(2n)

[否定伪类选择器]

格式：元素名称+":not(相应的选择条件)"+{声明块}
例子： h1:not(:nth-child(3)){color:gray;}
表示除第3个h1元素，都应用样式

body>h2:only-of-type{......}
表示body只包含一个h2类型元素时属性生效
body>h2:only-child{......}
表示body第一个子元素为h2类型时，属性生效

    

伪元素选择器

        格式：元素名称+":"+"before"+｛content:"加的内容"｝

例子：h1:before{
content: "F51";
}
表示在元素前面加内容

格式：元素名称+":"+"after"+｛content:"加的内容"｝

例子：h1:after{
content: "F51";
}
表示在元素后面加内容

p:first-line{....}给p标签的第一行加样式属性
p:first-letter{....}给p标签的第一个字加样式属性
    

原文：https://www.cnblogs.com/qdxiaochong/p/9222250.html