css的9个常用选择器
程序员文章站
2022-10-04 12:27:20
1.类选择器（通过类名进行选择） 效果图： 2.id选择器（通过id进行选择） 效果图： 3.标签选择器（通过id进行选择） 效果图： 4.分组选择器（可一次选择多个标签以设置相同样式） 效果图： 5.后代选择器（选择某个标签的所有后代以设置相同样式） 效果图： 6.属性选择器（通过属性（如name ......
1.类选择器（通过类名进行选择）
<!doctype html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.p1{
color: #00ff00;
}
.p2{
color: #0000ff;
}
</style>
<body>
<p class="p1">这是类选择器</p>
<p class="p2">hello world</p>
</body>
</html>
效果图：
2.id选择器（通过id进行选择）
<!doctype html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
#text{
color: red;
}
</style>
<body>
<p id="text">这是id选择器</p>
</body>
</html>
效果图：
3.标签选择器（通过id进行选择）
<!doctype html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
p{
color: #f40;
font-size: 25px;
}
</style>
<body>
<div>
<p>这是标签选择器</p>
</div>
</body>
</html>
效果图：
4.分组选择器（可一次选择多个标签以设置相同样式）
<!doctype html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
p,a,li{
color: blue;
}
</style>
<body>
<p>这是分组选择器</p>
<p>hello</p>
<a href="#">world</a>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
效果图：
5.后代选择器（选择某个标签的所有后代以设置相同样式）
<!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>
效果图：
6.属性选择器（通过属性（如name属性）进行选择以设置相同的样式）
<!doctype html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
[name="pra1"]{
color: blue;
}
[name="pra2"]{
color: red;
}
</style>
<body>
<p name="pra1">这是属性选择器</p>
<p name="pra2">hello world</p>
</body>
</html>
效果图：
7.通用选择器（选择所有标签以设置相同样式）
<!doctype html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
*{
color: red;
}
</style>
<body>
<p>这是通用选择器</p>
<p>hello</p>
<p>world</p>
</body>
</html>
效果图：
8.兄弟选择器（选择兄弟关系的标签设置样式）
<!doctype html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
p+a{
color: green;
}
</style>
<body>
<p>这是兄弟选择器</p>
<a>hello world</a>
</body>
</html>
效果图：
9.直接父子选择器（选择父子关系的标签中子标签设置样式）
<!doctype html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
div>p {
color: red;
}
</style>
<body>
<div>
<p>这是直接父子选择器</p>
</div>
</body>
</html>
效果图：
上一篇： Web前端基础(4):CSS(一)
下一篇： Go语言【数据结构】切片