CSS樣式和常用選擇器
阿新 • • 發佈：2018-12-21
HTML負責網頁的結構和內容，CSS負責頁面的樣式
CSS的三種引入方式，存在優先順序問題，哪個樣式離元素最近，那個樣式的優先順序就越高
外聯式：通過link標籤，將外部的CSS樣式連結進來
<link rel="stylesheet" type="text/css" href="CSS檔案">
內嵌式：在head頭內通過style標籤設定頁面的樣式，各個屬性都要用分號隔開
<style type="text/css"> div{ font-size: 30px; color:red; } </style>
內聯式：通過標籤的style屬性，設定標籤的樣式，各個屬性都要用分號隔開
<div style="color:blue; font-size:40px;">文字內容</div>
常用的選擇器
所有選擇器都要在head頭裡的style標籤中定義
標籤選擇器，前面寫要增加樣式的標籤名
<html> <head> <style> div{ color: red; font-size: 30px; } </style> </head> <body> <div>文字內容</div> </body> </html>
id選擇器，通過id名來選擇元素，頁面上只有一個唯一的ID值，不能重複，所以id選擇器只能選擇到一個元素，使用方法就是#id屬性的值
#box{font-size: 30px;}
<div id="box">123</div>
類選擇器，通過class類名選擇元素，一個類可以應用於多個元素，一個元素也可以有多個類，類選擇器是使用最多的選擇器之一，使用方法 .類屬性的值
.odiv{font-size: 30px;} <!--一個類可以有多個值中間用空格隔開--> <div class="odiv odiv2 odiv3">文字</div>
注意：影響範圍越大的選擇器優先順序就越低，所以 id>class>元素選擇器。如果同時設定了三種基本選擇器，那麼就會使用id選擇器的樣式
層級後代選擇器
<!--多種選擇器之間可以混合使用，類選擇器後跟標籤選擇器，這個類下面的所有子級div標籤都會改變樣式>
.odiv1 div{width:300px; height:500px; color:red;}
<!--也可以定位到類odiv1下面的子級的子級類odiv3的元素-->
.odiv1 .odiv3{width:400px; height:500px; color:red;}
<div class="odiv1">
<div class="odiv2">
<div class="odiv3">文字內容</div>
</div>
</div>
分組選擇器
<!--分組選擇器可以設定需要相同樣式的不同元素， 各個選擇器之間用逗號隔開，可以統一設定樣式>
.odiv1, .odiv2, .p1, .odiv3{
width: 300px;
height: 300px;
}
.odiv1{background-color: red;}
.odiv2{background-color: blue;}
.pi{background-color: pink;}
odiv3{ background-color: green;}
<div class="odiv1"></div>
<div class="odiv2"></div>
<p class="p1"></p>
<div class="odiv3"></div>
單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素。（偽元素由雙冒號和偽元素名稱組成）
常用偽類選擇器 :hover
:hover設定當滑鼠懸停在元素上時展現的樣式
.box{ width: 300px; height: 300px; background-color: red;}
<!--滑鼠懸停在類box元素上時的樣式-->
.box:hover{background-color: yellow;}
<div class="box"></div>
常用偽元素選擇器
::before設定顯示在元素前面的內容
::after設定顯示在元素後面的內容
.box::before{ content: "I"; }
.box::after{ content: "you"; }
<div class="odiv"> love </div>