1、元素选择器
元素选择器可以为同一类元素设置样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mycss1</title>
<!--
选中p元素设置样式
-->
<style type="text/css">
p{
color: darkgreen;
font-size: large;
}
</style>
</head>
<body>
<p>丁香一样的颜色</p>
<p>丁香一样的芬芳</p>
<p>丁香一样的忧愁</p>
</body>
</html>2、id选择器
id选择器可以为某个标签指定样式，是唯一的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mycss1</title>
<style type="text/css">
/*id是唯一的*/
#p1{
color: darkgreen;
font-size: large;
}
</style>
</head>
<body>
<p id="p1">丁香一样的颜色</p>
<p>丁香一样的芬芳</p>
<p>丁香一样的忧愁</p>
</body>
</html>3、类选择器
可以为某一组标签进行设置样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mycss1</title>
<style type="text/css">
.p2{
color: red;
}
</style>
</head>
<body>
<p id="p1">丁香一样的颜色</p>
<p class="p2">丁香一样的芬芳</p>
<p class="p2">丁香一样的忧愁</p>
</body>
</html>4、并集选择器
多种选择器并在一起指定样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mycss1</title>
<!--
多种选择器之间用逗号隔开
满足p标签，class为p2，id为p3中任何一种，都会被选中
-->
<style type="text/css">
p,.p2,#p3{
color: red;
}
</style>
</head>
<body>
<p>丁香一样的颜色</p>
<p class="p2">丁香一样的芬芳</p>
<p id="p3">丁香一样的忧愁</p>
</body>
</html>5、交集选择器
多种选择器交集在一起
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mycss1</title>
<!--
语法： 选择器1选择器2选择器n{} 选择器中间不用逗号，与并集选择器区分
选中p标签，并且id属性为p2_id
-->
<style type="text/css">
p#p2_id{
color: red;
}
</style>
</head>
<body>
<div>
<p>丁香一样的颜色</p>
<p class="p2" id="p2_id">丁香一样的芬芳</p>
<p class="p2" id="p3_id">丁香一样的忧愁</p>
</div>
</body>
</html>6、通配选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mycss1</title>
<!--
选中页面中所有的标签
-->
<style type="text/css">
*{
color: red;
}
</style>
</head>
<body>
<div>
<p>丁香一样的颜色</p>
<p class="p2" id="p2_id">丁香一样的芬芳</p>
<p class="p2" id="p3_id">丁香一样的忧愁</p>
</div>
</body>
</html>7、后代元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mycss1</title>
<!--
p元素可以是center的子元素，也可以是center元素的后代元素
-->
<style type="text/css">
center p{
color: red;
}
</style>
</head>
<body>
<center>
<h1>戴望舒</h1>
<div>
<p>丁香一样的颜色</p>
<p class="p2" id="p2_id">丁香一样的芬芳</p>
<p class="p2" id="p3_id">丁香一样的忧愁</p>
</div>
</center>
</body>
</html>
8、子元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mycss1</title>
<!--
h1只能是center的子元素，不能是隔代的后代元素
-->
<style type="text/css">
center>h1{
color: red;
}
</style>
</head>
<body>
<center>
<h1>戴望舒</h1>
<div>
<p>丁香一样的颜色</p>
<p class="p2" id="p2_id">丁香一样的芬芳</p>
<p class="p2" id="p3_id">丁香一样的忧愁</p>
</div>
</center>
</body>
</html>