CSS选择器类型
CSS的各种选择器和权重计算
类别选择器
类别选择器根据类名（class）来选择，前面以 . 来标记，选择所有以相同class的元素
例如：
.demoDiv{
color:#FF0000;
}
标签选择器
标签选择器选择出你所要改变样式的标签，以标签名引用
例如：
p{
color:#FF0000;
}
ID选择器
ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次。
例如：
#id{
color:#FF0000;
}
后代选择器
后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。 例如：可以使用后代选择器选择 label 这个标签<style>
.father .child{
color:#0000CC;
}
</style>
<p class="father">
红色
<label class="child">
蓝色
</label>
</p>
子选择器
请注意这个选择器与后代选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过>进行选择。 例如：CSS:
#links a {color:red;}
#links > a {color:blue;}
HTML:
<p id="links">
<a href="#">HTML中文网</a>>
<span><a href="#">CSS布局实例</a></span>
<span><a href="#">CSS教程</a></span>
</p>
伪类选择器
有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。 例如：a:link{
color:#999999;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:#006600;
}
/* IE不支持，用Firefox浏览可以看到效果 */
input:focus{
background:# E0F1F5;
}
通用选择器
通用选择器用*来表示。表示将样式作用于所有元素 例如：*{
font-size: 12px;
}
群组选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。 例如：p, td, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
.#main p span {
color:#f60;
}
.text1 h1,#sider h3,.art_title h2 {
font-weight:100;
}
使用群组选择器，将会大大的简化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率，同时也减少了CSS文件的体积。
相邻同胞选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。 例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：h1 + p {margin-top:50px;}
相邻兄弟选择器使用了加号+，即相邻兄弟结合符（Adjacent sibling combinator）。注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。
请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：
li + li {font-weight:bold;}
上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。 例如： 简单属性选择 如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。例子 1
如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
可以采用一些创造性的方法使用这个特性。
例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：
img[alt] {border: 5px solid red;}
伪元素选择器
这里要先弄清楚伪类和伪元素的区别
伪类：伪类存在的意义是为了通过选择器格式化DOM树以外的信息 (比如： a标签的:link、:visited等。这些信息不存在于DOM树中。含有不能被常规CSS选择器获取到的信息。(比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child来获取到。)只有一个：
伪元素：本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码），伪元素不是节点，它不会出现在DOM树中，但是在显示上会具备节点的效果
有两个:
区别：
伪类与伪元素都是用于向选择器加特殊效果 ，伪类与伪元素的本质区别就是是否抽象创造了新元素 ，伪类只要不是互斥可以叠加使用， 伪元素在一个选择器中只能出现一次，并且只能出现在末尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
margin: 300px auto;
}
img{
/*img是行内块元素*/
width: 200px;
height: 200px;
}
div:hover::before{
/*当鼠标经过div的时候在前面添加一个盒子*/
content: '';
height: 200px;
width: 200px;
border: 3px solid red;
display: block; /*伪元素默认是行内元素*/
}
</style>
</head>
<body>
<div><img src="timg.jpg" alt=""></div>
</body>
</html>
CSS权重计算
从代码位置上看
内嵌样式 > 内部样式表 > 外联样式表
从选择器类型上看
第一等：内联样式，如：style=“color:red;”，权值为1000.（该方法会造成css难以管理，所以不推荐使用）
第二等：ID选择器，如：#header，权值为0100.
第三等：类、伪类、属性选择器如：.bar， 权值为0010.
第四等：标签、伪元素选择器，如：div ::first-line 权值为0001.
其他：
无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。（ie6支持上有些bug）。
通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000.
继承的样式没有权值。
CSS权重计算方式
计算选择符中的ID选择器的数量（=a）
计算选择符中类、属性和伪类选择器的数量（=b）
计算选择符中标签和伪元素选择器的数量（=c）
忽略全局选择器
在分别计算a、b、c的值后，按顺序连接abc三个数字组成一个新的数字，改值即为所计算的选择符的权重。如果两个选择符的计算权重值相同，则采取“就近原则”。
例如：
div#app.child[name="appName"] /a=1,b=2,c=1 —>权重 = 1 + 100 + 10 +10 = 121/
上一篇： ue4 设置窗口无边框
下一篇： HTML DOM Object 对象