**關鍵字: **

** 1.css選擇器使用場景; **

** 2.css選擇器優先級; **

3. first-child和:first-of-type

1.class 和 id 的使用場景?

class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個元素中使用。

class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示

在以下的例子中，所有擁有 center 類的 HTML 元素均為居中

.center

{

text-align:center;

}

標題居中

段落居中。

你也可以指定特定的HTML元素使用class。

在以下實例中, 所有的 p 元素使用 class="center" 讓該元素的文本居中:

p.center

{

text-align:center;

}

這個標題不受影響

這個段落居中對齊。

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。

HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。

以下的樣式規則應用于元素屬性 id="para1":

實例

#para1

{

text-align:center;

color:red;

}

Hello World!

CSS選擇器常見的有幾種?

1

2

3

重點說下div標簽

可定義文檔中的分區或節(division/section)。標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。

如果用 id 或 class 來標記

，那么該標簽的作用會變得更加有效。

用法

是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 固有的唯一格式表現。可以通過 的 class 或 id 應用額外的樣式。

不必為每一個

都加上類或 id，雖然這樣做也有一定的好處。

可以對同一個

元素應用 class 或 id 屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，class 用于元素組(類似的元素，或者可以理解為某一類元素)，而 id 用于標識單獨的唯一的元素

選擇器的優先級是怎樣的?對于復雜場景如何計算優先級？

CSS優先級從高到低分別是

在屬性后面使用 !important 會覆蓋頁面內任何位置定義的元素樣式

作為style屬性寫在元素標簽上的內聯樣式

id選擇器

類選擇器

偽類選擇器

屬性選擇器

標簽選擇器

通配符選擇器

瀏覽器自定義

復雜情況

Snip20170313_202.png

以上講解:

1.權重由大到小a >b>c>d, 在最大權重相同情況下,再比下一級,誰的權重大就依照它的樣式

實例:

Snip20170313_200.png

Paste_Image.png

Paste_Image.png

以上參考地址

a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？

Paste_Image.png

正確順序為:

a:link {color:green;}

a:visited {color:black;}

a:hover {color:red;}

a:active {color:yellow;}

原因:a:visited必須不能放最后,必須放第二個,因為放后面會覆蓋它所有前面的屬性.

必須按這個順序,如果沒有a:hover和a:active其中一個,a:visited也必須在他們兩之前.

而a:hover和 a:active,不會覆蓋別的屬性,而a:link, a:hover, a:active的順序是符合用戶的習慣

未點擊-鼠標覆蓋-點擊時

以下選擇器分別是什么意思?

#header{

}

解釋 : id選擇器,匹配id="header"的所有元素

.header{

}

解釋:匹配class=headed的所有元素

.header .logo{

}

解釋:匹配class=header的元素里后代中class=logo的所有元素

.header.mobile{

}

解釋:就是匹配這個class="header,mobile"這兩個值的元素

.header p, .header h3{

}

解釋:匹配class=header的后代里所有p元素和class=header后代里所有h3元素

#header .nav>li{

}

解釋:匹配id=header的所有后代里,class=nav里找子代為li的標簽

#header a:hover{

}

解釋:匹配id=header后代里其中a標簽里hover屬性的元素

#header .logo~p{

}

解釋:匹配id=header后代里,其中class=logo的標簽之后并且同級的p標簽,同級=兩者是同一個父元素.

#header input[type="text"]{

}

解釋:匹配id=header后代里,其中input標簽里type=text的所有元素

html:

• 首頁
• 作品

• 更多

  Github

  博客

  知乎

.css樣式:

.navbar>li:hover .child{

display: block;

}

解釋:在class=navbar里,直接子代為li的標簽在鼠標懸浮下,給li的子代里有class=child的創建一個display: block的樣式.

上述疑惑:后代(空格隔開的)包括子代孫代曾孫代,而子代(>隔開的)就是第一代

列出你知道的偽類選擇器

Paste_Image.png

Paste_Image.png

div:first-child和div:first-of-type的作用和區別

div:first-child作用:

匹配:這個div在所有父元素中:必須是第一個出現的子元素并且這第一個子元素必須是div元素

舉例如下:

Paste_Image.png

div:first-of-type的作用:

匹配:屬于其父元素中里面是div標簽的,且在同種標簽中的第一個出現的div.

等同于 :nth-of-type(1)

舉例如下:

Paste_Image.png

區別:上圖紅色字體有說明

運行如下代碼，解析下輸出樣式的原因。

.item1:first-child{

color: red;

}

.item1:first-of-type{

background: blue;

}

aa

bb

ccc

輸出樣式:

Paste_Image.png

上圖解釋:

.item1:first-child

class為item的父元素即div，div下第一個子元素為p，且p的class為item，所以僅對p元素生效-字體變紅。

.item1:first-of-type

class為item的父元素即div，div下class為item1子元素有1個p元素和2個h3元素，所有對第1個p元素(也是唯一一個)和第1個h3元素生效-背景變藍色。

總結

以上是生活随笔為你收集整理的html类选择器使用在什么场景,CSS选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。