基础选择器:
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;
}