CSS进阶语法
文章目录
1.选择器进阶
1.1 复合选择器
复合选择器分为:后代选择器和子代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 找到div的儿子p设置文字颜色是红色 */
/* 父选择器 子选择器{} */
div p{
color: red;
}
</style>
</head>
<body>
<!-- 后代:儿子、孙子、重孙...都选中 -->
<p>这是一个p标签</p>
<div>
<p>这是div的儿子p</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div>a{
color: red;
}
</style>
</head>
<body>
<div>
父级
<a href="#">这是div里面的a</a>
<p>
<a href="#">这是div里面p里面a</a>
</p>
</div>
</body>
</html>
1.2 并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* p div span h1 文字颜色为红色 */
/* 选择器1,选择器2{} */
p,div,span,h1{
color:red;
}
</style>
</head>
<body>
<p>p标签</p>
<div>div标签</div>
<span>span标签</span>
<h1>h1标签</h1>
<h2>h2标签</h2>
</body>
</html>
1.3 交集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p.box{
color: red;
}
</style>
</head>
<body>
<!-- 找到第一个带box类的p,设置文字颜色是红色 -->
<p class="box">这是p标签:box</p>
<p>p标签</p>
<div class="box">这是div标签:box</div>
</body>
</html>
1.4 hover伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 鼠标悬停到文字,字体为红色背景为蓝色 */
a:hover{
color:red;
background-color: blue;
}
/* 鼠标悬停到div时,div为绿色背景 */
div:hover{
background-color: green;
}
</style>
</head>
<body>
<a href="#">这是超链接</a>
<!-- 任何标签都可以添加伪类,任何一个标签都可以鼠标 -->
<div>div标签</div>
</body>
</html>
扩展:Emmet语法
2.背景属性进阶
2.1 背景颜色(background-color)
三种背景色格式:
- background-color:red
- background-color:#ccc
- background-color:rgba(0,0,0,0.5) //红色蓝三原色,a是透明度0-1
2.2 背景图片插入(background-image)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./1.png);
/* 这里一定要加./来定位当前文件夹否则图片显示不出来 */
}
</style>
</head>
<body>
<div>背景</div>
</body>
</html>
2.3 背景图片平铺(background-repeat)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 400px;
height: 400px;
background-color: pink;
background-image: