返回首頁
當前位置: 主頁 > 網絡編程 > Asp實例教程 >

css選擇器的使用方法

時間:2018-02-25 23:37來源:知行網www.aotfjk.live 編輯:麥田守望者

什么是css選擇器

簡單而言:從HTML文檔中選擇一系列元素

div {

color: #f00;

}

這就是一個選擇器,表示的意思是 選擇所有標簽名為 div 的元素,并應用后面的樣式組,字體顏色為紅色。

舉個通俗例子,高中老師要帶一部分同學去參加活動,那該挑哪些同學呢?老師給的條件是:所有 數學成績高于90分 的同學跟我去參加活動。

那這里面呢 ‘數序成績高于90分’ 就是一個選擇器。

有哪些選擇器呢

我們先假定html結構如下:

<div id="header">

<div class="header-title"></div>

<div class="header-close"></div>

</div>

id選擇器

#header {

color: #f00;

}

很清晰了,就是通過#id屬性來選擇最外層的div元素

標簽選擇器

div {

color: #f00;

}

通過div標簽名稱來選擇所有的div元素

class類選擇器

.header-title {

color: #f00;

}

.header-close {

color: #f00;

}

通過.class屬性值來選擇所元素

后代選擇器

#header .header-title {

color: #f00;

}

通過空格來組合選擇器,從而選擇相應的元素

子元素選擇器

#header>.header-title {

color: #f00;

}

通過>來組合選擇器,從而選擇相應的元素

兄弟節點選擇器

.header-title+.header-close {

color: #f00;

}

通過+來組合選擇器,從而選擇相應的元素

屬性選擇器

div[id="header"] {

color: #f00;

}

通過[屬性名="屬性值"]來選擇相應的元素

偽類選擇器

div:hover {

color: #f00;

}

:hover 就是一種偽類選擇器,標識當鼠標挪到div元素上的時候

同理還有

:first-child

:active

等等

偽元素選擇器

div:after {

color: #f00;

}

:after

:before

都是偽元素

------分隔線----------------------------
標簽(Tag):css 選擇器 css選擇器
------分隔線----------------------------
推薦內容
猜你感興趣
湖南刘雪龙黑彩