100次浏览 发布时间：2024-08-08 13:18:19
1.按ID查找
2.按tag查找
3.按class查找
4.按属性查找
a.'[name=email]'
b.'[type=password]'
c.[class^="icon-"]
5.组合查找
a.input[name=email]
b.tr.red
c.div[title~="warning"] // 选择title中包含warning字符串的div
e.div[title^="intro"] // 选择title中以intro开头的div
f.div[title$="intro"] // 选择title中以intro结尾的div
g.div[title*="intro"] // 选择title中包含intro字符串的div 与c一样
5.多项选择器
$('p.red,p.green'); // 把<p class="red">和<p class="green">都选出来要注意的是，选出来的元素是按照它们在HTML中出现的顺序排列的，而且不会有重复元素。例如，<p class="red green">不会被上面的$('p.red,p.green')选择两次。
6.派生选择器
a.子代选择器：div>a
b.后代选择器：div a
c.相连选择器：li+li
<style type="text/css">
li + li {
color: red;
}
</style>
<ul>
<li>1</li>
<li>1</li>
<li>
<ul>
<li>2</li>
<li>2</li>
<li>2</li>
</ul>
</li>
</ul>
7.伪类选择器
a.未访问的链接a:link { }
b.已访问的链接a:visited { }
c.鼠标移动到链接上a:hover { }
d.选定的链接a:active { }
注意：a:hover 必须被置于 a:link 和 a:visited 之后。a:active 必须被置于 a:hover 之后。
1).:focus获取焦点，当鼠标点击文本框时，对应状态改变。
2).::selection为选中的文字设置样式。
3).:empty用来选择没有任何内容的元素
4).:root选择器等同于<html>元素
5).:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。
6).:read-only和:read-write选中设置了只读和只写
7).:enabled和:disabled选中（“:enabled”）和不可用（“:disabled”）状态
8).first-letter:为元素第一个字设置样式
9).first-line:为元素第一行设置样式
10).:before
11).:after
12).p:first-child，选中第一个子元素
13).p:last-child，选择最后一个子元素
14).p:nth-child(数字/even/odd)：选中任意位置/偶数位/奇数位
15).p:not(.hello){ }为p段落中的除了class=“hello”的添加样式
内联样式(1000)>id选择器(100)>类和伪类(10)>元素选择器(1)>全局选择器>继承的样式(0)
注意：当选择器中包含多种选择器时（p#p2），需要将多种选择器的优先级相加再比较.选择器的优先级不会超过他的最大数量级，比如多个id选择器相加不会超过999.
如果选择器的优先级一样，则使用位置靠后的样式。class="p1 p2"
并集选择器h1，p，div{}的优先级是单独计算的，会各自运用到自己的内容中。在样式的最后添加一个!inportant会获得最高的优先级，优先显示。
