起名與選擇器 (總結類 持續更新系列)

2022-01-22 10:06:20 字數 1133 閱讀 2078

廢話沒有,直接幹活

一、起名方式:1.元素自身的標籤名;

2.利用 class 屬性自定義名稱;

3.利用 id 屬性自定義名稱。共三種,其中class使用居多。

起名規範:不能用漢字起 第乙個字母不能是特殊符號 第乙個字母必須是英文本母。

二、選擇器:注:選擇器使用於head部分的標籤中或外部引入的css檔案中。

1.標籤選擇器,不必多說,直接輸入元素名;

2.class選擇器,在其自定義名稱前加上點 . 即可;

3.id選擇器,在其自定義名稱前加上# 即可;在此標註:標籤的權重為1,class的權重為10,id的權重為100;行間樣式權重1000;在屬性值後加 !important  權重無限大。

4.子代選擇器,用 > 將父級和子級連線起來使用,標籤巢狀只有一層關係。

5.後代選擇器,用乙個 空格 將兩者連線起來,前者包含後者,標籤巢狀有多層關係(包含一層)。

6.交集選擇器,將class名與id名寫在一起,將其全部選中。

7.萬用字元選擇器,直接輸入 * 即可,意為所有的元素。(不建議使用,過於省事,會加大瀏覽器的負擔)

8.並集選擇器,用逗號將需要選中的兩個或兩個以上的名稱隔開即可。

9.偽類選擇器,只要選擇器後帶冒號 :    都可以說它是偽類選擇器。

例如:a:link{}、a:visited{}、a:hover{}、a:active{}、p:before{}、p:after{} 等。

10.結構選擇器,格式(例子):ul li:nth-of-type(1)  表示選中的是ul下面的第乙個li,後也可跟其它選擇器。

Css3屬性選擇器與偽類選擇器

其特點是通過屬性來選擇元素,具體有以下 5 種形式 e attr 表示存在attr 屬性即可 div class e attr val 表示屬性值完全等於val div class mydemo e attr val 表示的屬性值裡包含val 字元並且在 任意 位置 div class mydemo...

CSS的結構偽類選擇器 child系列

前端學習經驗 7 結構偽類選擇器 減少類選擇器和id選擇器的定義 child系列 first child 選擇父級元素中的第乙個子元素,必須是子元素中的第乙個元素 父元素 子元素 第乙個 標籤 first child如 子元素1 子元素3 子元素4 子元素5 子元素5.1 子元素5.2 子元素5.3...

CSS的結構偽類選擇器 type系列

前端學習經驗 8 type系列 first of type 選擇同型別的標籤或選擇器中第乙個元素。父元素 標籤或選擇器 first of type如 子元素2 子元素3 子元素4子元素7 子元素8 子元素10 子元素11 子元素12 first of type 選擇同型別的標籤或選擇器中最後乙個元素...