- CSS選擇器常見(jiàn)的有幾種?
- 元素選擇器，
p {} - 后代選擇器，
p a {} - id選擇器，
#header {} - 類(lèi)選擇器，
.clearfix {} - 子選擇器，
p>a {} - 同胞選擇器
- 相鄰?fù)x擇器，
p+p {} - 一般同胞選擇器，
p~p {}
.p1+p {
color: red;
}
.p2~p {
color: blue;
}
同胞選擇器
- 相鄰?fù)x擇器，
- 通配符選擇器，
* {} - 屬性選擇器
- [attr]，屬性名attr的元素
- [attr=value]，屬性名為attr，屬性值為"value"的元素
- [attr~=value]，以空格做分隔符，其中一個(gè)值為"value"的元素
- [attr|=value]，以"value"-開(kāi)頭的元素("-"為連字符)，常用于zh-CN,zh-TW
- [attr^=value]，以"value"開(kāi)頭的元素
- [attr$=value]，以"value"結(jié)尾的元素
- [attr*=value]，含有"value"的元素
- [attr operator value i]，忽略屬性值大小寫(xiě)
- 元素選擇器，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
[lang~="en-us"] {
color: red;
}
[lang|="zh"] {
color: blue;
}
</style>
</head>
<body>
<a href="#">English:</a>
<span lang="en-us en-gb en-au en-nz">Hello World!</span><br>
<a href="#">Portuguese:</a>
<span lang="pt">Olá Mundo!</span><br>
<a href="#">Chinese (Simplified):</a>
<span lang="zh-CN">世界您好！</span><br>
<a href="#">Chinese (Traditional):</a>
<span lang="zh-TW">世界您好！</span><br>
</body>
</html>
屬性選擇器
- 偽類(lèi)選擇器，`a:hover {}`
偽類(lèi)選擇器表示的是原本存在的元素，相當(dāng)于給這些元素加上一個(gè)類(lèi)，在CSS3中用":"和 "::"區(qū)分偽類(lèi)和偽元素，但是一般瀏覽器兩種方式都兼容
- 偽元素選擇器，`p::first-letter {}`
偽元素選擇器表示的是原本不存在的元素，相當(dāng)于加上一個(gè)元素，注意：`::after`和`::before`中的content的屬性，該屬性的值有：
- <string>，文本內(nèi)容
- <uri> url()，外部資源（比如圖片），如果該資源不能顯示，它就會(huì)被忽略或顯示一些占位
- attr(x)，將元素的X屬性以字符串形式返回
- open-quote|close-quote，引號(hào)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.bd::before {
content: "（我是前面的字符串）";
}
.bd::after {
content: "(" attr(href) ")";
}
.jrg::before {
content: url(http://upload-images.jianshu.io/upload_images/2348761-f10b477e82e5ac19.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240);
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
</style>
</head>
<body>
<a class="bd">百度</a><br>
<a href="http//jirengu.com" class="jrg">饑人谷</a><br>
<q>我是引用</q>
</body>
</html>
content屬性
- 選擇器的優(yōu)先級(jí)是怎樣的?
- 整體遵循下列三條規(guī)則
- 選擇器越精確，優(yōu)先級(jí)越高
- 優(yōu)先級(jí)相同的情況下，后面的樣式會(huì)覆蓋前面的樣式
- !important的優(yōu)先級(jí)最高
- 選擇器權(quán)重
選擇器權(quán)重
理解起來(lái)就是一個(gè)內(nèi)聯(lián)元素的權(quán)重是1000，一個(gè)id選擇器的權(quán)重是100，類(lèi)選擇器、偽類(lèi)選擇器和屬性選擇器是10，元素選擇器和偽元素選擇器是1，最后通配符選擇器是0，所以最后一樣選擇器權(quán)重的值就是按照這個(gè)公式計(jì)算value=a*1000+b*100+c*10+d*1
參考：Specificity Calculator
- 整體遵循下列三條規(guī)則
- class 和 id 的使用場(chǎng)景?
id表示的是頁(yè)面上獨(dú)一無(wú)二的，是不可重復(fù)的，而class表示的是一類(lèi)。- 當(dāng)我們需要為一類(lèi)元素指定樣式時(shí)就使用class
- 當(dāng)我們需要為元素做出單獨(dú)的標(biāo)記的時(shí)候就是用id
- 使用CSS選擇器時(shí)為什么要?jiǎng)澏ㄟm當(dāng)?shù)拿臻g？
- 為了代碼的可讀性
- 為了代碼的易維護(hù)性
- 以下選擇器分別是什么意思?
/id為header的元素/
#header{
}
/class為header的元素/
.header{
}
/class為header后代中的class為logo的元素/
.header .logo{
}
/class為header和mobile的元素/
.header.mobile{
}
/class為header后代中的p元素和class為header后代的h3元素
.header p, .header h3{
}
/id為header后代中class為nav子代中的li元素
#header .nav>li{
}
/*id為header后代中的a元素的偽類(lèi)hover
#header a:hover{
} - 列出你知道的偽類(lèi)選擇器
- :link，默認(rèn)狀態(tài)下的鏈接
- :visited，點(diǎn)擊過(guò)的鏈接
- :hover，鼠標(biāo)懸浮上去的鏈接
- :focus，tab焦距上去的鏈接
- :active，鼠標(biāo)按下去的鏈接
- :first-child，first-child代表了某個(gè)元素，這個(gè)元素是它父元素的的第一個(gè)子元素.
- :first-of-type，匹配元素的所有子元素類(lèi)型中第一個(gè)出現(xiàn)的元素
-
:first-child和:first-of-type的作用和區(qū)別- 兩種用法
- 第一種和后代選擇器組合起來(lái)，
div :first-child或div :first-of-stype,注意父元素和偽類(lèi)之間加了空格，表示的是父元素的后代中的第一個(gè)子元素或者子元素中某個(gè)類(lèi)型的第一個(gè)第一個(gè) - 第二種和元素選擇器一起使用，
p:first-child和p:first-of-stype，分別表示的是p元素而且他父元素下的第一個(gè)的那個(gè)元素和所有p類(lèi)型的第一個(gè)
- 第一種和后代選擇器組合起來(lái)，
- 區(qū)別是，如果只和元素選擇器配合起來(lái)用，
p:first-child必須是父元素下的第一個(gè)，而p:first-ot-type則不需要，只要是p標(biāo)簽中的第一個(gè)就可以
- 兩種用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div :first-of-type {
background-color: lime;
}
</style>
</head>
<body>
<div>
<span>This span is first!</span>
<span>This span is not. :(</span>
<span>what about this <em>nested element</em>?</span>
<strike>This is another type</strike>
<span>Sadly, this one is not...</span>
</body>
</html>
:first-of-type
- 運(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>
1. `<p class="item1">aa</p>`是其父元素下的第一個(gè)子元素，所以`.item1:first-child{ color: red;}`生效了。
2. `.item1:first-child{ color: red;}`和`<h3 class="item1">bb</h3> `分別是父元素下其類(lèi)型元素的第一個(gè)，所以`.item1:first-of-type{ background: blue;}`生效了。
- text-align: center的作用是什么，作用在什么元素上？能讓什么元素水平居中
The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements, only their inline content.---MDN
text-align: center的作用在塊級(jí)元素上，他的作用是讓行內(nèi)元素相對(duì)與他的父元素居中顯示
