CSS学习----各种选择器(类选择器、id选择器、通配符选择器
2020-11-09 本文已影响0人
扮猪老虎吃
类选择器
<!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>
.red {
color: red;
}
.font35 {
font-size: 35px;
}
</style>
</head>
<body>
<div class="red font35">刘德华</div>
</body>
</html>
id选择器
<!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>
#pink {
color: pink;
}
</style>
</head>
<body>
<div id = "pink">迈克尔·杰克逊</div>
</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>
* {
color: red;
}
</style>
</head>
<body>
<div>111111内容</div>
<span>内容2222222222222</span>
<ul>
<li>内容33333</li>
</ul>
</body>
</html>
外部样式表
- 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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>第一个位置的内容，pink颜色</p>
<div>外部引入css文件，展示效果看看，red颜色</div>
</body>
</html>
- style.css
p {
color: pink;
}
div {
color: red;
}
后代选择器
<!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>
ol li {
color: pink;
}
ul li{
color: green;
}
ul li a{
/* 等价于 ul a */
color: red;
}
</style>
</head>
<body>
<ul>
<li>我是ul的子元素</li>
<li>我是ul的子元素</li>
<li>我是ul的子元素</li>
<li><a>我是ul的子元素</a></li>
</ul>
<ol>
<li>我是ol的子元素</li>
<li>我是ol的子元素</li>
<li>我是ol的子元素</li>
</ol>
</html>
- 其中，
ul li a等价于ul a。
子元素选择器
<!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>
.nav > a {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<a>儿子位置</a>
<p>
<a>孙子位置</a>
</p>
</div>
</body>
</html>
-
.nav > a不等价于.nav a。 -
.nav a会选中.nav的内部元素的所有a标签。
