什么是CSS
CSS是對(duì)網(wǎng)頁(yè)進(jìn)行 樣式和布局 設(shè)置的工具
要設(shè)置一個(gè)元素的樣式藐翎，第一步是要選中一個(gè)元素，那么怎么選中元素呢氨距？
選擇器
我們是不是可以使用標(biāo)簽來(lái)選擇呢针贬？
-
標(biāo)簽選擇器
格式：標(biāo)簽
p{
樣式屬性: value
}
/**/
<p>我是標(biāo)題1</p>
<p>我是標(biāo)題2</p>
<p>我是標(biāo)題3</p>
問(wèn)題是標(biāo)簽選擇器只能選擇一類(lèi)的標(biāo)簽，上例中的三個(gè)p標(biāo)簽都會(huì)被選中
好么我們又考慮在HTML中大多數(shù)的元素都有一id,class,title屬性赋兵，所有我們可以給元素設(shè)置id,class,title來(lái)進(jìn)行選擇
-
id選擇器笔咽、類(lèi)選擇器、屬性選擇器
1. id選擇器
id值是整個(gè)網(wǎng)頁(yè)中唯一的
格式: #id值
#i666{
樣式屬性: value
}
/**/
<h1 id="i666">我是標(biāo)題</h1>
2. 類(lèi)選擇器
多個(gè)元素可以共用一個(gè)class
格式：.classname
.biaoti{
樣式屬性: value
}
/**/
<h1 class="biaoti">我是標(biāo)題</h1>
3. 屬性選擇器
格式：[]
h1[title]{
樣式屬性: value
}
/**/
<h1 class="biaoti" title="這是這個(gè)網(wǎng)頁(yè)的主標(biāo)題abc">我是標(biāo)題</h1>
以上面代碼為例：
通常與標(biāo)簽配合作用霹期，如上叶组，選擇有title屬性的h1標(biāo)簽
| 選擇器 | 描述 |
|---|---|
| [title] | 帶有title屬性的元素 |
| [title="這是這個(gè)網(wǎng)頁(yè)的主標(biāo)題abc"] | title="這是這個(gè)網(wǎng)頁(yè)的主標(biāo)題abc"的元素 |
| [title^="這"] | 選擇title值中以"這"開(kāi)頭的元素 |
| [title$="abc"] | 選擇title值中以"abc"結(jié)尾的元素 |
| [title*="b"] | 選擇title值中包含"b"的元素 |
但是如果給每一個(gè)元素都加上id,class,title屬性是一個(gè)非常麻煩的事。
html是一個(gè)一層套一層的結(jié)構(gòu)历造，那么我們是不是可以使用他們的父子甩十、兄弟關(guān)系來(lái)選擇呢船庇？
-
關(guān)系選擇器
1. 后代選擇器
找所有的后代，無(wú)論是第幾代
格式：以空格割開(kāi)
祖先選擇器 子孫選擇器
.abc p{
樣式屬性: value
}
/**/
<div class="abc">
<p id="i666">我是段落1</p>
<div>
<p class="c123">我是段落2</p>
</div>
</div>
** 選擇div中的兩個(gè)p標(biāo)簽
2. 子類(lèi)選擇器
格式：以>割開(kāi)
父選擇器>子選擇器
.abc>p{
樣式屬性: value
}
/**/
<div class="abc">
<p id="i666">我是段落1</p>
<div>
<p class="c123">我是段落2</p>
</div>
</div>
** 只選擇”我是段落1“的p標(biāo)簽
3. 兄弟選擇器
格式：以+割開(kāi)
選擇選擇器1+選擇選擇器2
同級(jí)選擇枣氧，僅選擇選擇器1相鄰的選擇選擇器2
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p>我是段落1</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<p>我是段落2</p>
</div>
例如：
ul+p 只能選擇”我是段落1“
-----因?yàn)榈谝粋€(gè)p中間割了一個(gè)ol
li+li 可以選擇ol和ul中的第2溢十、3個(gè)li
-----因?yàn)?只能選擇后面的兄弟元素
- 同時(shí)滿(mǎn)足兩個(gè)條件
- 只要滿(mǎn)足兩個(gè)條件中的一個(gè)
這也是一種關(guān)系
4. 交集選擇器
格式：沒(méi)有分割符
例如：p.c123 選擇p標(biāo)簽 同時(shí) p標(biāo)簽的class為c123的標(biāo)簽
5. 并集選擇器
格式：以，割開(kāi)
例如：#i666,.c123 選擇id為i666以及類(lèi)為c123的兩個(gè)標(biāo)簽
再來(lái)想一想达吞，如果不想設(shè)置id,class又想選擇一個(gè)按特定的標(biāo)簽张弛，怎么辦呢？
-
序選擇器
- 什么是序選擇器酪劫？
就是通過(guò)順序來(lái)進(jìn)行定位的吞鸭。
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<p>我是段落1</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<p>我是段落2</p>
</div>
如上面的代碼，我只想選擇ol中的第二個(gè)li覆糟，我們可以使用：
div>ol li:nth-child(2)
：div中的---ol中的---第二個(gè)li元素
詳細(xì)：W3C中文
