选择器
标签选择器
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*标签选择器*/
div {
color: red;
}
</style>
</head>
<body>
<div>打法</div>
</body>
通用选择器（通配符）
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
color: red;
}
</style>
</head>
<body>
<div>1</div>
<p>1</p>
<h1>1</h1>
</body>
类选择器：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.cl {
color: red;
}
/*标签的类名和选择器的类名一致，一个标签可以有多个类名，一个类名也可以给多个标签使用*/
</style>
</head>
<body>
<div>1</div>
<p class="cl ft">1</p>
<h1 class="cl">1</h1>
</body>
ID选择器：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
color: red;
}
/*一个标签只能有一个ID，一个ID也只能给一个标签使用*/
</style>
</head>
<body>
<div id="box">1</div>
<div>1</div>
<h1>1</h1>
</body>
后代选择器:
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.father p {
color: red;
}
</style>
</head>
<body>
<div class="father">
<div>
<p>1</p>
</div>
<p>1</p>
<h1>1</h1>
</div>
</body>
子级选择器：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.father>p {
color: red;
}
</style>
</head>
<body>
<div class="father">
<div>
<p>1</p>
</div>
<p>1</p>
</div>
</body>
相邻兄弟选择器：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.son+p {
color: red;
}
</style>
</head>
<body>
<div class="father">
<p>1</p>
<div class="son">1</div>
<p>1</p>
<div>1</div>
<p>1</p>
</div>
</body>
通用兄弟选择器：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.son~p {
color: red;
}
</style>
</head>
<body>
<div class="father">
<p>1</p>
<div class="son">1</div>
<p>1</p>
<div>
<p>1</p>
</div>
<p>1</p>
</div>
</body>
浙公网安备 33010602011771号