CSS选择器大全（暂时只学习了那么多）

css规则-选择器

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

元素选择器

• 元素选中器的书写格式：标记名{/声明块/}
• 所有与该标记名匹配的元素，都将应用声明块中的规则

类选择器

• 类选择器的书写格式：.类名{/声明块/}，所有class属性为指定类名的元素，都将应用声明块中的规则。例如：
• 同一个标签起多个类名，类名之间需要用空格间隔开，多个类名是帮助我们代码复用。

ID选择器

• ID选择器的书写格式：#id值{/声明块/}
• 属性id为指定值的元素，将应用声明块中的规则
• 在同一个HTML文档中，元素的id值必须唯一，ID选择器只会选中一个元素
• CSS不许用ID选择器（留给JS用）

通配符选择器

• 格式*+{声明块}
• 例子： *{color：red；}

并集选择器/组合选择器

• 格式：元素或类或id，元素或类或id，{声明16111块}
• 例子：h1,h2,.class,id{color:red;}

层次选择器

子级选择器

• 格式父级元素名称+">"+子级元素名称+{声明块}
• 例子：div>p{声明块}

后代选择器

• 格式：祖先元素+空格+后代元素名+{声明块}
• 例子：body div{color：red;}

兄弟选择器

• 格式：A元素名+"+"+B元素名+{声明块}
• 例子：div+p{声明块}
• 注意选择A元素后的B元素，AB之间不许有其他元素

通用选择器

• 格式：同级元素A+”~“+同级元素B+{声明块}
• 例子：div~p{声明块}
• 注意：表示选择与A元素同级别的所有B元素（B的位置是在A的后面）

伪类选择器

动态伪类选择器

• 未访问：a：link{color：pink；}
• 鼠标悬停：a：hover{color：green；}
• 鼠标点击：a：active{color：black；}
• 鼠标点击后：a：visited{color：blue；}
• 注：hover是可以用于多个元素身上的，但其他三个只能用于具有点击功能的元素上；IE6之前版本不支持hover和active
• a：focus{color:五光十色}多用于输入框或链接，注意：IE7以前的版本不支持
• 注意：以上五个的顺序要求，l-v-f-h-a或者v-l-f-h-a

结构伪类选择器

• 格式：元素名称+":nth-child(n)"+{声明块}
• 例子：section:nth-child(2){color:red;},表示选中html里的第二个section元素文字设置为red
• 如果想选中前三个元素可以写为（-n+3）
• 选中第一个：元素名称+":first-child"+{声明块}
• 例子：section:first-child{color:red;}
• 选中最后一个：元素名称+":last-child"+{声明块}
• 例子：section:last-child{color:red;}
• 选中奇数项：元素名称+":nth-child(odd或者2n+1)"+{声明块}
• 例子：section：nth-child（odd）{color：red；}
• 选中偶数项：元素名称+":nth-child(even或者2n)"+{声明块}
• 例子：section：nth-child（even）{color：red；}

伪元素选择器

• 元素后面加内容格式：元素名称:after{内容}
• 例子：i:after{content:"性别";}
• 元素前面加内容格式：元素名称:before{内容}
• 例子：i:before{content:"性别";}
• 元素第一行添加样式，格式：元素名称：first-line{声明块}
• 例子：p：first-line{color：red；}
• 元素第一个字母或者第一个汉字修改样式，格式元素名称:first-letter{声明块}
• 例子：p:first-letter{color:red;}
• 注意：为了解决兼容性，伪元素选择器，建议打两个冒号。

转载于:https://www.cnblogs.com/namofa/p/8847106.html