基础选择器
1. ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
#demo{
color: blue;
}
</style>
</head>
<body>
<div id="demo">ID选择器</div>
</body>
</html>
2. class 选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
.demo{
color: red;
}
</style>
</head>
<body>
<div class="demo">类选择器</div>
</body>
</html>
3. 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
div{
color: orange;
}
</style>
</head>
<body>
<div>标签选择器</div>
</body>
</html>
高级选择器
后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
.demo p{
color: red;
}
.demo{
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.demo1{
width: 150px;
height: 150px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="demo">
<p>我是段落1</p>
<div class="demo1">
<p>我是段落2</p>
</div>
</div>
</body>
</html>
子代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
.demo>p{
color: red;
}
.demo{
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.demo1{
width: 150px;
height: 150px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="demo">
<p>我是段落1</p>
<div class="demo1">
<p>我是段落2</p>
</div>
</div>
</body>
</html>
交集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div.demo1{
color: blue;
}
</style>
</head>
<body>
<div class="demo1">demo1</div>
<div class="demo2">demo2</div>
</body>
</html>
并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.demo1,.demo2{
color: blue;
}
</style>
</head>
<body>
<div class="demo1">demo1</div>
<div class="demo2">demo2</div>
</body>
</html>
通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通配符</title>
<style type="text/css">
*{
color: red;
}
</style>
</head>
<body>
<p>我是段落</p>
</body>
</html>
下个兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.demo1+.demo2{
color: blue;
}
</style>
</head>
<body>
<div class="demo1">demo1</div>
<div class="demo2">demo2</div>
</body>
</html>
