选择器决定了样式规则适用于哪些元素。
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;}
二、层次选择器:
1.子集选择器（子元素选择器）
格式:父级元素名称+">"+子级元素名称+{声明块}
ie6及以下浏览器不支持
例子: div>p{color:red;}
2.后代选择器
格式:祖先元素名称+空格+后代元素名称+{声明块}
例子: div p{color:red;}
3.兄弟选择器
格式: A元素名称+"+"+B元素名称+{声明块}
例子: div+P{color:red;}
注:选择A元素后紧邻的B元素,AB之间不许有其他元素.
4.通用选择器
格式:同级元素A+"~"+同级元素B+{声明块}
例子: div~p{color:red;
注:表示选择与A元素同级别的所有B元素(B的位置是在A后面)
三、伪类选择器
1、动态伪类选择器
1.未访问
a:link{color:black;}
2.鼠标悬停
a:hover{color:pink;}
3.鼠标点击时
a:active{color:green;}
4.点击后
a:visited{color:五颜六色;}
注:hover是可以用于多个元素身上的,但其他三个只能用于具有点击功能的元素上
a:focus{color:五光十色;} 多用于输入框或链接
<input type='test'> 输入框
5.选中的元素
::selecton
火狐 ::-moz-selection
注:IE7以前不支持:focus，IE6以前不支持:hover :active
上5个伪类选择器的顺序要求:（love hate）
A: link,visited,focus,hover,active
B: visited,link,focus,hover,active
2.结构伪类选择器
格式:元素名称+":nth-child(n)"+{声明块}
例子: section:nth-child(2){color:deeppink;}
表示选中html里的第二个section元素,文字设置为deeppink
1.选中第一个
格式:元素名称+":first-child"+{声明块}
例子: p:first-child{color:red;}
2.选中最后一个
格式:元素名称+":last-child"+{声明块}
例子: p:last-child{color:red;}
3.选中奇数项
格式:元素名称+":nth-child(odd)"+{声明块}
例子:section:nth-child(odd){color:deeppink;}
4.选中偶数项
格式:元素名称+":nth-child(even)"+{声明块}
例子:section:nth-child(even){color:deeppink;}
5.选中指定项
格式:元素名称+":nth-child(n)"+{声明块}
例子:section:nth-child(1){color:deeppink;}
注意：n从0开始取整数，直到最大值。例选中前3个：-n+3
6.选中指定类型的子元素
格式:元素名称+":first-0f-child"+{声明块}
格式:元素名称+":last-0f-child"+{声明块}
格式:元素名称+":nth-0f-child"+{声明块}
四、伪元素选择器
1.元素后面加内容
格式:元素名称+":after"+{content:"要添加的内容";}
例子: i:after
{content:"姓名";}
2.元素前面加内容
格式:元素名称+":before"+{content:"要添加的内容";}
例子: i:before
{content:"姓名";}
3.元素第一行添加样式
格式:元素名称+":first-line"+{声明块}
例子: p:first-line{color:red;}
4,元素第一个字母或第一个汉字
格式:元素名称+":first-letter"+{声明块}
例子: p:first-letter{color:red;}
注:为了解决兼容性(有的浏览器不识别),伪元素选择器,建议打两个冒号
五、属性选择器
1.E[att^=value]属性选择器
E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。例如，div[id^=section]表示匹配包含id属性，且id属性值是以“section”字符串开头的div元素。
<!doctype html><html><head><meta charset="utf-8"><title>E[att^=value]属性选择器的应用</title><style type="text/css">p[id^="one"]{ color:pink; font-family:"微软雅黑"; font-size:20px; }</style></head><body><h2>春望</h2><p id="one">国破山河在，城春草木深。</p><p id="two">感时花溅泪，恨别鸟惊心。</p><p id="one1">烽火连三月，家书抵万金。</p><p id="two1">白头搔更短，浑欲不胜簪。</p></body></html>
只要p元素中的id属性值是以“one”字符串开头就会被选中，从而呈现特殊的文本效果。
[图片上传失败...(image-4aa319-1536496186369)]
2.E[att$=value]属性选择器
E[att$=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。与E[att^=value]选择器一样，E元素可以省略，如果省略则表示可以匹配满足条件的任意元素。例如，div[id$=section]表示匹配包含id属性，且id属性值是以“section”字符串结尾的div元素。
<!doctype html><html><head><meta charset="utf-8"><title>E[att$=value]属性选择器的应用</title><style type="text/css">p[id$="main"]{ color:#0cf; font-family:"宋体"; font-size:20px;}</style></head><h2>春夜喜雨</h2><p id="old1">好雨知时节，当春乃发生。</p><p id="old2">随风潜入夜，润物细无声。</p><p id="oldmain">野径云俱黑，江船火独明。</p><p id="newmain">晓看红湿处，花重锦官城。</p><body></body></html>
只要p元素中的id属性值是以“main”字符串结尾就会被选中，从而呈现特殊的文本效果。
[图片上传失败...(image-755a57-1536496186369)]
3.E[att=value]属性选择器*
E[att*=value]属性选择器用于选择名称为E的标记，且该标记定义了att属性，att属性值包含value子字符串。该选择器与前两个选择器一样，E元素也可以省略，如果省略则表示可以匹配满足条件的任意元素。例如，div[id*=section]表示匹配包含id属性，且id属性值包含“section”字符串的div元素。
<!doctype html><html><head><meta charset="utf-8"><title>E[att*=value]属性选择器的使用</title><style type="text/css">p[id*="demo"]{ color:#0ca; font-family:"宋体"; font-size:20px; }</style></head><body><h2>使至塞上</h2><p id="demo1">单车欲问边，属国过居延。</p><p id="main1">征蓬出汉塞，归雁入胡天。</p><p id="newdemo">大漠孤烟直，长河落日圆。</p><p id="olddemo">萧关逢候骑，都护在燕然。</p></body></html>
只要p元素中的id属性值包含“demo”字符串就会被选中，从而呈现特殊的文本效果。
[图片上传失败...(image-c3c0b2-1536496186369)]
六、兄弟选择器
1. + 选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
比如：
<style type="text/css">
h1 + p {
margin-top:50px;
color:red;
}
</style>
<body>
<p>This is paragraph.</p>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
效果如图：
[图片上传失败...(image-4f02ae-1536496186369)]
兄弟只会印象下面的p标签的样式，不影响上面兄弟的样式。
注意这里的’+’的意义跟’and’意义不一样，兄弟选择器的样式是应用在兄弟元素上，跟参照的元素样式无关，如上例只影响p元素的样式，而不影响h1标签的样式。
当然这个也会循环查找，即当两个兄弟元素相同时，会一次循环查找：
示例：
<style type="text/css">
li + li {
color:red;
}
</style>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
效果：
[图片上传失败...(image-a9c813-1536496186369)]
可以看出第一个li字体颜色没有变红，第二个和第三个元素字体变红，这就是因为第三个li是第二个li的兄弟元素，所以也会应用样式。
２. ~ 选择器
作用是查找某一个指定元素的后面的所有兄弟结点。
示例代码：
<style type="text/css">
h1 ~ p{
color:red;
}
</style>
</head>
<body>
<p>1</p>
<h1>2</h1>
<p>3</p>
<p>4</p>
<p>5</p>
</body>
运行结果：
[图片上传失败...(image-70f511-1536496186369)]
七、否定伪类
x:not(selector)
筛选不含有selector的x
1、选择所有不含有有 class1 的元素
:not(:class1)
<script> $(document).ready(function () { $('p:not(.p1)').addClass('p6'); }) </script>
:empty 选择器
选择每个空元素，不含子集
<script> $(document).ready(function () { var emp= $('p:empty'); emp.addClass('p7'); emp.text('我是空元素'); }) </script>
[图片上传失败...(image-30a466-1536496186369)]
八、继承
一般和文本相关的样式都能继承，与盒子模型相关的都不能继承
九、选择器的优先级
！important>内联样式1000>ID选择器100>类、属性、伪类10>元素选择器1>通配符0
继承没有优先级
选择器优先级一致 使用靠后的
！important 最好不要用
网友评论