前端css常用的選擇小匯

2022-10-11 14:30:13 字數 1723 閱讀 6774

要使用css對html頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到css選擇器。選擇器就是選擇器用來指定樣式的作用範圍。

類選擇器：類選擇器在css中比較常見，首先要在普通標籤中設定乙個類，類名不可為中文，然後在 style 標籤中新增該類名的樣式。類選擇器在選擇器前要加乙個點」.」

例子：

type="text/css">


.shasha


head>


class="shasha">標題h1>


class="shasha">第一段p>


第二段p>


body>
樣式會作用於class型別為shasha的標籤內容上，類名可以隨便取，別用中文。

id選擇器id選擇器與類選擇器大致相同，不同的是：

例子：

type="text/css">


#shasha2


head>


id="shasha2">標題h1>


id="shasha2">第一段p>


第二段p>


body>
子選擇器：小於這個類的子標籤

例子：

.shasha>li
所有後代標籤選擇器小於號代表第乙個後代，空格可以指定其所有後代標籤

例子：

.shasha


li
通用選擇器通用選擇器，選擇html文件中的所有標籤。

*
偽類選擇符給標籤的某乙個狀態設定乙個類，例如超連結標籤可以設定為滑鼠停留後顯示別的顏色。

最常用的也就是a:hover

a


:hover
分組選擇符選擇符中間以逗號隔開，等於同時給多個選擇符新增樣式

.shasha,#shasha2


span
直接以html中的標籤作為選擇器：如果設定 html 的樣式，選擇器通常將是某個 html 元素，比如 p、h1、em、a，甚至可以是 html 本身，也稱元素選擇器

tye="text/css">


phtml 


h1 h2 


style>
普通標籤選擇：以html中的標籤選擇

類選擇器：給標籤新增乙個類屬性，根據類屬性新增樣式，可以使用多個類名，多次使用

id選擇器：給標籤新增乙個id屬性，id必須是要唯一的，乙個文件只能使用一次id選擇器。

子選擇器：用小於號分隔，指其選擇器中的子標籤

包含選擇器：用空格分隔，指其選擇器中的所有後代標籤

通用選擇器：對html中所有的標籤有效

偽類選擇器：給標籤的乙個動作新增乙個選擇器

分組選擇器：逗號分隔，同時作用給多個標籤

css 選擇器參考手冊：

文末福利：

image

前端css常用的選擇小匯

要使用css對html頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到css選擇器。選擇器就是選擇器用來指定樣式的作用範圍。類選擇器 類選擇器在css中比較常見，首先要在普通標籤中設定乙個類，類名不可為中文，然後在 style 標籤中新增該類名的樣式。類選擇器在選擇器前要加乙個點 例子 ...

前端css常用的選擇小匯

要使用css對html頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到css選擇器。選擇器就是選擇器用來指定樣式的作用範圍。類選擇器 類選擇器在css中比較常見，首先要在普通標籤中設定乙個類，類名不可為中文，然後在 style 標籤中新增該類名的樣式。類選擇器在選擇器前要加乙個點 例子 ...

前端css常用的選擇小匯

要使用css對html頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到css選擇器。選擇器就是選擇器用來指定樣式的作用範圍。類選擇器 類選擇器在css中比較常見，首先要在普通標籤中設定乙個類，類名不可為中文，然後在 style 標籤中新增該類名的樣式。類選擇器在選擇器前要加乙個點 例子 ...