6.复合选择器
1.后代选择器
选中所有后代，包括儿子，孙子等等
格式：父选择器 子选择器{CSS属性}
<!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 span{
color:red;
}
</style>
</head>
<body>
<span>1111</span>
<div>
<span>2222</span>
</div>
</body>
</html>2.子代选择器
只选儿子一级
格式：父选择器>子选择器{CSS属性}
<!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>span{
color: red;
}
</style>
</head>
<body>
<div>
<span>123</span>
<p>
<span>456</span>
</p>
</div>
</body>
</html>
3.并集选择器
选中多组标签设置相同的样式
<!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,
span{
color: red
}
</style>
</head>
<body>
<div>div</div>
<p>p</p>
<span>span</span>
</body>
</html>
4. 交集选择器
选中同时满足多个条件的元素
写法：选择器1选择器2{CSS属性}
=<!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.box{
color:red;
}
</style>
</head>
<body>
<p class="box">123</p>
<p>456</p>
<div class="box">789</div>
</body>
</html>
5.伪类选择器
其表示元素状态，选中元素的某个状态设置样式
鼠标悬停状态：选择器：hover{CSS属性}
<!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> a:hover{ color: red; } .box:hover{ color: green; } </style> </head> <body> <a href="#"> a 标签</a> <div class="box">div标签</div> </body> </html>
注：超链接一共有四种状态：
：link 访问前
：visited 访问后
：hover 鼠标悬停
：active 点击时
6.CSS特性
1.继承性
子级默认继承父级的文字控制属性，如果子级有自己的格式，则不会继承。
<!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>
body{
color: red;
}
</style>
</head>
<body>
<p>12345</p>
</body>
</html> 
2. 层叠性
相同类型属性后边会覆盖前边
不同类型属性会叠加
3.优先级
当一个标签用了多个选择器时，基于不同类型的选择器的匹配规则。
！important（!important 规则用于增加样式的权重）>行内样式>id选择器>类选择器>标签选择器>通配符选择器
选中标签的范围越大，优先级越低。
7.Emmet写法
就是一种简写方法
8. 背景
1.拆分写法
background-image 添加背景图
background-attachment 背景图不会随着元素的内容滚动
background-color 规定要使用的背景颜色。
background-position 规定背景图像的位置。
background-size 规定背景图片的尺寸。
background-repeat 规定如何重复背景图像。
background-origin 规定背景图片的定位区域。
background-clip 规定背景的绘制区域。
2.复合写法
background-color: red url(./imges/img.jpg) no-repeat center bottom/cover; 9.显示模式
1.块级元素
独占一行，默认宽度是父级百分之一百，添加宽高属性生效
如：div
2.行内元素
行内共存，尺寸随着内容撑开，无宽和高
如：span
3.行内块元素
行内共存，尺寸随着内容撑开，添加宽高属性生效
常见为图片标签
10.转换显示模式
/* 转换显示模式，分别为块级，行内块，行内 */
display: block;
display: inline-block;
display: inline;
扫一扫
1256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
