#123{ } id選擇器, 如 a id = 123 href=http:// 和123css文件制定的樣式一樣 /a id可以是任何字母或者數字. 具有唯一性,這是規范.
.abc{ } 凡是標簽里面有 >

p.abc{ } 限定abc類里面的p標簽生效

例子:

html文件

css文件

效果

>

一個標簽引用多個類樣式, 用空格隔開兩個類樣式

[href]{ } 這是屬性選擇器, 花括號里面的屬性作用域全部的超鏈接

[type=password] { } 這是更進一步的規定, 只能是type屬性, 而且屬于密碼type類型才應用css, 其他type無效

[href^=http] 屬性是href且 值以http開頭的, 應用css.
[href$=.cn] 屬性是href且 值以.cn結尾的, 應用css

[href*=baidu] 屬性值包含有baidu 的字符片段, 應用css 用于模糊搜索

html文件

css文件

效果

其他選擇器:

[class ~=def] 某個屬性的值含有復雜或者多個字符, 匹配到指定字符的應用css

[lang|= en ] 某個屬性的值, 含有分隔符號- , 此方法查找比較省性能.機器容易找到.

p b{ } 模糊 指定某個標簽的子標簽作為css應用對象, 除了指定的子標簽,其他父標簽等不受影響

p b { } 精確 和上面一個不同的是, 指定作用于p下面的b子標簽. 如果p下面有一層span, span下面才有b, 那么p b要改成p span b

p+b{ } 匹配p元素和旁邊的b元素

p~b{ } 匹配p 到b (包括p和b)的所有元素, 兩點間所有元素.

::first-line{ } 塊級首行應用. 窗口拉伸導致第一行的字數會變化, 但是已經規定了first-line要應用css, 所以無論窗口怎么拉動,
紅色的字會隨著窗口大小的變化而換行填紅. first-line 對于html第一行, 或者 div 的第一行有效果, 但是對于span這種內聯是沒有效果的.

p::first-line{ } 在p的首行才有效果.

上圖的下半段是 span 括起的內容.

::first-letter 塊級首字符應用css

/

a::before 插入指定字符串到標簽前

a::afoter 插入指定字符串到標簽后

html文件

css文件

點擊前

點擊后

以上就是Css選擇器的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。