html选择器_css的9个常用选择器

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>

效果图：