CSS复合选择器
复合选择器的分类:
后代选择器 (重点)
子元素选择器
交集选择器
并集选择器(重点)
链接伪类选择器(重点)
(1)后代选择器 (重点)
概念:后代选择器又称为包含选择器
作用:用来选择元素或者元素组的子孙后代
格式:
父级 子级{属性:属性值;属性:属性值}
当标签发生嵌套时,内层标签是外层标签的后代。
.class h2{color:red;foont-size:16px;}
(2)子元素选择器
作用:子元素选择器作为某元素的子元素的元素。
语法:
父级 > 子级{属性:属性值;}
<head>
<title>子元素选择器</title>
<!--这里的子元素,指的只是亲儿子,不包括孙子-->
<style >
div>strong {
color: red;
}
</style>
</head>
<body>
<div>
<strong>儿子</strong>
<strong>儿子</strong>
<strong>儿子</strong>
</div>
<div>
<p>
<strong>孙子</strong>
<strong>孙子</strong>
<strong>孙子</strong>
</p>
</div>
</body>
结果:只有 “儿子”变成了红色,孙子不变色。
意义:这里的 子 指的是亲儿子,不包括孙子。
(3)交集选择器
条件:交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点。
代码:
<head>
<title>交集选择器</title>
<style >
/*需求:让p标签变成红色*/
/*交集选择器:既是 p标签 ,又是 .red类选择器*/
p.red{
color: red;
}
</style>
</head>
<body>
<p class="red">红色</p>
<p class="red">红色</p>
<p class="red">红色</p>
<div class="red">红色</div>
<p>蓝色</p>
<p>蓝色</p>
<p>蓝色</p>
</body>
结果:只有 p标签中存在 class类的标签变成了红色。
格式: p.red 是一个名字,中间不能有空格。交集选择器并不常用
(4)并集选择器 (重点)
应用:如果某些选择器定义的样式相同,就可以利用并集选择器,让代码更简洁。
语法:
.class,h3 {color : red ; font-size : 25px ; }
类选择器, 标记选择器{属性1:属性值1;属性2:属性值2;}
记忆:
并集选择器常用于集体声明,逗号隔开,所有选择器都会执行后面样式,逗号是“和”的意思。
代码:
<head>
<title>并集选择器</title>
<style >
/*客户需求 p 和 span 里面都是红色*/
/*并集选择器,通常用于集体声明,因为选择器里面的样式相同。*/
p,span{
color: red;
}
</style>
</head>
<body>
<p >红色</p>
<p >红色</p>
<p >红色</p>
<span>蓝色</span>
<span>蓝色</span>
<span>蓝色</span>
<div >我和你</div>
<div >我和你</div>
<h1>blue</h1>
<h1>blue</h1>
</body>
(5)链接伪类选择器(重点)
类选择器:用点 .demo
伪类选择器:用冒号 :link
作用:用于向某些选择器添加特殊的效果。比如:给链接添加特殊效果、或者可以选择第1个,第n个选择器。
连接名 | 意思 |
---|---|
a:link | 未访问的链接 |
a:visited | 已访问的链接 |
a:hover | 鼠标移动到链接上 |
a:active | 选定的链接 |
尽量按照顺序记忆和书写:love hate
代码:
<head>
<title>链接伪类</title>
<style>
/*未访问的链接*/
a:link{
text-decoration: none;
color:#333;
}
/*已访问的链接*/
a:visited{
color:orange;
}
/*鼠标经过链接的状态*/
a:hover{
color:red;
}
/*当我们点击的时候(按下鼠标不松开)*/
a:active{
color:green;
}
</style>
</head>
<body>
<a href="http://www.xiaomi.com">小米手机</a>
</body>
我们需要给链接单独指定样式,不然就不会显示:
<html>
<head>
<title>链接伪类</title>
<style>
/*我们在实际工作中都要给链接单独指定样式*/
.nav a{
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">手机</a>
</div>
</body>
</html>
一般我们不需要写出来四个,在实际开发中用的最多的写法:
<head>
/*实际工作中会给a单独指定样式*/
a{
color: #333;
text-decoration: none;
}
/*鼠标放在nav里面的链接才会变色*/
.nav a:hover{
color: orange;
}
</head>
复合选择器的总结
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
---|---|---|---|---|
后代选择器 | 用来选择元素后代 | 选择所有的子孙后代 | 较多 | 符号是 空格 .nav a |
子孙选择器 | 选择最近一级元素 | 只选择亲儿子 | 较少 | 符号是 > .nav > a |
交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号,中间不能隔开 p.one |
并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是 逗号 .nav,header |
链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover实际开发的写法 |
标签的选择模式 (重点)
标签的分类:
(1)块级元素(block-level)
(2)行内元素(inline-level)
(3)行内块元素(inline-block)
(1)块级元素(block-level)
常见的块内元素有:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
等等,其中<div>
是最常见的块元素。
特点如下:
1.竖着显示,自己独占一行。
2.高度(height)、宽度(width)、外边(border)、以及内边距都可以控制
3.宽度默认是容器(父级宽度)的100%
4.是一个容器及盒子,里面可以放行内或者块级元素。
attation:
1.只有文字才能组成段落,因此 p 里面不能放块元素,特别是 p 不能放 div
2.同理还有 h1~h6、dt,他们都是文字类块级标签,里面不能放其他的块级元素
(2)行内元素(inline-level)
常见的行内元素有:<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
其中<span>
是最典型的行内元素,或称内联元素。
特点:
1.相邻行内元素在一行上,一行可以显示多个
2.高、宽直接设置是无效的
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本 或者 其他行内元素
attation
:
1.链接中不能再放链接
2.特殊情况 a 里面可以放块级元素,但是给 a 转换一下块级模式最安全。
(3)行内块元素(inline-block)
比较常见的标签 <img /> 、<input />、 <td>
特点:
1.和相邻行内元素在一行上,但是之间会有空白缝隙,一行可以显示多个。
2.默认宽度就是它本身的宽度
3.高度、行高、外边距以及内边距都可以控制。
三种模式的区别:
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
---|---|---|---|---|
块级元素 | 一行只能放置一个块级元素 | 可以设置宽度高度 | 容器的100% | 容器级可以包含任何标签 |
行内元素 | 一行可以放置多个行内元素 | 不可以直接设置宽度高度 | 它本身内容的宽度 | 容纳文本或者其他行内元素 |
行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
标签显示模式相互转换 display
- 块转行内: display:inline;
- 行内转块:display:block;
- 块、行内元素转成行内块:display:inline-block;
代码:
<head>
<title>行内块元素</title>
<style >
img{
height: 200px;
width: 200px;
}
span{
/*把行内元素转换成块内元素*/
display: block;
width: 100px;
height: 100px;
background-color: pink;
}
div{
/*把块内元素转换成行内元素*/
display: inline;
width: 100px;
height: 100px;
background-color: blue;
}
a{
/*把行内元素转换成行内块元素*/
display: inline-block;
text-decoration: none;
width: 80px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<img src="images/3.jpg" alt="空白">
<img src="images/3.jpg" alt="空白">
<span>行内</span>
<div>块</div>
<a href="#">百度</a>
<a href="#">新浪</a>
案例:简单导航栏
<!DOCTYPE html>
<html>
<head>
<title>导航栏案例</title>
<style >
a{
/*将行内元素转换成行内块元素*/
display: inline-block;
text-decoration: none;
/*框的大小*/
width: 100px;
height: 30px;
/*背景颜色*/
background-color: pink;
/*文字颜色*/
color: white;
font-size: 16px;
/*文字居中*/
text-align: center;
}
a:hover{
/*鼠标经过时会变颜色*/
color: orange;
}
</style>
</head>
<body>
<a href="#">体育</a>
<a href="#">娱乐</a>
<a href="#">汽车</a>
</body>
</html>
结果:
这个图片有一个问题:文字只是水平居中,没有垂直居中,那么如何垂直居中呢?就要借助接下来的行高(line-height)
行高(line-height)
行高(line-height)与高度(height)之间的关系:
- 行高 = 高度 ,文字垂直居中
- 行高 > 高度 ,文字偏下
- 行高 < 高度 ,文字偏上
/*line-height = height 文字垂直居中*/
line-height: 30px;
CSS背景 (background)
(1)背景颜色(color)
background-color: red;
如果不写,默认值是transparent(透明的)
(2)背景图片(image)
/*url是必须要写的*/
background-image: url(images/L.jpg);
语法:
background-image:none|url(url)
tips:
url是必须要写的,
url里面的地址不要加引号
参数 | 作用 |
---|---|
none | 无背景图片(默认) |
url | 使用相对地址或者绝对地址 |
(3)背景平铺(repeat)
语法:
background-repeat:repeat | no-repeat |repeat-x | repeat-y
参数 | 作用 |
---|---|
repeat | 背景图像在纵向和横向上平铺的(默认) |
no-repeat | 背景图像不平铺 |
repeat-x | 背景图像在横向上平铺 |
repeat-y | 背景图像在纵向上平铺 |
/*背景图片不平铺*/
background-repeat: no-repeat;
/*背景图片横向平铺*/
background-repeat: repeat-x;
(4)背景位置(position)重点
语法:
background-position : length | position
参数 | 值 |
---|---|
length | 百分数 或者 由浮点数字和单位标识符组成的长度值 |
position | top / center / bottom / left / center / right 方位名词 |
tips:
- 必须先指定background-image属性
- position后面是 X坐标和 Y坐标,可以使用方位名词 或者精确单位
- 如果只指定了一个数值,那么该数值用于X坐标,另一个默认为Y坐标,默认居中
- 如果只指定了一个方位名词,另一个值默认居中,为50%
- 如果指定两个值,两个值都是方位名字,则两个值前后顺序无关,比如 left,top和top,left效果一致。
- 如果指定两个值,精确单位和方位名字混合使用,则第一个值是X坐标,第二个值是Y坐标。
代码:
/*background-position: X坐标 Y坐标*/
/*左下角*/
background-position: left bottom;
/*水平居中 垂直居中*/
background-position: center center;
/*可以指定精确方位,只写一个,这个值是X坐标,另一个是垂直居中的*/
background-position: 30px ;
/*可以混合使用*/
background-position: 30px top;
案例:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.icon{
width: 150px;
height: 35px;
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url(images/l.png);
/*背景不平铺*/
background-repeat: no-repeat;
/*图片的位置*/
background-position: 10px center;
}
</style>
</head>
<body>
<div class="icon">
</div>
</body>
</html>
(5)背景附着
语法:
background-attachment :scroll | fixed
参数 | 作用 |
---|---|
scroll | 背景图像是随对象内容滚动 |
fixed | 背景图像固定 |
代码:
background-attachment: fixed;
背景简写:
没有固定的写法,下面是最常用的写法;
background: 背景颜色、背景图片地址、背景平铺、背景滚动、背景位置
举例:导航栏的简写
<!DOCTYPE html>
<html>
<head>
<title>导航栏</title>
<style >
.nav a{
/*将行内元素转换成行内块元素*/
display: inline-block;
/*设置盒子的宽、高*/
width: 200px;
height: 50px;
/*背景简写*/
background: url(images/h.png) no-repeat;
color: white;
/*去掉链接下面的下划线*/
text-decoration: none;
/*行高=高度,文字垂直居中*/
line-height: 50px;
}
.nav{
/*div盒子是水平居中的*/
text-align: center;
}
.nav a:hover{
/*当鼠标经过的时候,背景换一个颜色*/
background-image: url(images/l.png);
}
</style>
</head>
<body>
<div class="nav">
<a href="#">网站首页</a>
<a href="#">网站首页</a>
<a href="#">网站首页</a>
<a href="#">网站首页</a>
<a href="#">网站首页</a>
<a href="#">网站首页</a>
</div>
</body>
</html>
(6)背景透明
语法:
background :rgba(0,0,0,0.3)
最后一个参数是 alpha 透明度,取值范围在 0~1之间
习惯上把0.3 中的0省略:background : rgba(0,0,.3)
背景半透明指的是 盒子背景半透明,盒子里面的内容不受影响。
背景总结
属性 | 作用 | 值 |
---|---|---|
background-color | 背景颜色 | 预定义的颜色 / 十六进制 / rgb代码 |
background-image | 背景图片 | url (图片路径) |
background-repeat | 是否平铺 | repeat / no-repeat / repeat-x / repeat-y |
background-position | 背景位置 | length / position 分别是 x 和 y 坐标 ,切记,如果有精确数值单位的,一定先 x后 y |
background-attachment | 背景固定还是附着 | scroll / fixed |
背景简写 | 背景颜色、背景图片地址、背景平铺、背景滚动、背景位置 | |
背景透明 | 让盒子半透明 | background : rgba(0,0,0,0.3) |
CSS的三大特性
(1)CSS层叠性
- 概念:
层叠性是指多种CSS样式的叠加。
是浏览器解决冲突的一个能力,如果一个属性通过两个相同选择器设置在同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉。 - 原则:
样式冲突遵循的原则是“就近原则”,哪个样式离着结构近,就执行哪个样式
样式不冲突,就不会层叠
(2)CSS继承性
- 概念
子标签会继承父标签的某些样式,如文本颜色和字号。
想要设置一个可继承的属性,只需将它应用于父元素即可。即 子承父业。 - 注意:
恰当的使用继承可以简化代码,降低CSS样式的复杂性,比如有很多子级孩子都需要某个样式,可以给父级指定一个,这些孩子继承。
子元素可以继承父元素的样式(text- , font- ,line-
这些元素开头的都可以继承,以及color属性)
(3)CSS优先级(重点)
- 权重计算公式
概念:
定义CSS样式时,经常出现两个或更多规则应用于同一元素上,此时:
选择器相同时,则执行叠加
选择器不同,就会出现优先级的问题。
<!DOCTYPE html>
<html>
<head>
<title>继承</title>
<style >
.one{
color: blue;
}
div{
color: red;
}
</style>
</head>
<body>
<div class="one">
权重的大小
</div>
</body>
</html>
第二种情况:选择器不相同,一个是div标签,一个是.one类,类的优先级较高,所以呈现出的时蓝色
<head>
<title>继承</title>
<style >
div{
color: blue;
}
div{
color: red;
}
</style>
</head>
<body>
<div class="one">
权重的大小
</div>
</body>
第一种情况,选择器相同,执行叠加,即按照哪一个离body更近,呈现出来的是哪个效果。最后的结果是红色
1)权重计算公式 CSS Specificity(特殊性)
标签选择器 | 计算权重公式 |
---|---|
继承或者 * | 0,0,0,0 |
每个元素 | 0,0,0,1 |
每个类、伪类 | 0,0,1,0 |
每个ID | 0,1,0,0 |
每个行内样式 style=" " | 1,0,0,0 |
每个 ! Important 重要的 | 无穷大 |
<head>
<title>继承</title>
<style >
div{
color: blue!important;
}
div{
color: red;
}
#tow{
color: yellow;
}
</style>
</head>
<body>
<div class="one" id="tow" style="color:green"> 权重的大小</div>
</body>
优先级 :继承或者* < 标签 < 类 < ID < style(行内样式表) < !important
- 权重叠加
我们经常用 交集选择器、后代选择器等,是由多个基础选择器组合而成的,那么权重的计算方法就是进行叠加:
div ul li ----> 0,0,0,3
.nav ul li ---->0,0,1,2
a:hover ----->0,0,1,1
.nav a ----->0,0,1,1
继承的权重为0,举例:
<head>
<title></title>
<style>
div{
color: red;
}
/*无论demo没有选择 p 标签, 所以继承的权重为0*/
.demo {
color: blue;
}
p{
color: green;
}
</style>
</head>
<body>
<div class="demo">
<p>继承的权重</p>
</div>
</body>
上面的代码结果,呈现出来的是绿色。虽然类的权重比标签的权重高,但是继承的权重为0,也就是说,如果子元素自己规定了颜色,那么无论父亲结点给的什么颜色,权重都归0,也就是呈现出来的是子元素的自己的颜色。如果代码中 .demo变成了 .demo p ,那么呈现出来的结果就是 .demo p里面规定的颜色了
权重的叠加 举例:
<head>
<title>权重叠加</title>
<style >
/*权重 0,0,1,0+0,0,0,1 =0,0,1,1*/
.nav a {
color: red;
}
/*权重 0,0,1,0*/
.first{
color: green;
}
</style>
</head>
<body>
<div>人生四大乐事</div>
<div class="nav">
<!--因为first的权重 < .nav a 的权重,所以“久旱逢甘霖”呈现出来的颜色还是red-->
<a href="#" class ="first">久旱逢甘霖</a>
<a href="#">他乡遇故知</a>
<a href="#">洞房花烛夜</a>
<a href="#">金榜题名时</a>
</div>
</body>
如何让久旱逢甘霖呈现出我想要的绿色来呢?
解决方法如下:
.nav .first{
color: green;
}
将 .first 改成 .nav .first 后代选择器的形式,权重也增加了
attation:
(1)数位之间没有进制
(2)继承的权重是 0 :我们修改样式,一定要看该标签有没有被选中,如果被选中了,那么以上面的公式来计算权重,谁大听谁的;如果没有被选中,那么权重为0,因为继承的权重为0
(3)如果权重相同,则根据层叠性,就近原则
总结