《CSS權威指南》 筆記2(選擇器)

2021-07-13 07:55:31 字數 918 閱讀 5591

第二章:選擇器

css主要優點之一:很容易地向所有同型別的元素應用一種樣式。

元素選擇器:文件的元素是最基本的選擇器  html

配選擇器

對所有元素進行匹配,新增樣式   *

結合選擇器

h1, h2, h3, h4, h5, h6

類選擇器:基本格式 .box  可以忽略通配選擇器。

不同元素中同乙個class有不同的樣式: p.info  span.info

多類選擇器:

11111

2222

3333

.a 

.b .a.b

最終11111的顏色為綠色。但是這個規則會導致其他含有a b兩個class的元素的樣式的改變。

屬性選擇器:img[alt]

對於這個屬性選擇器,我通常用來區分表單的input元素 ,如input[type="text"]   input[type="number].

也可以根據多個屬性進行選擇。

根據具體屬性值選擇:為了進一步縮小選擇範圍,可以通過加上某乙個屬性的值。  img[ src="../img/icon.png"]

(注意:這種格式要求必須與屬性值完全匹配,若有多個屬性值,必須全部將屬性值寫上去。)

根據部分屬性值選擇:如選擇class屬性包含a的p元素   p[class~="a"] {}

css權威指南(2) 選擇器

類選擇器 類選擇器的用法很簡單,個人最常用的寫法如下 warning 今天看了書,發現還有這種寫法 p.warning選擇器會匹配class屬性包含warning的所有p元素,其他任何型別的元素都不會匹配,不管是否有此class屬性,color red warning class warning h...

css權威指南學習筆記 css選擇器

1,選擇器 選擇器的一些基本常用規則基本都記得,w3c上都有,平時也常用,不常用的一些後代選擇器經常就忘記了。一些歸納一下後代選擇器,加深一下印象 a 子選擇器 p a a是直接是p的兒子,而不是孫子曾孫子。就是兒子,只有一代關係。b 相鄰兄弟選擇器 h1 h1 和 必須擁有相同的父元素。他們是同胞...

CSS權威指南 偽元素選擇器

css2.1定義了四個偽元素 設定首字母樣式 first letter 設定第一行樣式 first line 設定之前樣式 before 設定之後樣式 after 所有偽元素都必須放在出現該偽元素的選擇器的最後面。設定首字母樣式 用於設定第乙個塊級元素首字母的樣式,而且僅對該字母設定樣式 最好的我們...