基础选择器：
1.标签选择器
h1{
font-size:30px;
color:#333;
}
2.类选择器
.red{
background:red;
}
3.id选择器
#user_123{
width:120px;
line-height:30px;
height:30px;
}
4.通配符选择器
通配符选择器意思就是用一个符号来代替某些字符
*{
color:red;
}
通配符选择器的权重是最低的的，因此只要有其他的定义，使用通配符选择器进行的定义的就会被覆盖。
5.子元素选择器
子元素选择器用于表示某些特定的事html嵌套关系时的样式展现，其语法关键词是一个“>”
6.后代元素选择器
后代元素选择器类似于子元素选择器，只不过它的要求不那么严格。它的语法的关键词是一个空格。
li a{
color:blue;
}
只要链接<a>标签是列表项<li>的后代元素即可，
7.相邻元素选择器用于选取和某个元素相邻的同级元素，其语法关键词是一个“+”符号。
<div class="content">
<h1></h1>
<p></p>
</div>
h1+p{
font-size:15px;
}
相邻元素选择器的使用有两个条件：
1）二者必须拥有同一个父元素
2）二者相邻
相邻元素的选择器在实际应用中往往会和其他的选择器配合使用，例如：
body >.content h1+p{
font-size:15px;
font-weight:bold;
}
8.属性选择器
属性选择器的语法关键词是一对中括号“[]”
[title]{
color:red;
}/*所有拥有title属性的元素文字颜色设为红色*/
a[href][title]{
color:red;
｝/*同时拥有href和title属性的a标签的文字颜色设置为红色*/
我们还可以通过属性赋值来选取特定属性值的元素。
a[href="www.baidu.com"][title="百度"]{
color:red;
}
9.组选择器
如果要对多个元素定义同样的样式，则可以用组选择器来缩减重复代码。组选择嘎啦的语法关键字是一个“,”。
h1,h2,h3{
font-weight:bold;
}
10.复合选择器
如果说组选择器相当于一种并集，或者常说的||关系的话，那么复合选择器就表示与&的关系。
它的用法很签单，将两个有可能发生的与关系的选择器连在一起就行了
例如：
p.test{ /*注意中间不要有空格，否则就会被识别成后代选择器了*/
color:red;
}
<p class="test">hehe</p>
<div> hehe</div>
<div class="test">hehe</div>
<p>hehe></p>
只有第一个段落中的文字会被设置成为红色，因为它同时满足了p元素和class="test"两个条件。
应用复合选择器时，标签选择器一定要写在最前面，否则无法识别。
伪类选择器：
1.结构化伪类选择器
其实就是可以根据文档的结构来选取元素。例如
1）:nth-child(n)
选择器中的n表示一个简单的表达式，它可以是大于等于0的整数，
n取2，就是取某个父元素内第2个<li>元素，即需要同时满足两个条件：
a)是不是第2个元素
b)是不是<li>元素。
:nth-child(2n){
}/*表示所有的偶数项*/
2）:nth-last-child(n)
是从最后一个元素开始计算。
3）:nth-of-type(n)
和前面介绍的:nth-child(n)类似，区别在于，如果使用p:nth-child(3)这样的条件时，一旦第3个元素不为<p>元素，这个选择器就不起作用，而p:nth-of-type(n）则查询的是第3个<p>元素。
4）:nth-last-of-type(n)
选择器和前面的:nthh-of-type(n)的区别只是获取元素的顺序相反，是从最后一个元素开始计算。
5）:last-child
选择的是元素的最后一个子元素。
6）:first-of-type和last-of-type
:fist-of-type相当于:nth-of-type(1),
:last-of-type相当于:nth-last-of-type(1)
7):only-child
如果一个父元素只有一个子元素，那么选取这个子元素。
p:only-child则取交集，即如果一个父元素只有一个子元素，且这个子元素<p>，这个选择器才会生效。
8）:only-of-type
基本与:only-child，区别在于如果不指定type而直接使用:only-of-type的话会造成body被选择，而:only-child不会出现这种情况；
9）:root
选择文档的元素，对于HTML文档来说，根元素永远是<html>标签，由于:root是一个CSS3选择器，不兼容IE6-8，因此建议在实际开发中使用标签选择器来代替:root。
10）:emtpy
是用来选择没有任何内容的元素，这里所说的没有内容指的是一点内容都没有，哪怕是一个空格。
目标伪类：target
URL前面有锚名称# ，指向文档内某个具体的元素，例如<a href="#id_name"></a>。
那么<div id="id_name"></div>这个被链接折元素就是目标元素(target element)
:target选择器可用于选取当前活动的目标元素。
状态伪类：
1.:enable和:disabled
表单元素可以设置disable属性表示禁用，:enable选择器用于选择所有可用的元素，而，:diableed则用于选择所有已被禁用的元素。例如：
input:disabled{
opacity:0;
}
2.:checked
input表单中的checkbox和radio都使用checked属性表示是否选中，只要checked属性存在，使用checked=false 或checked=0都会表示单选、复选框被选中。例如
input:checked{
opacity:0;
}
属性选择器达到和使用:checked一样的效果：
input["checked"]{
opacity:0;
}
否定伪类:not(s)
选择器匹配非指定元素、选择器的每个元素。
:not(p){
background-color:red;
}
上面这段代码表示将除了段落<p>标签以外的所有HTML元素的背景颜色都设置为红色
可以与其他选择器一起使用
div:not(.test){
background:red;
}
6783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
