如果需要给具体的某个元素增加样式,可以试用id选择器。
如果多个元素需要相同的样式,则可以用class选择器。
<html>
<head>
<style>
#id_test {background-color: gray;}
.class_test {background-color: blue;}
</style>
</head>
<body id="id_test">
<h1 class="class_test">This is head</h1>
<p class="class_test">
this is paragraph.
</p>
<body>
</html>
多个class还可以同时使用,如下:
<html>
<head>
<style>
#id_test {background-color: gray;}
.class_test {background-color: blue;}
.class_test1 {color:yellow;font-size: 20px;}
</style>
</head>
<body id="id_test">
<h1 class="class_test">This is head</h1>
<p class="class_test class_test1">
this is paragraph.
</p>
<body>
</html>
组合选择器
后代选择器:div p{...} 选择div中的所有p
子元素选择器:div>p{...} 选择idv中的子元素p
相邻兄弟选择器:div+p{...} 选择div后的一个p
后续兄弟悬着器:div~p{} 选择div后的所有p