瀏覽器為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...