HTML之常用選擇器

2021-09-23 01:47:14 字數 1462 閱讀 1671

瀏覽器為html文件內標籤名與標籤選擇器名相同的標籤元素新增css樣式;

語法格式:

標籤選擇器名
示例:

鄭州大學

瀏覽器為id標籤屬性的屬性值與id選擇器名相同的標籤元素新增css樣式;

語法格式:

# id選擇器名
示例:

鄭州大學

執行結果與上述結果一致;

備註:1、id標籤屬性的屬性值不能以數字開頭;

2、id標籤屬性的屬性值在html文件中必須唯一;

瀏覽器為class標籤屬性的屬性值與類選擇器名相同的標籤元素新增css樣式;

語法格式:

類選擇器名
示例:

鄭州大學

鄭州大學

執行結果

在控制台檢視,第乙個鄭州大學的font-size是12px,第二個鄭州大學是36px;

萬用字元選擇器匹配html文件中的任何html元素;

語法如下:

*
示例(以類選擇器中的html語句為基礎):

此處是給html檔案都加了padding和margin屬性,展示效果不明顯;關於padding和margin會在後續部落格中具體說明;

如果html文件多個css樣式表內的部分樣式相同,則可以通過定義乙個分組選擇器以簡化css樣式**, 該選擇器的選擇器名由多個選擇器組成,使用逗號分隔;

語法格式:

選擇器1,選擇器2,選擇器3…
例如在上乙個類選擇器的例子中,就可以把相同的屬性寫在分組選擇器中;比如給兩個標籤都加乙個邊框

.zz,span
備註:分組選擇器,是將選擇器組合到一起;換句話說大部分選擇器都可以塞到分組選擇器中

又稱為包含選擇器,用於為特定的html子元素新增css樣式;

語法結構:

父代選擇器1 子父代選擇器2 子父代選擇器3 ….子代選擇器
示例

執行結果

補充一點:

關於優先順序的問題:

id選擇器》class選擇器》標籤選擇器

驗證方式給出一段**,讀者自行驗證

鄭州大雪

HTML常用選擇器

在html中常見選擇器有 元素選擇器 id選擇器 類選擇器 class 選擇器分組 並集選擇器 通配選擇器 復合選擇器 交集選擇器 元素選擇器 作用 通過元素選擇器可以選擇頁面中的所有指定元素。語法 標籤名 例如 pid選擇器 作用 通過元素的id值選中唯一的元素。語法 id屬性值 例如 p1注意 ...

html 選擇器之屬性選擇器

屬性選擇器的主要作用個人的理解就是對帶有指定屬性的元素設定css樣式。使用css3的屬性選擇器,可以指定元素的某個屬性,也可以指定某個屬性和這個屬性所對應的值。css3的屬性選擇器主要包括下面幾種 e attr 只使用屬性名,但沒有確定任何屬性值 e attr value 指定屬性名,並指定了該屬性...

html 選擇器之基礎選擇器

我把css選擇器分開成三部分,第一部分是我們常用的部分,我把他叫做基本選擇器 第二部分我把他稱作是屬性選擇器,第三部分我把他稱作偽類選擇器 一 基礎選擇器 1.萬用字元 選中所有的元素 2.元素選擇器 e 乙個元素作為乙個選擇器,div,ul,dd,span等等 3 類選擇器 class 定義cla...