1.CSS選擇器
選擇器可以說是CSS裏最爲核心的部分,選擇器語法如下
在 CSS 中,選擇器是一種模式,用於選擇需要添加樣式的元素。
選擇器 | 例子 | 例子描述 | CSS |
---|---|---|---|
.class | .intro | 選擇 class="intro" 的所有元素。 | 1 |
#id | #firstname | 選擇 id="firstname" 的所有元素。 | 1 |
* | * | 選擇所有元素。 | 2 |
element | p | 選擇所有 <p> 元素。 | 1 |
element,element | div,p | 選擇所有 <div> 元素和所有 <p> 元素。 | 1 |
element element | div p | 選擇 <div> 元素內部的所有 <p> 元素。 | 1 |
<!DOCTYPE html>
<html>
<head>
<title>CSS 測試</title>
<meta charset="utf-8"/>
<!-- 該標籤表示標籤間的元素是CSS -->
<style type="text/css">
.color{
color: red;
}
</style>
</head>
<body>
<p class="color">顏色測試</p>
</body>
</html>
例子2:
<!DOCTYPE html>
<html>
<head>
<title>CSS 測試</title>
<meta charset="utf-8"/>
<!-- 該標籤表示標籤間的元素是CSS -->
<style type="text/css">
.color{
color: red;
}
#color{
color: blue;
}
</style>
</head>
<body>
<p class="color">顏色測試</p>
<p id="color">顏色測試2</p>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<head>
<title>CSS 測試</title>
<meta charset="utf-8"/>
<!-- 該標籤表示標籤間的元素是CSS -->
<style type="text/css">
.color{
color: red;
}
#color{
color: blue;
}
p{
color: green;
}
</style>
</head>
<body>
<p class="color">顏色測試</p>
<p id="color">顏色測試2</p>
<p>顏色測試3</p>
</body>
</html>
大概你們有疑問,爲什麼只有一個元素的顏色變成綠色。因爲選擇器是有優先級的class和id的優先級高於元素的優先級,而id的優先級高於class的優先級,所以id選擇器的優先級是最高的
PS:一個頁面不能出現相同的id