HTML中的各種選擇器學習筆記

2021-10-02 08:37:10 字數 1595 閱讀 8725

html中的各種選擇器學習筆記

作用:通過元素選擇器可以選擇頁面中的所有指定元素

語法:標籤名{} id選擇器

通過元素的id屬性值選中唯一的元素

語法:#id屬性值{}

通過元素的class屬性值選中一組元素

語法:.class屬性值{}

class屬性可重複,可同時為乙個元素設定多個屬性值,多個值之間用空格隔開

通過選擇器分組可以同時選中多個選擇器對應的元素

語法:選擇器1,選擇器2,選擇器n{}

可以選中頁面所有的元素

語法:*{}

可以選中同時滿足多個選擇器的元素

語法:選擇器1選擇器2選擇器n{}

選中指定元素的指定後代元素

語法:祖先元素 後代元素{}

選中指定父元素的指定子元素

語法:父元素》子元素{}

選擇器:first-child 可以選中第乙個子元素

選擇器:last-child 可以選中最後乙個子元素

選擇器:nth-child 可以選中任意位置的子元素

選擇器:nth-child(even) 可以選中奇數個的子元素

選擇器:nth-child(odd) 可以選中偶數個子元素

選擇器:first-of-type

選擇器:last-of-type

選擇器:nth-of-type

和:first-child這些類似,不過child是所有子元素中排列

type是當前型別子元素中排列

偽類專門用來表示元素的一種特殊的狀態

eg:選擇器:hover{} 滑鼠移入的狀態

選擇器:hover{} 獲取焦點後的狀態

p::selection{} 為p標籤中選中的內容使用樣式

***

使用偽元素來表示元素中的一些特殊的位置

eg:p:first-line{} 選中p中的第一行

p:before 表示元素最前邊的部分,通常與content結合使用

p:after 表示元素最後邊的部分,通常與content結合使用

可以根據元素中的屬性或屬性值來選取指定元素

語法選擇器[屬性名]{} 選取含有指定屬性的元素

選擇器[屬性名="屬性值"]{} 選取含有指定屬性的元素

選擇器[屬性名^="屬性值"]{} 選取屬性值以指定內容開頭的元素

選擇器[屬性名$="屬性值"]{} 選取屬性值以指定內容結尾的元素

選擇器[屬性名*="屬性值"]{} 選取屬性值以包含指定內容的元素

eg:p[title]

可以選中乙個元素後緊挨著的指定的兄弟元素

語法:前乙個+後乙個

eg:span+p{}

可以從已選中的元素中剔除出某些元素

語法::not(選擇器)

HTML學習筆記 選擇器

1 id選擇器 交叉選擇器 群組選擇器 子代選擇器 無標題文件 title style type text css pli two lanse 交叉選擇器 li.lanse 群組選擇器 test,seven 子代選擇器 li span style head body font color blue ...

HTML學習筆記 選擇器

1 id選擇器 交叉選擇器 群組選擇器 子代選擇器 無標題文件 title style type text css pli two lanse 交叉選擇器 li.lanse 群組選擇器 test,seven 子代選擇器 li span style head body font color blue ...

各種選擇器

交集選擇器 p.red 選擇並集選擇器 div,p,span,choose,idname 後代選擇器 div p 選中div下的p標籤 choose p 選中.choose類下的p標籤 子代選擇器 僅限於第一代 choose h3 屬性選擇器 選擇具有某種屬性的標籤 a title 選擇帶title...