css的9个常用选取器
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.类<span style="color: black;">选取</span>器（<span style="color: black;">经过</span>类名进行<span style="color: black;">选取</span>）</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.p1{
color: #00ff00;
}
.p2{
color: #0000ff;
}
</style>
<body>
<p class="p1">这是类<span style="color: black;">选取</span>器</p>
<p class="p2">hello world</p>
</body>
</html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">效果图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-5c024d1d20d1ca01a9fef2fae50f8dec_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.id<span style="color: black;">选取</span>器（<span style="color: black;">经过</span>id进行<span style="color: black;">选取</span>）</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
#text{
color: red;
}
</style>
<body>
<p id="text">这是id<span style="color: black;">选取</span>器</p>
</body>
</html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">效果图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-680b184ba9bd13b4ee9cc8c62db0eb51_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.标签<span style="color: black;">选取</span>器（<span style="color: black;">经过</span>id进行<span style="color: black;">选取</span>）</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
p{
color: #f40;
font-size: 25px;
}
</style>
<body>
<div>
<p>这是标签<span style="color: black;">选取</span>器</p>
</div>
</body>
</html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">效果图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-b0b2fc51039e76891665892dc60325f7_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.分组<span style="color: black;">选取</span>器（可一次<span style="color: black;">选取</span>多个标签以设置相<span style="color: black;">一样</span>式）</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
p,a,li{
color: blue;
}
</style>
<body>
<p>这是分组<span style="color: black;">选取</span>器</p>
<p>hello</p>
<a href="#">world</a>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">效果图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-952ffa9598f28e32531e053b2fa45232_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5.后代<span style="color: black;">选取</span>器（<span style="color: black;">选取</span>某个标签的所有后代以设置相<span style="color: black;">一样</span>式）</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
div ul li{
color: red;
list-style: none;
}
</style>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">效果图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-720c06c083a70471df936db843a3604f_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">6.属性<span style="color: black;">选取</span>器（<span style="color: black;">经过</span>属性（如name属性）进行<span style="color: black;">选取</span>以设置相同的样式）</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
{
color: blue;
}
{
color: red;
}
</style>
<body>
<p name="pra1">这是属性<span style="color: black;">选取</span>器</p>
<p name="pra2">hello world</p>
</body>
</html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">效果图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-566a73bc98985fc3fbf2086c87195242_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">7.通用<span style="color: black;">选取</span>器（<span style="color: black;">选取</span>所有标签以设置相<span style="color: black;">一样</span>式）</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
*{
color: red;
}
</style>
<body>
<p>这是通用<span style="color: black;">选取</span>器</p>
<p>hello</p>
<p>world</p>
</body>
</html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">效果图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-350ef7bd1c2a5d8013134c55ed65694e_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">8.兄弟<span style="color: black;">选取</span>器（<span style="color: black;">选取</span>兄弟关系的标签设置样式）</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
p+a{
color: green;
}
</style>
<body>
<p>这是兄弟<span style="color: black;">选取</span>器</p>
<a>hello world</a>
</body>
</html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">效果图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-e196517c3877677fb7f5009245305b9b_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">9.直接父子<span style="color: black;">选取</span>器（<span style="color: black;">选取</span>父子关系的标签中子标签设置样式）</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
div>p {
color: red;
}
</style>
<body>
<div>
<p>这是直接父子<span style="color: black;">选取</span>器</p>
</div>
</body>
</html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">效果图：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-b954e7972fe24929dbd81ac693355adc_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>原文<span style="color: black;">位置</span>：<a style="color: black;">css的9个</a>常用<span style="color: black;">选取</span>器 - 嚼着炫迈去追梦 - 博客园作者：嚼着炫迈去追梦<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-325472601571f31e1bf00674c368d335_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
你的留言真是温暖如春，让我感受到了无尽的支持与鼓励。 系统提示我验证码错误1500次 ＼~゛， 楼主继续加油啊！外链论坛加油！
页:
[1]