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>
效果图:
![f14e78b30adcc67c1471071fb21e037f.png](https://img-blog.csdnimg.cn/img_convert/f14e78b30adcc67c1471071fb21e037f.png)
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>
效果图:
![cfec4f9e0ee974bc9a84a7b22714dadf.png](https://img-blog.csdnimg.cn/img_convert/cfec4f9e0ee974bc9a84a7b22714dadf.png)
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>
效果图:
![45aafd89ef4dae4c9c98390c4a0f9d99.png](https://img-blog.csdnimg.cn/img_convert/45aafd89ef4dae4c9c98390c4a0f9d99.png)
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>
效果图:
![5d70d52b3f2dbe185337bd77919a7a6c.png](https://img-blog.csdnimg.cn/img_convert/5d70d52b3f2dbe185337bd77919a7a6c.png)
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>
效果图:
![13030cc7fabbfde6f640f50cadc9ed99.png](https://img-blog.csdnimg.cn/img_convert/13030cc7fabbfde6f640f50cadc9ed99.png)
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>
效果图:
![b896c393f6a9fe5fcdf10840eeaae147.png](https://img-blog.csdnimg.cn/img_convert/b896c393f6a9fe5fcdf10840eeaae147.png)
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>
效果图:
![d2bfe79715a333cafa23024674a8b917.png](https://img-blog.csdnimg.cn/img_convert/d2bfe79715a333cafa23024674a8b917.png)
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>
效果图:
![2b511d3cded9e6b3004e464128c5bf7e.png](https://img-blog.csdnimg.cn/img_convert/2b511d3cded9e6b3004e464128c5bf7e.png)
9.直接父子选择器(选择父子关系的标签中子标签设置样式)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
div>p {
color: red;
}
</style>
<body>
<div>
<p>这是直接父子选择器</p>
</div>
</body>
</html>
效果图:
![e8badd7e6db68669d0e7c8db9745cba4.png](https://img-blog.csdnimg.cn/img_convert/e8badd7e6db68669d0e7c8db9745cba4.png)
原文地址:css的9个常用选择器 - 嚼着炫迈去追梦 - 博客园
作者:嚼着炫迈去追梦
![617c5bf1c4bd9dd63d75816a88811405.png](https://img-blog.csdnimg.cn/img_convert/617c5bf1c4bd9dd63d75816a88811405.png)