一.CSS選擇器常見的有幾種?
1.基礎(chǔ)選擇器
| 選擇器 | 含義 |
|---|---|
| * | 選中所有的元素，一般使用的較少伊滋，像margin、padding之類的還偶爾可以用一下 |
| #id | id選擇器队秩，用來匹配設(shè)定了的id的元素笑旺，它具有唯一性，一般在頁面大的區(qū)塊就會使用id選擇器 |
| .class | 類選擇器刹碾，用來匹配class包含的特定類的元素燥撞，不具有唯一性 |
| element | 適用于一般的標簽選擇器 |
下面寫了一個小的例子：JS bin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基礎(chǔ)選擇器</title>
<style>
*{
margin：0px;
padding: 0px;
}
#logo img{
height: 45px;
}
.nav, .main{
border: 1px solid #ccc
}
p{
color: red;
}
</style>
</head>
<body>
<div id="header">
<a id="logo" href="#"></a>
<ul class="nav">
<li>視頻</li>
<li>導師</li>
<li>課件</li>
<li>報名</li>
</ul>
</div>
<div id="content">
<P>最有愛的前端互助社區(qū)</p>
<ul class="main">
<li>導師棒棒噠</li>
<li>課程最實用</li>
</ul>
</div>
<div id="footer">歡迎加入我們</div>
</body>
</html>
基礎(chǔ)選擇器示例
2.組合選擇器
| 選擇器 | 含義 |
|---|---|
| E,F | 多元素選擇器，用,分隔迷帜，任何形式的選擇器都可以作為其中的一部分物舒，表示同時匹配元素E或者元素F，適用于當某些選擇器具有相同的樣式戏锹，可以簡化代碼 |
| E F | 后代選擇器冠胯，中間用空格隔開，用于匹配元素E所有的后代F |
| E>F | 直接子元素選擇器锦针，中間用>隔開荠察，用于匹配E的最外層子元素置蜀，也就是直接子元素 |
| E+F | 直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F |
| E~F | 普通兄弟選擇器悉盆，用于匹配E元素之后的所有的同一級的元素F |
還是要動手去實踐盯荤，看了許久沒有搞懂，自己動手寫一寫豁然開朗焕盟，還是要改掉眼高手低的壞毛病秋秤。下面給出一個小的例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>組合選擇器</title>
<style>
h3[class="title 1"], p{
color:red;
}
#content a{
text-decoration: none;
}
#header > p{
text-align: center;
}
#content + a{
background: #ff0;
}
#header ~ p{
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="header">
<h3 class="title 1">我是標題1</h3>
<h3 class="title 2">我是標題2</h3>
<p class="paragraph 1">我是段落1</p>
<div>
<p>我是段落2</p>
</div>
</div>
<div id="content">
<a href="#">按鈕1</a>
<div class="button">
<a href="#">按鈕2</a>
</div>
</div>
<a href="#">按鈕3</a>
<p>我是段落3</p>
</body>
</html>
組合元素選擇器示例
3.屬性選擇器
屬性選擇器比較常用的就是element[attribute="value"]脚翘，用于匹配屬性為value的元素灼卢。下面寫一個它的一個最簡單的使用場景，就是應(yīng)用于input輸入来农。這樣可以不用再對其設(shè)置class名稱鞋真，直接選中需要的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>屬性選擇器</title>
<style>
input[type='text']{
outline: none;
}
</style>
</head>
<body>
<form name="myForm" method="post">
用戶名：<input name="username" type="text" placeholder="用戶名"> <br/>
密碼：<input name="pwd" type="password" placeholder="密碼" > <br/>
</form>
</body>
</html>
屬性選擇器使用場景之一
4.偽類選擇器
為什么叫偽類呢沃于？狀態(tài)是動態(tài)變化的涩咖，當一個元素達到一個特定狀態(tài)的時候，它可能得到一個偽類的樣式揽涮；當狀態(tài)改變的時候抠藕，它又會失去這個樣式。所以說它的功能和class有些類似蒋困，但它是基于文檔之外的抽象盾似，所以叫偽類。
偽類選擇器和一般的DOM中的元素樣式不一樣雪标，它并不會改變?nèi)魏蜠OM內(nèi)容零院。只是插入了一些修飾類的元素，這些元素對于用戶來說是可見的村刨，但是對于DOM來說卻是不可見的告抄。
| 選擇器 | 含義 |
|---|---|
| E:link | 匹配所有未被點擊的鏈接 |
| E:visited | 匹配所有已被點擊的鏈接 |
| E:hover | 匹配鼠標放置的E元素，必須要位于link和visited之后才能生效 |
| E:active | 匹配鼠標已經(jīng)按下嵌牺、但是還沒有釋放的E元素打洼，必須要位于hover之后才能生效 |
| E:lang(c) | 匹配lang屬性等于c的E元素，lang偽類可以為語言定義特殊的規(guī)則 |
| E:focus | 匹配獲得當前焦點的E元素逆粹，比如說應(yīng)用于form表單的輸入框 |
| E:first-child | 匹配元素E的第一個子元素 |
| E:last-child | 匹配父元素的最后一個子元素募疮，等同于:nth-last-child(1) |
| E:nth-child(n) | 匹配其父元素的第n個子元素，第一個編號為1 |
| E:nth-last-child(n) | 匹配其父元素的倒數(shù)第n個子元素僻弹，第一個編號為1 |
| E:nth-of-type(n) | 與:nth-child()作用類似阿浓，但是僅匹配使用同種標簽的元素 |
| E:nth-last-of-type(n) | 與:nth-last-child() 作用類似，但是僅匹配使用同種標簽的元素 |
| E:first-of-type | 匹配父元素下使用同種標簽的第一個子元素蹋绽，等同于:nth-of-type(1) |
| E:last-of-type | 匹配父元素下使用同種標簽的最后一個子元素芭毙，等同于:nth-last-of-type(1) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>偽類選擇器</title>
<style>
a:link{
color: #0f0;
}
a:visited{
color: #ccc;
}
a:hover{
color: red;
}
a:active{
background: #00f;
}
q:lang(no){
quotes: "~" "~"
}
input[type="text"]:focus{
background: yellow;
}
p:first-child{
font-weight: bold;
}
li:first-child{
text-transform:uppercase;
}
span:last-child{
color: red;
}
.programming span:nth-child(2n){
background-color: #ccc;
}
p:nth-of-type(2n+1){
color: #ddee00;
}
.preference > span:first-child{
border: 1px solid #44dd88;
}
.fruit > span:first-of-type{
background: #00f;
}
</style>
</head>
<body>
<a target="myPage">饑人谷</a>
<a target="myPage">w3cshool</a>
<p>超人<q lang="no">會飛</q></p>
<form name="myForm" method="post">
姓名：<input name="username" type="text" placeholder="用戶名" /><br/>
密碼：<input name="pwd" type="password" placeholder="密碼" enable/><br/>
</form>
<div>
<p>學習步驟：</p>
<ul>
<li>聽課</li>
<li>做<strong>作業(yè)</strong></li>
<li>總結(jié)</li>
</ul>
<p>記住<em>不要</em> 眼高手低</p>
</div>
<div class="programming">
<span>前端</span>
<span>java</span>
<span>c++</span>
</div>
<div class="preference">
<span>旅游</span>
<span>交<span>知心</span>朋友</span>
<span>運動</span>
</div>
<h1 class="fruit">
<p>香蕉</p>
<p>西瓜</p>
<p>葡萄</P>
<span>橙子</span>
</h1>
</body>
</html>
結(jié)果截圖
代碼github地址
結(jié)果預覽
在上面的代碼中筋蓖，大部分的偽類選擇器應(yīng)該都舉了例子。關(guān)于E:first-child這一類和E:first-of-type這一類需要注意的地方退敦，在我的另外一篇博客里有詳細的說明粘咖。因為寫的比較長，就分開寫了侈百，需要看看的可以點擊偽類選擇器之E:first-child系列和E:first-of-type系列涂炎。這里就不作詳細說明了。
5.偽元素選擇器
偽元素就是用于向某些選擇器設(shè)置特殊效果设哗。如果需要添加新元素加以標識的，就是偽元素两蟀，反之网梢，如果只需要在既有元素上添加類別的，那就是偽類赂毯。在 CSS3 中為了區(qū)別偽元素和偽類為偽元素使用了雙冒號作區(qū)分战虏。
| 選擇器 | 含義 |
|---|---|
| E:first-line/E::first-line | 匹配E元素內(nèi)容的第一行，僅能被用于塊級元素 |
| E:first-letter/E::first-letter | 匹配E元素內(nèi)容的第一個字母或者第一個字党涕，僅能被用于塊級元素 |
| E:before/E::before | 在E元素之前插入生成的內(nèi)容 |
| E:after/E::after | 在E元素之后插入生成的內(nèi)容 |
這里重點講一下E::before和E::after這兩個偽元素烦感。他們特有的屬性 content，用于在 CSS 渲染中向元素邏輯上的頭部或尾部添加內(nèi)容膛堤，不會出現(xiàn)在DOM當中手趣。除此之外還有：
- [String] 使用引號包括一段字符串，將會向元素內(nèi)容中添加字符串肥荔。
- attr() 調(diào)用當前元素的屬性绿渣，可以方便地將圖片的 Alt 提示文字或者鏈接的 Href 地址等等顯示出來。
- url() / uri() 用于引用媒體文件燕耿。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>偽元素選擇器</title>
<style>
a:after { content:"(" attr(href) ")"; }
a::before { content: url(http://www.jirengu.com/data/upload/2016/0321/16/56efb29eadb87.png); }
h1:before { content: "↗";
}
p::first-line{
color: red;
}
p::first-letter{
border: 1px solid #ccc
}
</style>
</head>
<body>
<a >饑人谷</a>
<h1>前端</h1>
<p>學習</p>
</body>
</html>
</body>
</html>
二.選擇器的優(yōu)先級是怎樣的?
優(yōu)先級從高到低依次為：
- 在屬性后面使用 !important,會覆蓋頁面內(nèi)任何位置定義的元素樣式中符。
- 作為style屬性寫在元素標簽上的內(nèi)聯(lián)樣式。
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
總的來說誉帅，定位的越精準淀散，優(yōu)先級就越高。優(yōu)先級高的樣式會覆蓋優(yōu)先級低的蚜锨。
三.class 和 id 的使用場景?
- class名稱是可以重復的档插，所以它一般用于給多個元素賦予同樣的樣式。如果還需要同樣的樣式踏志，添加一個同名的class類就可以阀捅，這樣能簡化代碼。
- 在一個頁面中id名稱不能重復针余，它一般用于劃分大的區(qū)塊饲鄙。
四.使用CSS選擇器時為什么要劃定適當?shù)拿臻g凄诞？
- 使用語義化的命名可以使代碼容易讀懂。
- 便于維護和多人協(xié)作忍级。
- 瀏覽器可能會因為不規(guī)范的命名產(chǎn)生不同的樣式帆谍。
五.以下選擇器分別是什么意思?
#header{
} /* id選擇器，選擇id名稱為header的元素 */
.header{
} /* class選擇器轴咱，選擇class名稱為header的元素 */
.header .logo{
} /* 后代選擇器汛蝙，選擇class名稱為header元素的后代元素中class名稱為logo的所有元素 */
.header.mobile{
} /* 類選擇器，選擇class類同時具有header和mobile的元素 */
.header p, .header h3{
} /* 多元素選擇器朴肺，選擇header中的p和h3元素 */
#header .nav>li{
} /* 后代選擇器窖剑，選擇id為header的后代元素中class為nav的直接子元素（也就是nav的最外層子元素，即第一代子元素）li */
#header a:hover{
} /* 后代元素選擇器戈稿，選擇id為header的所有后代元素a的鼠標懸停的效果 */
六.運行如下代碼西土，解析下輸出樣式的原因。
<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>
這部分在上面提到的另外一篇博客中已經(jīng)做了詳細說明鞍盗。
結(jié)果分析
七. text-align: center的作用是什么需了，作用在什么元素上？能讓什么元素水平居中般甲。
text-align: center是讓塊級元素居中肋乍，只能作用在塊級元素，比如說一個div或者段落上面敷存，對內(nèi)部行內(nèi)元素（比如文字或者圖片）生效墓造。
示例
八.如果遇到一個屬性想知道兼容性，在哪查看?
可以在Can I use上面查看锚烦。比如說輸入inline-block滔岳，對應(yīng)的在各個瀏覽器的兼容性就會顯示出來。
截圖
啊啊啊挽牢，這兩篇博客真的花了我好長時間谱煤，還好一些常用選擇器的基本含義是差不多理解了。學習的速度可以不追求那么快禽拔，但基礎(chǔ)一定要打牢刘离。繼續(xù)加油吧，菇?jīng)觥?/p>
