十個常用的 CSS Selector

2022-07-03 07:39:13 字數 2162 閱讀 1034

格式:#id值

用於選取擁有 id 這個屬性,並且 id 屬性值相等的 html 元素,例:

hello world

#the-id
id 在整個 html 頁面內必須是唯一的,乙個 id 只能用在乙個 html 元素上,而乙個 html 元素也只能有乙個 id

格式:.class值

用於選取擁有 class 這個屬性,並且 class 屬性值相等的 html 元素,例:

hello world

.the-class 

.blue

乙個 class 可以套用到多個 html 元素上,而乙個 html 元素也可以擁有多個 class

格式:tag名(直接使用 tag 名)

用於選取 tag 名相同的 html 元素,例:

hello world

h1 

div.container

格式:selectora selectorb

用於選取 selectora 的 html 元素裡面的所有 selectorb 的 html 元素

div 

.container div

注意:選取的元素並不包括 selectora 自身

格式:selectora > selectorb

用於選取 selectora 的 html 元素裡面的第一層的所有 selectorb 的 html 元素

div 

.container > div

格式:selectora + selectorb

用於選取 selectora 的 html 元素與它自身處在同一層緊接的 selectorb 的 html 元素

div 

.container + div

如果 selectora 緊接的元素不是 selectorb,則不會選取到任何元素

格式:selectora ~ selectorb

用於選取 selectora 的 html 元素與它自身處在同一層之後所有的 selectorb 的 html 元素

div 

.container ~ div

儘管其中有其他的 html 元素隔開,只要是與 selectora 處於同一層都會生效

格式:*

選取任何 html 元素,一般與其他 selector 配合使用

(div tag)

(p tag)

(div tag)

div, p 

.container ~ *

格式:selector[屬性名] / selector[表示式]

用於選取 selector 的 html 元素並且符合屬性表示式的元素

表示式效果

=完全相等

^=以?開頭的值

$=以?結尾的值

*=模糊搜尋

愛奇藝優酷

a 

a[title]

a[href*="www"]

偽類,用於選擇普通選擇器不能表達的訊息

例1:

a 

a:visited

a:hover

例2:

div 

.container div:nth-child(even)

偽類文件

常用的十個希臘字母

1 lf alpha 阿爾法 角度,係數,角加速度 2 be t beta 貝塔 畢塔 磁通係數,角度,係數 3 g m gamma 伽瑪 甘瑪 電導係數,角度,比熱容比 4 delt delta 德爾塔 岱歐塔 變化量,化學反應中的加熱,屈光度 5 eps l n epsilon 艾普西龍 對數之...

Linux 十個常用命令

10個常用命令 1 mkdir make directories 用來建立乙個新的子目錄。使用方式 mkdir p name 引數 p 確保目錄名稱存在,不存在的就建乙個。例子 在工作目錄下建立乙個名為hello的子目錄 mkdir hello rmdir remove directors 用來刪除...

人生的十個不要

一不要等到想要得到愛時才學會付出 人生就像一場戲,在等待中錯過了美麗。正如歌中所唱 該出手時就出手。因為幸福就在你身邊。當你付出時,愛以從你身邊輕輕劃過,留下的是悔恨 遺憾。二不要等到孤單時才想念起你的朋友 什麼是朋友?真正的朋友永遠不會離棄你。人生得一知己足矣,孤獨時 彷徨時,朋友是你最忠實的聽眾...