CSS樣式選擇器

2021-08-15 18:54:32 字數 1891 閱讀 6710

樣式選擇器:

每一條css樣式宣告(定義)由兩部分組成,形式如下:

選擇器類選擇器:

以英文圓點開頭,不可以使用數字或中文起名

使用方法:

1.使用class="類選擇器名"為標籤設定乙個類,如下:

膽小如鼠

2.設定類選擇器css樣式,如下:

.stress

id選擇器:

id選擇器類似於類選擇器

1.為標籤設定id="id名稱" 而不是class="類名稱"

2.id選擇符的前面是#,而不是.

使用方法:

1, 哈哈哈

2,在標籤中寫入# set

類和id選擇器的區別:

相同點:

可以應用於任何元素

不同點:

1、id選擇器只能在文件中使用一次。與類選擇器不同,在乙個html文件中,id選擇器只能使用一次,而且僅一次。而類選擇器可以使用多次。

2、可以使用類選擇器詞列表方法為乙個元素同時設定多個樣式。我們可以為乙個元素同時設多個樣式,但只可以用類選擇器的方法實現,id選擇器是不可以的(不能使用 id 詞列表)。

總結:

id就像身份證號碼,是唯一的,該身份證號碼就能代表你。乙個人不能有兩個身份證號碼,也不能乙個身份證號碼表示兩個人。

而class就像暱稱,該暱稱也能代表你。乙個人可以有多個暱稱,也可以多個人用同個暱稱。

子選擇器:

即大於符號(>),用於選擇指定標籤元素的第一代子元素

使用方法:

.food>li//會使class名為food下的子元素li 加入紅色實線邊框

包含 後代選擇器:

包含選擇器,即加入空格,用於選擇指定標籤元素下的後輩元素

如:.first span 會使名為「first」的標籤所包含的span 變為紅色

子選擇器與後代選擇器的區別:

子選擇器僅是指直接後代(第一代後代)子選擇器是痛過「>」進行選擇

後代選擇器指所有子後代元素,後代選擇器通過空格來進行選擇 

總結:>作用於元素的第一代後代,空格作用於元素的所有後代。">"只需要作用於「兒子」,而「空格」則是子子孫孫都被作用了。。。

通用選擇器:

使用*號指定,他的作用是拼配html中所有標籤元素,

使用方法:

* 偽類選擇符:

允許給html不存在的標籤設定樣式,比如給html中的乙個標籤元素的滑鼠滑過的狀態來設定演的。

使用方法:

a:hover//可以使標籤為中的內容變為紅色

分組選擇器:

可以為html中多個標籤設定同乙個樣式,

使用方法:

h1,span

相當於h1

span

總結:類選擇器, .class{},在標籤內定義class="",屬圖形結構。

id選擇器,#id{}, 在標籤內定義id="",有嚴格的一一對應關係。

子選擇器, .span>li{},作用于父元素span類下一層的li標籤。

包含選擇器,.span li{},作用于父元素span下所有li標籤。

通用選擇器,*{},匹配所有html的標籤元素。

偽類選擇符:它允許給html不存在的標籤(標籤的某種狀態)設定樣式,比如說我們給html中的乙個標籤元素的滑鼠滑過的狀態來設定字型顏色。

分組選擇器:通過分組選擇符(,)將兩個選擇器壓縮為一組

類選擇器, .class{},在標籤內定義class="", 屬圖形結構。

id選擇器,#id{}, 在標籤內定義id="",有嚴格的一一對應關係。

子選擇器, .span>li{},作用于父元素span類下一層的li標籤。

包含選擇器,.span li{},作用于父元素span下所有li標籤。

通用選擇器,*{},匹配所有html的標籤元素。

CSS樣式選擇器

1.css 選擇器 1 標記選擇器 選擇器 用來指定確定標記的樣式 如 類別選擇器 class 類別名稱 如 對應的 class 選擇器 id選擇器 id id選擇器 如 對應的 id選擇器1id 選擇器2 2.集體宣告 對應的 集體宣告 h4集體宣告 h5集體宣告 p1集體宣告 p2集體宣告 p3...

CSS樣式 選擇器

css的選擇器 1 標籤選擇器 div p a input span h1 divp我是段落 2 類選擇器 class 類選擇器樣式 class stylediv我是div容器 我是div中的段落 3 id選擇器 id id選擇器樣式 id stylep我是div容器 4 並列選擇器 並列選擇器樣式...

CSS 樣式規則選擇器

主要有三種 html選擇器 class選擇器 id選擇器 1.html選擇器 1 2 3 type text css 4 p 8 style 9 head 10 11 12 p 這裡應用樣式表 p 13 body 14 html 也就是說選擇器是html標籤 2.class選擇器 1 2 head ...