**關(guān)鍵字: **
** 1.css選擇器使用場景; **
** 2.css選擇器優(yōu)先級; **
3. first-child和:first-of-type
1.class 和 id 的使用場景?
class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點(diǎn)"."號顯示
在以下的例子中，所有擁有 center 類的 HTML 元素均為居中
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">標(biāo)題居中</h1>
<p class="center">段落居中。</p>
</body>
你也可以指定特定的HTML元素使用class。
在以下實(shí)例中, 所有的 p 元素使用 class="center" 讓該元素的文本居中:
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">這個標(biāo)題不受影響</h1>
<p class="center">這個段落居中對齊。</p>
</body>
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設(shè)置id選擇器,CSS 中 id 選擇器以 "#" 來定義。
以下的樣式規(guī)則應(yīng)用于元素屬性 id="para1":
實(shí)例
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
</body>
CSS選擇器常見的有幾種?
1
2
3
重點(diǎn)說下div標(biāo)簽
<div> 可定義文檔中的分區(qū)或節(jié)（division/section）。
<div> 標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。
如果用 id 或 class 來標(biāo)記 <div>，那么該標(biāo)簽的作用會變得更加有效。
用法
<div> 是一個塊級元素。這意味著它的內(nèi)容自動地開始一個新行。實(shí)際上，換行是 <div> 固有的唯一格式表現(xiàn)?？梢酝ㄟ^ <div> 的 class 或 id 應(yīng)用額外的樣式。
不必為每一個 <div> 都加上類或 id，雖然這樣做也有一定的好處。
可以對同一個 <div> 元素應(yīng)用 class 或 id 屬性，但是更常見的情況是只應(yīng)用其中一種。這兩者的主要差異是，class 用于元素組（類似的元素，或者可以理解為某一類元素），而 id 用于標(biāo)識單獨(dú)的唯一的元素
選擇器的優(yōu)先級是怎樣的?對于復(fù)雜場景如何計(jì)算優(yōu)先級？
CSS優(yōu)先級從高到低分別是
在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式
作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
id選擇器
類選擇器
偽類選擇器
屬性選擇器
標(biāo)簽選擇器
通配符選擇器
瀏覽器自定義
- 復(fù)雜情況
Snip20170313_202.png
以上講解:
1.權(quán)重由大到小a >b>c>d, 在最大權(quán)重相同情況下,再比下一級,誰的權(quán)重大就依照它的樣式
實(shí)例:
Snip20170313_200.png
Paste_Image.png
Paste_Image.png
以上參考地址
a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
Paste_Image.png
正確順序?yàn)?
<style>
a:link {color:green;}
a:visited {color:black;}
a:hover {color:red;}
a:active {color:yellow;}
</style>
原因:a:visited必須不能放最后,必須放第二個,因?yàn)榉藕竺鏁采w它所有前面的屬性.
必須按這個順序,如果沒有a:hover和a:active其中一個,a:visited也必須在他們兩之前.
而a:hover和 a:active,不會覆蓋別的屬性,而a:link, a:hover, a:active的順序是符合用戶的習(xí)慣
未點(diǎn)擊-鼠標(biāo)覆蓋-點(diǎn)擊時
以下選擇器分別是什么意思?
#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的標(biāo)簽
#header a:hover{
}
解釋:匹配id=header后代里其中a標(biāo)簽里hover屬性的元素
#header .logo~p{
}
解釋:匹配id=header后代里,其中class=logo的標(biāo)簽之后并且同級的p標(biāo)簽,同級=兩者是同一個父元素.
#header input[type="text"]{
}
解釋:匹配id=header后代里,其中input標(biāo)簽里type=text的所有元素
html:
<ul class="navbar">
<li><a href="#">首頁</a></li>
<li><a href="#">作品</a></li>
<li>
<a href="#">更多</a>
<div class="child">
<a href="#">Github</a>
<a href="#">博客</a>
<a href="#">知乎</a>
</div>
</li>
</ul>
.css樣式:
.navbar>li:hover .child{
display: block;
}
解釋:在class=navbar里,直接子代為li的標(biāo)簽在鼠標(biāo)懸浮下,給li的子代里有class=child的創(chuàng)建一個display: block的樣式.
上述疑惑:后代(空格隔開的)包括子代孫代曾孫代,而子代(>隔開的)就是第一代
列出你知道的偽類選擇器
Paste_Image.png
![]()
Paste_Image.png
Paste_Image.png
div:first-child和div:first-of-type的作用和區(qū)別
div:first-child作用:
匹配:這個div在所有父元素中:必須是第一個出現(xiàn)的子元素并且這第一個子元素必須是div元素
舉例如下:
Paste_Image.png
div:first-of-type的作用:
匹配:屬于其父元素中里面是div標(biāo)簽的,且在同種標(biāo)簽中的第一個出現(xiàn)的div.
等同于 :nth-of-type(1)
舉例如下:
Paste_Image.png
區(qū)別:上圖紅色字體有說明
運(yùn)行如下代碼，解析下輸出樣式的原因。
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
輸出樣式:
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元素生效-背景變藍(lán)色。
