选择器进阶
- 复合选择器
分为后代选择器(空格)和子代选择器(>)
后代包括:儿子,孙子和重孙子等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 在.father的后代中,找p标签 小姐姐和小帅哥两个都变红*/
.father p {
color: red;
}
/* 在.father的子代中,找p标签 小姐姐变红*/
.father > p {
color: red;
}
</style>
</head>
<body>
<div class="father">
<p>小姐姐</p>
<div>
<p>小帅哥</p>
</div>
</div>
<p>小可爱</p>
</body>
</html>
- 并集选择器
同时选择多组标签,设置同样的样式
通常一行写一个, 提高代码的可读性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div,
p,
.red,
h2 {
color: red;
}
</style>
</head>
<body>
<!-- 需求:把div和p标签设置为红色(节省代码的方式) -->
<div>我是div</div>
<p>我是p标签</p>
<h1 class="red">我是一个h1标签</h1>
<h2>我是一个h2标签</h2>
</body>
</html>
- 交集选择器
选择页面中同时满足多个选择器的标签,满足既又原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p.red {
color: red;
}
</style>
</head>
<body>
<!-- 需求:只让小可爱变红(不能改变html结构) -->
<!-- 解决:找到页面中,既是p标签,又有red这个类名的标签,设置样式 -->
<div class="red">小姐姐</div>
<p>小帅哥</p>
<p class="red">小可爱</p>
</body>
</html>
- Emmet语法
通过简写语法,快速生成代码
- hover伪类选择器
选中鼠标悬停在元素上的状态,设置样式,一般可以配合transform属性来设置动画样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: skyblue;
}
.box:hover {
width: 400px;
height: 400px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
背景相关属性
- 背景颜色
background-color 默认值是透明transparent
为了能看清楚盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色
- 背景图片
background-image:url(路径)
URL中可以省略引号,默认是在水平方向和垂直方向平铺的。
仅仅是起到装饰作用,是不能够撑开盒子的
- 背景平铺
background-repeat
一般设置为no-repeat表示不平铺
- 背景位置
background-position :水平位置 垂直位置
- 背景相关属性连写
background:color image repeat position
元素显示模式
- 块级元素
display:block
独占一行,一行只能显示一个
宽度默认是父元素的宽度,高度默认由内容撑开
可以设置宽高
比如div p h
p标签不要嵌套div p h 等块级元素
- 行内元素
display:inline
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高
a span b u i s strong ins em del
a标签不能嵌套a标签
- 行内块元素
display:inline-block
一行可以显示多个,可以设置宽高
input textarea button select
特殊情况:imgb标签也有行内块元素的特点,但是调试工具中显示结果为inline
- 元素模式转换
改变元素默认的显示特点,让元素符合布局要求
CSS三大特性
- 继承性
子元素有默认继承父元素样式的特点(子承父业)
可以继承的常见属性有
color font-style font-weight font-size font-family
text-indent text-align
line-height
应用场景:
可以直接给ul设置list-style:none 从而去除列表默认的小圆点样式
直接给Body设置统一的font-size和font-family
继承失效的一些特殊情况.如果元素有浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式
1 a标签的color会继承失效,因为被浏览器默认样式给覆盖掉了
2 h标签的font-size会继承失效,因为被浏览器默认样式给覆盖掉了
3 div的高度不能继承,但是宽度有类似于继承的效果。
- 层叠性
给同一个标签设置不同的样式,此时样式会层叠叠加,会共同作用在标签上
给同一个标签设置相同搞得样式,此时样式会层叠覆盖,最终写在最后的样式会生效
当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: red;
}
p {
/* font-size: 30px; */
color: blue;
}
</style>
</head>
<body>
<p class="orange" style="color:green">我是一个文字</p> green>blue>red
</body>
</html>
- 优先级
不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式:继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 <行内样式<!important
!important写在属性值的后面,分号的前面
!important不能提升继承的优先级,只要是继承优先级就是最低!
尽量少用!important
权重叠加计算
如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效。计算公式如下,每一级之间不存在进位
先比较第一级数字,谁大选谁,以此类推。如果所有数字都相同,表示优先级相同,此时比较层叠性,也就是谁近选谁。!important权重如果不是继承,则最高