學習選擇器

2021-10-11 18:34:50 字數 2863 閱讀 7401

選擇器的功能:

選中要新增樣式的標籤元素。

什麼是標籤選擇器?

通過標籤名直接選擇相應的標籤。

不管有多複雜的巢狀關係,標籤的位置就算藏得很深,依然可以被標籤選擇器命中。

格式:標籤名

標籤選擇器的作用:

1.利用標籤選中所有的特性,進行預設樣式的清除。

2.複雜選擇器中一部分使用。

我是div盒子

我是段落3

我是段落

我是段落2

id選擇器作用:

選中頁面中唯一的乙個標籤。

格式:#id值

【注】:

1.id值必須是唯一的,在乙個頁面中只能出現一次。如果多次出現重複的id值是不符合規範的。

2.所有的標籤都有id屬性。id命名的規範:由字母,下劃線,中劃線,數字組成。不能以數字開頭。

3.見名知意。不要起毫無意思的名字。

5.下劃線寫法:search_button 多個單詞,從第二個單詞開始,每個單詞的前面新增一條下劃線。

【注】:id選擇器盡量不要在css中使用,而是配合js使用。

我是div1

我是div2

我是div3

年輕人不講武德

我大意了沒有閃

類選擇器:

通過標籤中的class屬性來選擇標籤

格式:

.class值

優點:可以選擇一部分標籤,設定相同的樣式。

【注】1.class值可以不唯一。類選擇器選中的是擁有相同class值得標籤元素。

2.乙個標籤可以擁有多個class值。

3.命名規則與id相同。

類上寫樣式,id寫行為。

我是div1

我是div2

我是div3

年輕人不講武德

我大意了沒有閃

後代選擇器:

通過標籤的巢狀關係,來縮小選擇範圍,在範圍內查詢相關的元素。

格式:選擇器1 選擇器2

選擇器1必須是選擇器2的祖先元素。

ie7開始相容,ie6不相容。

【注】1.定義時,選擇器之間使用空格隔開。空格左側必須是右側的祖先元素。

2.當要把某些元素中的某些元素進行樣式修改時,就要想要使用後代選擇器。

我是span標籤

我是span標籤2

我是span標籤3

子代選擇器:

通過標籤間的巢狀關係,來選中相應標籤的子元素。

格式:選擇器1>選擇器2

【注】>左右兩邊的關係必須是父子關係。

我是span標籤

我是span標籤2

我是span標籤3

交集選擇器

既滿足條件1,又滿足條件2.

格式:選擇器1選擇2

【注】1.交集選擇器如果是標籤選擇器與類選擇器的混寫,則必須將標籤選擇器放在前面。

2.連續交集 既滿足條件1,又滿足條件2,還滿足條件3.

我是span標籤

我是span標籤2

我是span標籤3

交集選擇器

既滿足條件1,又滿足條件2.

格式:選擇器1選擇2

【注】1.交集選擇器如果是標籤選擇器與類選擇器的混寫,則必須將標籤選擇器放在前面。

2.連續交集 既滿足條件1,又滿足條件2,還滿足條件3.

我是span標籤

我是span標籤2

我是span標籤3

序選擇器

first-child

判斷當前元素是否為父元素的第乙個子元素,如果是,則選中。

last-child

判斷當前元素是否為父元素的最後乙個子元素,如果是,則選中。

only-child

判斷當前元素是否為父元素的唯一乙個子元素,如果是,則選中。

序選擇器

first-child

判斷當前元素是否為父元素的第乙個子元素,如果是,則選中。

last-child

判斷當前元素是否為父元素的最後乙個子元素,如果是,則選中。

only-child

判斷當前元素是否為父元素的唯一乙個子元素,如果是,則選中。

jQuery選擇器之全選擇器( 選擇器)

在css中,經常會在第一行寫下這樣一段樣式 萬用字元 意味著給所有的元素設定預設的邊距。jquery中我們也可以通過傳遞 選擇器來選中文件頁面中的元素 描述 拋開jquery,如果要獲取文件中所有的元素,通過document.getelementsbytagname 中傳遞 同樣可以獲取到 不難發現...

jQuery選擇器之全選擇器(選擇器)

jquery選擇器之全選擇器 選擇器 在css中,經常會在第一行寫下這樣一段樣式 萬用字元 意味著給所有的元素設定預設的邊距。jquery中我們也可以通過傳遞 選擇器來選中文件頁面中的元素 描述 拋開jquery,如果要獲取文件中所有的元素,通過document.getelementsbytagna...

Css選擇器 層次選擇器(關係選擇器)

1.e f 匹配 e 元素下所有的子元素 f 後代選擇器 eg css.box a匹配 box 下所有的子元素 a 2.e f 匹配 e 元素下第一級子元素 f 子選擇器 eg css.box a匹配 box 下第一級子元素 a 3.e f 匹配 e 元素後面緊鄰的哪乙個 f 元素 有且僅有乙個 相...