“選擇器”是什么?
每一條css樣式定義由兩部分組成,形式如下:
選擇器{樣式}
在{}之前的部分就是“選擇器”。
“選擇器”指明了{}中的“樣式”的作用對象,也就是“樣式”作用于網頁中的哪些元素。
由此可見,“選擇器”的功能是從“網頁所有的元素”當中選擇“部分元素”,因此我們把它稱為“選擇器”。
“選擇器”的種類
前面講了,“選擇器”的功能是指明“樣式”作用的“目標元素”。
那如何才能指明這些“目標元素”呢。
我們知道,一個“元素”有“標簽名”,“class”,“id”這幾個常見屬性,那么就可以從這幾個屬性出發來確定“目標元素”.由此也就誕生了幾個最常用的“選擇器”–標簽選擇器,類選擇器,id選擇器
常用的“選擇器”
標簽選擇器
使用“元素”的“標簽名”作為“選擇器”
書寫形式:
標簽名{}
例如:p{},表示{}中的“樣式”的將會作用于“標簽名”為"p"的元素
類選擇器
依據“元素”的“class”屬性來編寫“選擇器”
書寫形式:
.class值{}
解釋:點號.后面跟著某些元素的“class”值
例如:.高亮顯示{},表示{}中的“樣式”的將會作用于“class”取值為"高亮顯示"的元素
舉例:
<style>
.高亮顯示{color:red;}
</style>
<a class=”高亮顯示”>a1</a>
<a>a2</a>
<p>p1</p>
<p class=”高亮顯示”>p2</p>
解釋:“樣式”會作用于第一個"a"元素和第二個"p"元素.因為它們的“class”屬性值都是"高亮顯示"
id選擇器
依據“元素”的“id”屬性來編寫“選擇器”
書寫形式:
#id值{}
解釋:井號#后面跟著某個元素的“id”值
例如:#文章標題{},表示{}中的“樣式”的將會作用于“id”取值為"文章標題"的元素
舉例:
<style>
#文章標題{color:red;}
</style>
<p>p1</p>
<p id=”文章標題”>p2</p>
<p>p3</p>
解釋:“樣式”會作用于第二個"p"元素.因為它的“id”屬性值是"文章標題"
“標簽選擇器”和“類選擇器”可以結合使用,形式如下:
標簽名.class值{}
例如:p.高亮顯示{},表示{}中的“樣式”的將會作用于“標簽名”為"p"并且“class”屬性值為"高亮顯示"的元素
新聞熱點
疑難解答