4 2 CSS選擇器(重點)(裡有團隊約定)

2022-06-14 02:06:08 字數 739 閱讀 5921

選擇器的作用:找到特定的html頁面元素

選擇器是選擇標籤用的,把我們想要的標籤選擇出來。

選擇器分為基礎選擇器 和  復合選擇器

8.1 基礎選擇器 

8.1.1 標籤選擇器  div   能快速為頁面中同型別的標籤統一樣式,但是不能設計差異化樣式 

8.1.2 類選擇器[多次重複使用].green            class="green">div>  可以為元素物件定義單獨或相同的樣式。可以選擇乙個或者多個標籤,不要用純數字、中文命名

8.1.3 類選擇器(多類名)(不同類用空格隔開) class="orange font100">div>

8.1.4 id選擇器[唯一](經常用於js上)  #pink   id="pink">p>

8.1.5 萬用字元選擇器[匹配所有頁面元素,降低頁面響應速度,不建議隨便使用]  *   選擇所有的標籤

團隊約定:

選擇器 . 盡量少用通用選擇器 *

. 盡量少用 id 選擇器

. 不使用無具體語義定義的標籤選擇器 div span

/* 推薦 */

.jdc {}

li {}

p {}

/* 不推薦 */

* {}

#jdc {}

div {} 因為div 沒有語義,要盡量少用

偽類選擇器 重要

鏈結偽類選擇器注意事項 為了確保生效,請按照 lvha 的循順序宣告 link visited hover active。記憶法 love hate 或者 lv 包包 hao 因為 a 鏈結在瀏覽器中具有預設樣式,所以我們實際工作中都需要給鏈結單獨指定樣式 下面是 順序宣告 link visited...

css選擇器 CSS選擇器總結

在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...

CSS選擇器 復合選擇器

選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...