css選擇器有幾種
id選擇器,類選擇器,元素選擇器,派生選擇器,屬性選擇器,分組選擇器.通用選擇器*
比較好的選擇器分類是:
1.基礎(chǔ)選擇器(通用選擇器*,id選擇器#id,類選擇器.class,標(biāo)簽選擇器element,)
2.組合選擇器(分組選擇器E,F,后代選擇器E F,子元素選擇器E>F,直接相鄰選擇器E+F,普通相鄰選擇器E~F,).class1.class2,element#id
3.屬性選擇器
4.偽類選擇器
5.偽元素選擇器
選擇器的優(yōu)先級是怎樣的?
css樣式的優(yōu)先級
從高到低分別是
1.在屬性后面使用 !important會覆蓋頁面內(nèi)任何位置定義的元素樣式
2.作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
3.id選擇器
4.類選擇器
5.偽類選擇器
6.屬性選擇器
7.標(biāo)簽選擇器
8.通配符選擇器
9.瀏覽器自定義
class 和 id 的使用場景?
id知識：
在一個網(wǎng)頁里ID只能使用一次。當(dāng)然即使一個id在一個網(wǎng)頁內(nèi)被使用多次，其CSS樣式仍然可以實現(xiàn)生效，但是一般規(guī)定W3C標(biāo)準(zhǔn)是使用一次。因為ID在html里可以賦予html標(biāo)簽特殊的屬性如一下JS動作、表單傳值等特性所以區(qū)別于一個class可以使用多少的次，而一個CSS 命名的id只能使用一次避免一些特定動作、傳的表單值的兼容性特性錯誤即使沒有其它JS腳本動作、表單傳值特性但是我們也一定執(zhí)行一個頁面只能使用一次。一般id用于頁面唯一的結(jié)構(gòu)布置,
class知識：
與CSS ID不同特性是clsss類可以在一個網(wǎng)頁內(nèi)無限次引用。
Class 選擇器定義以“.”來定義。定義css class選擇器例子：.yangshi1{color:#F00;} 定義文字為紅色.yangshi2{font-size:28px;}定義文字大小為18px
使用CSS選擇器時為什么要劃定適當(dāng)?shù)拿臻g？
網(wǎng)頁中功能相似的模塊可能較多,比如導(dǎo)航,導(dǎo)航可能有頁面主導(dǎo)航,側(cè)邊欄導(dǎo)航,甚至頁腳導(dǎo)航,一般導(dǎo)航使用class類選擇器寫樣式,這時導(dǎo)航就不能單純的使用nav做class命名,要寫做main-nav,sidebar-nav,footer-nav,這樣不會造成樣式的污染.
以下選擇器分別是什么意思?
#header{} 選擇id為header的元素
.header{} 選擇元素中class有header的元素
.header .logo{} 選擇class為header元素下有class為logo的元素
.header.mobile{} 選擇同時有class為header和mobile的元素
.header p, .header h3{} 分別選擇class有header且header下有p和h3的元素
#header .nav>li{} 選擇id為header 下class有nav下的li元素
#header a:hover{} 選擇id為header 下的a鏈接hover狀態(tài)
列出你知道的偽類選擇器
a鏈接的四個偽類 link visited hover active
:firdst-child ,:first-of-type
:first-child和:first-of-type的作用和區(qū)別
E:first-child
說明：
匹配父元素的第一個子元素E。
要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是body，即E可以是body的子元素
這里可能存在誤解：
示例代碼：
<ul>
<li>列表項一</li>
<li>列表項二</li>
<li>列表項三</li>
<li>列表項四</li>
</ul>
在上述代碼中，如果我們要設(shè)置第一個li的樣式，那么代碼應(yīng)該寫成li:first-child{sRules}
，而不是ul:first-child{sRules}
。
來看這樣一段代碼：
示例代碼：
p:first-child{color:#f00;}
<div>
<p>我是一個p</p>
</div>
我是一個p
這段代碼你能看到p元素被命中變成了紅色
假設(shè)將代碼簡單地修改一下：
示例代碼：
p:first-child{color:#f00;}
<div>
<h2>我是一個標(biāo)題</h2>
<p>我是一個p</p>
</div>
只是在p前面加了一個h2標(biāo)簽，你會發(fā)現(xiàn)選擇器失效了，沒有命中p，why?
E:first-child選擇符，E必須是它的兄弟元素中的第一個元素，換言之，E必須是父元素的第一個子元素。與之類似的偽類還有E:last-child
，只不過情況正好相反，需要它是最后一個子元素。
E:first-of-type
說明：
匹配同類型中的第一個同級兄弟元素E。
要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是說E可以是body
該選擇符總是能命中父元素的第1個為E的子元素，不論第1個子元素是否為E
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>結(jié)構(gòu)性偽類選擇符 E:first-of-type_CSS參考手冊_web前端開發(fā)參考手冊系列</title>
<meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p:first-of-type {
color: #f00;
}
</style>
</head>
<body>
<div class="test">
<div>我是一個div元素</div>
<p>我是一個p元素</p>
<p>我是一個p元素</p>
</div>
</body>
</html>
運行如下代碼，解析下輸出樣式的原因。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child vs first-of-child</title>
<style>
/*選中.item1,該元素是它父親的第一個孩子*/
.item1:first-of-type{
background: red;
}
/*選中.item1,該元素是它父親所有的 .item1孩子中的第一個*/
.item1:first-child{
color: blue;
}
</style>
</head>
<body>
<div class="item1">item1</div>
<div class="item1">ct-item2-item1</div>
<div class="ct">
<div class="item2">ct-item2</div>
<div class="item1">ct-item1</div>
<div class="item1">ct-itmm1</div>
<div class="item2">
<div class="item1">ct-item2-item1</div>
<div class="item1">ct-item2-item1</div>
</div>
</div>
</body>
</html>
.item1:first-of-type,選擇器匹配屬于其父元素的有item1類名的首個子元素而不論item1是否為父元素的第一個子元素
.item1:first-child 選擇器用于選取屬于其父元素的有item1的所有首個子元素的
text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
將文本或inline-block元素水平居中
如果遇到一個屬性想知道兼容性，在哪查看?
can i use
