CSS3 教程2 CSS選擇器

2022-06-10 21:45:10 字數 1429 閱讀 1670

作用:選擇頁面上的某乙個或者某一類元素

整個html屬於乙個dom樹

標籤選擇器

標籤選擇器會選中頁面中所有該標籤的元素

弊端:所有該標籤會被同時修改樣式

類選擇器 class

給標籤加上class屬性,然後選擇器用.class的格式

好處:可以多個標籤歸類,是同乙個class

示例:

id選擇器

給標籤寫上id,然後選擇器使用#id

id必須保證全域性唯一,適用於精準定位網頁上的某些元素

示例:

補充思考:如果多個選擇器選中同樣的標籤,哪個生效?

id選擇器 > 類選擇器 > 標籤選擇器

注:想要修改css可以在瀏覽器的除錯狀態下測試,完成之後再把**複製到css檔案中

小結:

對html檔案的結構,當成一顆樹來看

後代選擇器 : 在某個元素的後面,所有的後代

/*後代選擇器*/

body p

子選擇器 :元素後面的直接孩子

/*子選擇器*/

body>p

/*某個元素下方的乙個*/

.active + p

通用兄弟選擇器 :同輩的下面所有

/**/

.active~p

偽類:加了一些條件,起過濾的作用

比如滑鼠移動到位置上就會變色的鏈結

例子:

ul li:first-child

ul li:last-child

/*選擇父級元素的第乙個元素,並且使當前元素才生效*/

p:nth-child(1)

p:nth-of-type(1)

相當於將標籤、id、類別選擇器結合,功能比較強大

/*

屬性名 = 屬性值(正規表示式)

= 表示絕對等於

*= 包含

^= 以xx開頭

$= 以xx結尾

*/a[class="class1"]

/*a[id] 存在id屬性的

a[class] 存在class屬性的

*/

css,js,jquery,vue都會用到,甚至寫爬蟲的時候也會用到,是整個技術棧的核心

css3 選擇器 CSS3選擇器

子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...

CSS3學習筆記 2 CSS中的選擇器 上

css選擇器即是定位到想要選擇的元素,然後對其配置樣式。目前已經有css3選擇器了,不過使用較多的還是css1和css2,而css3用於擴充套件。選擇器分類 基本選擇器 復合選擇器 偽選擇器 還分為偽元素和偽類 基本選擇器 即使用簡單且頻率高的一些選擇器。1.通用選擇器 匹配所有html元素,包括和...

css3 選擇器 CSS3選擇器詳解

css3在css2基礎上,增強或新增了許多特性,彌補了css2的眾多不足之處,使得web開發變得更為高效和便捷。比如說,同樣是乙個頭像,可能在低版本的瀏覽器中,頭像方的 在高版本的瀏覽器中,頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題,為了避免因相容性帶來的干擾...