html5中常见选择器选择器决定了样式规则适⽤于哪些元素。
html5有以下常见的选择器：
基本选择器：
1. 元素选择器
* 格式：标记名{/* 声明块* /}
* 所有与该标记名匹配的元素，都将应⽤声明块中的规则
2.  类选择器
* 格式：**.**类名{/* 声明块 */}
* 所有class属性为指定类名的元素，都将应⽤声明块中的规则，其中类型名可以写多个，⽅便代码复⽤* 所有标签都可有class属性
  3.  id选择器
* 格式：#id值{/* 声明块 */}
* < h1 id="属性值">
* 属性id为指定值的元素，都将应⽤声明块中的规则
* 在同⼀个HTML⽂档中，元素的id值必须唯⼀
* 现阶段不写id选择器，JS使⽤
4.通配符选择器
  格式: *+{声明块}
  例⼦: *{ color:red;}
　5.并集选择器/组合选择器
  格式: 元素或类或id+","+元素或类或id+","+元素或类或id","+{声明块}   
  例⼦: h1,.cc,h3{ color:red;}
层次选择器:
html中的5种空格表示⼦集选择器
格式:⽗级元素名称+">"+⼦级元素名称+{声明块}
例⼦: div>p{color:red;}
后代选择器
格式：祖先元素名称+空格+后代元素名称+{声明块}
例⼦: div p{color:red;}
兄弟选择器
格式: A元素名称+"+"+B元素名称+{声明块}
例⼦: div+P{color:red;}
注：选择A元素后紧邻的B元素,AB之间不许有其他元素.
通⽤选择器
格式：同级元素A+"~"+同级元素B+{声明块}
例⼦: div~p{color:red;
注：表⽰选择与A元素同级别的所有B元素(B的位置是在A后⾯)
伪类选择器
  动态伪类选择器
1.未访问
a:link{color:black;}
2.⿏标悬停
a:hover{color:pink;}
3.⿏标点击时
a:active{color:green;}
4.点击后
a:visited{color：五颜六⾊;}
注:hover是可以⽤于多个元素⾝上的，但其他三个只能⽤于具有点击功能的元素上a:focus{color：五光⼗⾊;} 多⽤于输⼊框或链接
注:IE7以前不⽀持:focus，IE6以前不⽀持:hover :active
上5个伪类选择器的顺序要求:（love hate）
A: link,visited,focus,hover,active
B: visited,link,focus,hover,active
结构伪类选择器
格式：元素名称+":nth-child(n)"+{声明块}
例⼦: section:nth-child(2){color:deeppink;}
表⽰选中html⾥的第⼆个section元素,⽂字设置为deeppink
选中第⼀个
格式：元素名称+":first-child"+{声明块}
例⼦: p:first-child{color:red;}
选中最后⼀个
格式：元素名称+":last-child"+{声明块}
例⼦: p:last-child{color:red;}
选中奇数项
格式：元素名称+":nth-child(odd)"+{声明块}
例⼦:section:nth-child(odd){color:deeppink;}
选中偶数项
格式：元素名称+":nth-child(even)"+{声明块}
例⼦:section:nth-child(even){color:deeppink;}
注意：n从0开始取整数，直到最⼤值。例选中前3个：-n+3
伪元素选择器
元素后⾯加内容
格式：元素名称+":after"+{content:"要添加的内容";}
例⼦:  i:after
{content:"姓名";}
　*元素前⾯加内容
格式：元素名称+":before"+{content:"要添加的内容";}
例⼦:  i:before
{content:"姓名";}
元素第⼀⾏添加样式
格式：元素名称+":first-line"+{声明块}
例⼦: p:first-line{color:red;}
元素第⼀个字母或第⼀个汉字
格式：元素名称+":first-letter"+{声明块}
例⼦: p:first-letter{color:red;}
注：为了解决兼容性(有的浏览器不识别)，伪元素选择器，建议打两个冒号

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。