1- 复合选择器:
- 交集选择器
- 并集选择器
代码如下:
<style>
/* 交集选择器 用.隔开*/
p.red{
color:blue;
}
/* 并集选择器 用,隔开*/
h1,span{
color:blue;
}
</style>
<body>
<div class="red">我是div</div>
<p class="red">我是p标签</p>
<h1>我是h1</h1>
<span>我是span</span>
</body>
2-关系选择器
理解各种类型的元素分类
父元素 | 直接包含子元素的元素 |
子元素 | 直接被父元素包含的元素 |
祖先元素 | 直接或间接包含后代元素的元素 一个元素的父元素也是他的祖先元素 |
后代元素 | 直接或间接被祖先元素包含的元素叫做后代元素 子元素也是后代元素 |
兄弟元素 | 拥有相同父元素的元素是兄弟元素 |
以及为了不同的需求,给不同的元素设置属性的不同方法:
有如下的代码为前提:
<div>
我是div
<p>
我是div中的p元素
<span>
我是p元素中的span元素
</span>
</p>
<span>
我是div中的span元素
</span>
</div>
- 子元素选择器-为A的子元素B设置属性:
为div的子元素span设置属性:
div > span{
color:orange;
}
如果有另一个div,则可以:
div.className > span{
color:orange;
}
- 后代元素选择器-选中指定元素内的指定后代元素
div > p > span {
color:orange;
}
- 兄弟选择器
找p的下一个span元素
p+span{
color:red;
}
选择下面所有的兄弟元素,前面的兄弟元素不会被选中
p~span{
color:red;
}
3.属性选择器
注解: title^=abc 表示以指定值abc开头
title$=abc表示以指定值abc结尾
title*=abc表示包含abc属性的元素
p[title]{
color:orange;
}
p[title = "abc"]{
color:orange;
}
p[title ^= "abc"]{
color:orange;
}
<p title="abc"> 你好</p>
<p title="abcde"> 你好</p>
<p title="abcdef"> 你好</p>
4.伪类选择器
Pseudo-Class
包含:
first-child 、last-child 、nth-child(n)、(odd)、(even)、(2n+1)
类似的还有:
first-of-type、last-of-type、nth-of-type()
否定伪类:
not()
/*选中第一个子元素*/
ul > li:first-child{
color:red;
}
/*选中最后一个子元素*/
ul > li:last-child{
color:red;
}
/*选择第n个元素*/
ul>li:nth-child(3){
color:red;
}
/*除了第n个元素*/
ul>li:not(li:nth-child(3)){
color:red;
}
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
超链接的伪类:
:link 表示没访问过的链接
:visited表示访问过的链接(只能修改链接的颜色,其他属性都无法修改。为了保护隐私)
:hover表示鼠标移入的状态(除了超链接别的元素也可使用)
:active表示鼠标点击的状态
5.伪元素选择器
理解:不存在的元素(before与after经常使用)
::first-letter | 表示第一个字母 |
::first-line | 表示第一行 |
::selection | 选择的部分 |
::before(结合content属性使用) | 元素的开始位置 |
::after(结合content属性使用) | 元素的结束位置 |
餐厅选择联系: http://flukeout.github.io/
6.样式的继承
我们为一个元素设置的样式同时也会应用到他的后代元素上
但是并不是所有的样式都可以被继承
7.选择器的权重(重点)
内联样式 <div style=""> | 1,0,0,0 |
ID选择器 #id{} | 0,1,0,0 |
类和伪类选择器 .class{} | 0,0,1,0 |
元素选择器 div{} | 0,0,0,1 |
通配选择器 *{} | 0,0,0,0 |
继承 | 没有优先级 |
优先级计算将权重累加0,0,0,0
但是无法越级:例如,类选择器累加也无法超过id选择器
可以在某一个样式的后边添加!important:表示优先级最高(!慎用)