選擇器的用處就是告知瀏覽器，我這一大堆的樣式要用在哪些元素
選擇器很重要，學好了，可以減少很多CSS代碼，不用像以前一樣，一大堆類選擇器。
以下為了方便查看CSS代碼，我采用內聯樣式的方法，但在實際開發中，建議用外聯樣式，這有利於頁面的性能優化。
id選擇器
id選擇器，要在標簽添加id屬性和其值，css根據id來賦予元素樣式。
在一個網頁文件中，id名不能重復，如下代碼有個id="div"，就不能再來一個id="div"了，但可以是其他的值，Id名就像身份證一樣，每個只有一個，並且不能重復。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/* 這個是CSS的注釋寫法 是多行注釋 */
/*id選擇器的寫法 #id名 id的值也就是id名*/
#div{
color: red;
}
#div2{
color: blue;
}
</style>
</head>
<body>
<div id="div">
紅色
</div>
<div id="div2">
藍色
</div>
</body>
</html>
類選擇器
這個是利用html元素的class屬性，一個元素只能有一個class屬性，但class屬性可以有多個值，而且在一個html文件中，類名是可以重復，它就像衣服一樣，給一些元素穿上同樣的衣服。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/* */
/*類選擇器的寫法 .類名 class的值就是類名*/
.bg{
background: red;
}
</style>
</head>
<body>
<div class="bg">
背景為紅色
</div>
<p class="bg">
背景為紅色
</p>
</body>
</html>
如果一個元素有多個類要怎么寫?
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.bg{
background: pink;
}
.font{
color: blue;
}
</style>
</head>
<body>
<div class="bg font">
背景為粉色，字體為藍
</div>
<p class="bg">
背景為粉色
</p>
</body>
</html>
類名與id名的合法值
就像編程語言的變量有合法的標識符一樣，這里的id和class也有合法的值
id名和類名的值由，英文大小寫字母和數字，還有下划線 _ ，以及中划線 - 組成，開頭不能是數字
為了見名之意，建議采用駝峰標識，或以下划線或中划線來分割單詞
比如class="bg-color"
因為最常用的就是類選擇器，所以也擁有一些命名規范，比如BEM，其實這玩意我也不太了解啊，因為我也沒有注意這種命名的問題，特別是學了vue的組件化開發后。
但是就針對一開始學的話，CSS一大堆類名，要管理起來確實不容易，有時候出bug找個類名都難找，而且類名一多，就開始亂起了，就很麻煩，我以前用的好像是OOCSS的那一套，不過OOCSS需要對CSS樣式有個比較全面的了解，所以，后面再說。
快捷方式：在sublime_text這個編輯器有個關於id和類選擇器的快捷方式
div#name按下tab鍵會變成<div id="name"></div>
div.div按下tab鍵會變成<div class="div"></div>
標簽選擇器
這個就是利用標簽名了，被指定的所有標簽都會有相同的樣式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*直接寫上標簽名 */
div{
background: pink;
color: blue;
}
p{
background: green;
color: pink;
}
</style>
</head>
<body>
<div>
div背景為粉色，字體為藍
</div>
<div>
div背景為粉色，字體為藍
</div>
<p>
p背景為綠色，字體粉色
</p>
<p>
p背景為綠色，字體粉色
</p>
</body>
</html>
群組選擇器
多個選擇器的組合，只要是在這個組的都有同樣的樣式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
div,ul,p{
background: pink;
color: blue;
}
</style>
</head>
<body>
<div>
div背景為粉色，字體為藍
</div>
<div>
div背景為粉色，字體為藍
</div>
<p>
p背景為粉色，字體為藍
</p>
<p>
p背景為粉色，字體為藍
</p>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</body>
</html>
看到這可能會有疑惑，會什么明明沒有指定li標簽的字體顏色，為何它也變色了，這就是CSS屬性的繼承了，比如字體顏色是可以繼承的，老爹有什么顏色，兒子就是什么顏色的，除非兒子重新定義自己的顏色。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
div,ul,p{
background: pink;
color: blue;
}
/*加上這個代碼*/
li{
color: red;
}
</style>
</head>
<body>
<div>
div背景為粉色，字體為藍
</div>
<div>
div背景為粉色，字體為藍
</div>
<p>
p背景為粉色，字體為藍
</p>
<p>
p背景為粉色，字體為藍
</p>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</body>
</html>
既然字體顏色可以繼承，那么其實要讓所有的字體顏色一樣，其實只要在body上設置就行了。
后代選擇器
下面這CSS代碼的意思是，我這個叫bg的類名，它的后代，不管是兒子還是孫子，還什么，只要它叫p，都用這個樣式。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*選擇器 選擇器 中間是空格*/
.bg p{
background: pink;
color: blue;
}
</style>
</head>
<body>
<div class="bg">
<p>背景為粉色，字體為藍</p>
<div>
<p>背景為粉色，字體為藍</p>
<p>背景為粉色，字體為藍</p>
</div>
<p>背景為粉色，字體為藍</p>
</div>
</body>
</html>
后代選擇器並不是只能弄兩級，可以有很多層級
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.bg p span{
background: pink;
color: blue;
}
</style>
</head>
<body>
<div class="bg">
<p>背景為粉色，字體為藍</p>
<div>
<p>背景為粉色，字體為藍 <span>p里面的span</span></p>
<p>背景為粉色，字體為藍 <span>p里面的span</span></p>
</div>
<p>背景為粉色，字體為藍</p>
<span>span</span>
</div>
</body>
</html>
上面這段代碼，就是類名bg中的p里面的span套用這個樣式
子選擇器
它和后代選擇器不同，它就是選擇它兒子的，至於后代不關它的事
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.bg > p {
background: pink;
color: blue;
}
</style>
</head>
<body>
<div class="bg">
<p>背景為粉色，字體為藍</p>
<div>
<p>背景為粉色，字體為藍
<p>背景為粉色，字體為藍
</div>
<p>背景為粉色，字體為藍</p>
</div>
</body>
</html>
中間兩行並沒有相應的樣式，因為它們不是類名bg的兒子，它們是孫子。
但可以這樣
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*將.bg 改成 div*/
div > p {
background: pink;
color: blue;
}
</style>
</head>
<body>
<div class="bg">
<p>背景為粉色，字體為藍</p>
<div>
<p>背景為粉色，字體為藍
<p>背景為粉色，字體為藍
</div>
<p>背景為粉色，字體為藍</p>
</div>
</body>
</html>
這樣就是div標簽的兒子們，名為p的標簽就用這些樣式，所以全部都有樣式了。
兄弟選擇器
這個只能選擇某個選擇器的第一個弟弟元素
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.bg + p{
background: pink;
color: blue;
}
</style>
</head>
<body>
<p>我是類名bg的哥哥</p>
<p>我是類名bg的哥哥</p>
<div class="bg">
我是類名bg
</div>
<p>我是類名bg的第一個弟弟</p>
<p>我是類名bg的第二個弟弟</p>
</body>
</html>
那把.bg + p換成這樣 .bg + p + p會是什么結果
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.bg + p + p{
background: pink;
color: blue;
}
</style>
</head>
<body>
<p>我是類名bg的哥哥</p>
<p>我是類名bg的哥哥</p>
<div class="bg">
我是類名bg
</div>
<p>我是類名bg的第一個弟弟</p>
<p>我是類名bg的第二個弟弟</p>
<p>我是類名bg的第三個弟弟</p>
</body>
</html>
這樣子就是選擇類名bg的一個弟弟的一個弟弟了
弟弟選擇器
這個是自己命名的，它選擇某元素的所有弟弟，不再是第一個弟弟了
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
div~p{
background: pink;
color: red;
}
</style>
</head>
<body>
<div>div</div>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
</body>
</html>
屬性選擇器
第一種
只要標簽上有某個指定屬性的就用這些樣式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*寫法:
選擇器[屬性名] 不一定要標簽名[屬性名] 可以是 類名[屬性名]
當然前面這個選擇器也是可以省略的，不過那樣就只要我的標簽有這個屬性就用這些樣式
前面這個選擇器就是限定了，我a標簽里面的有這個target屬性時運用樣式
*/
a[target]{
background: pink;
color: red;
}
</style>
</head>
<body>
<a href="#" >標簽1</a>
<a href="#" target="_blank">標簽2</a>
<a href="#" target="_top">標簽3</a>
</body>
</html>
第二種
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*寫法: 選擇器[屬性=值]*/
a[target=_blank]{
background: pink;
color: red;
}
</style>
</head>
<body>
<a href="#" >標簽1</a>
<a href="#" target="_blank">標簽2</a>
<a href="#" target="_top">標簽3</a>
</body>
</html>
第三種
只要我這個屬性的值有我指定的字段，就套用這些樣式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
a[title~=this]{
background: pink;
color: red;
}
</style>
</head>
<body>
<a href="#" title="this that">標簽1</a>
<a href="#" title="as this that">標簽2</a>
<a href="#" title="b that">標簽3</a>
<a href="#" title="this1">標簽4</a>
</body>
</html>
再來看另一個
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*如果把a去掉，下面的div就可以有這樣式，如果不去掉，div就無法用這樣式*/
[title~=this]{
background: pink;
color: red;
}
</style>
</head>
<body>
<a href="#" title="this that">標簽1</a>
<a href="#" title="as this that">標簽2</a>
<a href="#" title="b that">標簽3</a>
<a href="#" title="this1">標簽4</a>
<div title="this">div</div>
</body>
</html>
第四種
選擇屬性值以某個字段開頭的元素
這里稍微有點問題，這個值必須是單詞的形式，如果是句子是不行的
title="this-is"這種是可行的
title="this"`這種也是可行的
title="this1s" 這是不行的
title="this 1s"` 這也是不行的
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
[title|=this]{
background: pink;
color: red;
}
</style>
</head>
<body>
<a href="#" title="this1s">標簽1</a>
<a href="#" title="this-is-sb">標簽2</a>
<a href="#" title="that-is-250 ss">標簽3</a>
<a href="#" title="this is">標簽4</a>
<a href="#" title="this">標簽5</a>
</body>
</html>
第五種
通過正則來匹配值的選擇器
- [屬性^=值] [href^="https"] 值以https開頭的
- [屬性$=值] [href$="com"] 值以com結尾的
- [屬性*=值] [href*="baidu"] 值baidu這個字符串
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
[href^=https]{
background: pink;
color: red;
}
[href$=cn]{
background: #444;
color: yellow;
}
[href*=baidu]{
background: #444;
color: #ffffff;
}
</style>
</head>
<body>
<a href="https://www.852.com" >標簽1</a>
<a href="https://www.456.com" >標簽2</a>
<a href="http://www.baidu.cn1" >標簽3</a>
<a href="http://www.123.cn" >標簽4</a>
<a href="http://www.123.cn" >標簽5</a>
</body>
</html>
偽元素選擇器
為什么叫偽元素選擇器，這種命名的概念問題不要糾結，主要我也不清楚啊，還是看都有哪些作用吧
first-line、first-letter、before和after
first-line 設置文本中第一行的樣式
first-letter設置文本中第一個字的樣式
before在某個元素前插入內容
after在某個元素后插入內容
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*偽元素選擇器， ::first-line 這是兩個冒號，但經過測試，一個冒號也是有效的*/
.p1:first-line{
color: red;
}
.p2:first-letter{
font-size: 24px;
}
.p3:before{
content: "※"
}
.p4:after{
content: "__hellow world"
}
</style>
</head>
<body>
<p class="p1">文本中的第一行 <br> 文本中的第二行 </p>
<p class="p2">天生我才必有用</p>
<p class="p3">在前面插入內容</p>
<p class="p4">在后面插入內容</p>
</body>
</html>
root、not、empty和target選擇器
root選擇器綁定頁面的根元素，也就是html元素
一般可以在這設置一些全局的樣式，比如重新設置字體的默認顏色，大小，字體樣式，比如楷體，宋體之類的
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
:root{
background: green;
}
</style>
</head>
<body>
</body>
</html>
not選擇器，用於排除哪個元素不使用該樣式，寫法為 選擇器 *:not(排除的選擇)
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
div *:not(h1){
background: green
}
</style>
</head>
<body>
<div>
<h1>h1</h1>
<p>文本</p>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
div *:not(.p){
color: red;
}
</style>
</head>
<body>
<div>
<h1>h1</h1>
<p>文本</p>
<p>文本</p>
<p class="p">文本</p>
</div>
</body>
</html>
empty選擇器 當元素內容為空時使用該樣式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
:empty{
background: red;
}
div{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<div></div>
<p></p>
</body>
</html>
在這里是給div設置了高度和寬度，因為第一個div它有內容，p標簽，所以沒有改變顏色，但第二個div因為沒有內容，所以符合empty選擇器，所以改變了顏色，至於p標簽頁沒有內容，但卻也沒有改變顏色，那是因為p的高度為0，改變顏色也看不出來，可以給p設置高度，這樣就會看到效果了。
target選擇器，用於a標簽的錨點功能，跳到對應內容，那內容會獲得相應的樣式，點擊a標簽，可看到效果。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
:target{
background: yellow;
}
</style>
</head>
<body>
<p id="menu">
<a href="#text1">文字1</a>
<a href="#text2">文字2</a>
<a href="#text3">文字3</a>
<a href="#text4">文字4</a>
<a href="#text5">文字5</a>
</p>
<div id="text1">
<h2>文字1</h2>
<p>內容1</p>
</div>
<div id="text2">
<h2>文字2</h2>
<p>內容2</p>
</div>
<div id="text3">
<h2>文字3</h2>
<p>內容3</p>
</div>
<div id="text4">
<h2>文字4</h2>
<p>內容4</p>
</div>
<div id="text5">
<h2>文字5</h2>
<p>內容5</p>
</div>
</body>
</html>
first-child、last-child、nth-child、nth-last-child
first-child單獨指定第一個子元素last-child單獨指定最后一個子元素
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*注意是 li 不是 ul */
li:first-child{
background: yellow;
}
li:last-child{
background: green;
}
</style>
</head>
<body>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
<li>項目5</li>
</ul>
</body>
</html>
nth-child不僅可以指定父元素中的第一個子元素和最后一個元素，還可以根據序號指定元素
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/* li:nth-child(0) 是 無效的 */
li:nth-child(1){
background: yellow;
}
li:nth-child(2){
background: red;
}
li:nth-child(3){
background: blue;
}
li:nth-child(4){
background: green;
}
li:nth-child(5){
background: pink;
}
</style>
</head>
<body>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
<li>項目5</li>
</ul>
</body>
</html>
不僅可以指定序號還可以指定奇偶
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
table{
width: 80%;
height: 300px;
margin: 0 auto;
text-align: center;
}
/*odd 是指 奇數*/
tr:nth-child(odd){
background: pink;
}
/*even 是指 偶數*/
tr:nth-child(even){
background: brown;
}
tr:first-child{
background: #fff;
}
</style>
</head>
<body>
<table>
<tr>
<th>單元格1</th>
<th>單元格2</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
那么問題來了，為什么第一行沒有被改變顏色
<tr>
<th>單元格1</th>
<th>單元格2</th>
</tr>
因為被最后的樣式給覆蓋了
tr:first-child{
background: #fff;
}
原先是表格中tr是奇數時改為背景粉色，后來因這段代碼，又變成了白色。
nth-last-child和nth-child用法一樣，只不過是從后面數起。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
li:nth-last-child(1){
background: yellow;
}
li:nth-last-child(2){
background: red;
}
li:nth-last-child(3){
background: blue;
}
li:nth-last-child(4){
background: green;
}
li:nth-last-child(5){
background: pink;
}
</style>
</head>
<body>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
<li>項目5</li>
</ul>
</body>
</html>
不過nth-child會引發一個很重要的問題
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
h2:nth-child(odd){
background: yellow;
}
h2:nth-child(even){
background: skyblue;
}
</style>
</head>
<body>
<div>
<h2>文章標題1</h2>
<p>內容1</p>
<h2>文章標題2</h2>
<p>內容2</p>
<h2>文章標題3</h2>
<p>內容3</p>
<h2>文章標題4</h2>
<p>內容4</p>
<h2>文章標題5</h2>
<p>內容5</p>
<h2>文章標題6</h2>
<p>內容6</p>
<h2>文章標題7</h2>
<p>內容7</p>
<h2>文章標題8</h2>
<p>內容8</p>
<h2>文章標題9</h2>
<p>內容9</p>
<h2>文章標題10</h2>
<p>內容10</p>
</div>
</body>
</html>
這里的h2的背景顏色都是黃色，我們原先設想的是奇數的h2是黃色，偶數的是淺藍色，為何會出現這種情況
那是因為nth-child在計算奇偶時，是將父元素下所有的元素一起算的，它的語義並不是div元素中第奇數個h2元素，而是在div元素中的第奇數個子元素如果是h2元素就用這些樣式，因此上面的h2元素因為p元素的關系，永遠都處於奇數的位置。
那么有沒有解決的辦法，是有的
nth-of-type和nth-last-of-type
這兩個前者是從前往后數，后者是從后往前數，所以我只寫第一個，它們用法是一樣的
上面那代碼，只要改成這個nth-of-type選擇器就行了，它的意思就是div元素中第奇數個h2元素
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
h2:nth-of-type(odd){
background: yellow;
}
h2:nth-of-type(even){
background: skyblue;
}
</style>
</head>
<body>
<div>
<h2>文章標題1</h2>
<p>內容1</p>
<h2>文章標題2</h2>
<p>內容2</p>
<h2>文章標題3</h2>
<p>內容3</p>
<h2>文章標題4</h2>
<p>內容4</p>
<h2>文章標題5</h2>
<p>內容5</p>
<h2>文章標題6</h2>
<p>內容6</p>
<h2>文章標題7</h2>
<p>內容7</p>
<h2>文章標題8</h2>
<p>內容8</p>
<h2>文章標題9</h2>
<p>內容9</p>
<h2>文章標題10</h2>
<p>內容10</p>
</div>
</body>
</html>
nth的循環使用
nth-child、nth-last-child、nth-of-type、nth-last-of-type都可以使用循環樣式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/* n 會從0開始循環相加 4n+1 也就是 第一個，第五個，第九個，第十三個，如此類推，符合的都會用到相應的顏色*/
li:nth-child(4n+1){
background: red;
}
li:nth-child(4n+2){
background: green;
}
li:nth-child(4n+3){
background: yellow;
}
li:nth-child(4n+4){
background: blue;
}
</style>
</head>
<body>
<ul>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
<li>項目</li>
</ul>
</body>
</html>
only-child
當父元素有且只有一個子元素時使用
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
p:only-child{
background: skyblue;
}
</style>
</head>
<body>
<div>
<p>p1</p>
</div>
<div>
<p>p1</p>
<p>p2</p>
</div>
</body>
</html>
這個相當於nth-child和nth-last-child一起使用
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
p:nth-child(1):nth-last-child(1){
background: skyblue;
}
</style>
</head>
<body>
<div>
<p>p1</p>
</div>
<div>
<p>p1</p>
<p>p2</p>
</div>
</body>
</html>
偽類選擇器
元素處於某種狀態下時會觸發的選擇器
E:hover、E:active、E:focus
上面的E代表着選擇器的意思，比如類選擇器，標簽選擇器，屬性選擇器等
E:hover 當鼠標放上去時觸發該類
E:active 元素被激活，鼠標在元素上按下且不松開
E:focus 元素聚焦時
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
div:hover{
color: red;
}
p:active{
color: blue;
}
input:focus{
background: skyblue;
}
</style>
</head>
<body>
<div>
鼠標放上去時變為紅色
</div>
<p>鼠標在這里按下別松開</p>
<input type="text" name="">
</body>
</html>
E:enabled與E:disabled
E:enabled 當指定元素處於可用狀態時
E:disabled 當指定元素處於不可用狀態時
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
input:enabled{
background: #ccc;
}
input:disabled{
background: skyblue;
}
</style>
</head>
<body>
<input type="text" placeholder="可用">
<input type="text" placeholder="禁用" disabled>
</body>
</html>
E:read-only和E:read-write
E:read-only 指定元素處於只讀狀態時的樣式
E:read-write 指定當元素處於非只讀狀態時的樣式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
input:read-only{
background: pink;
}
input:read-write{
background: skyblue;
}
</style>
</head>
<body>
<input type="text" placeholder="非只讀">
<input type="text" placeholder="只讀" readonly>
</body>
</html>
E:checked、E:default和E:indeterminate
E:checked 用來指定表單中的單選框或復選框處於選擇時的狀態
一般情況下，復選框在非選擇狀態時邊框默認為黑色
E:default 用戶打開網頁時默認處於選取模式下的控件的樣式，哪怕你手動將多選框取消選中，它依然是這個樣式
E:indeterminate 當打開網頁時，復選框或單選框沒有選擇時的樣式，選擇后者樣式將會被取消，但是目前只有opera支持這個選擇器
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
input:checked{
outline: 1px solid pink;
}
input:default{
outline: 1px solid blue;
}
input:indeterminate{
outline: 1px solid red;
}
</style>
</head>
<body>
<h2>請選擇你的技能</h2>
<div>
<label for="jn1">矢量操控</label><input type="checkbox" id="jn1" checked>
</div>
<div>
<label for="jn2">輪回眼</label><input type="checkbox" id="jn2">
</div>
<div>
<label for="jn3">幻想殺手</label><input type="checkbox" id="jn3">
</div>
<div>
<label for="jn4">全屬性滅龍魔導士</label><input type="checkbox" id="jn4">
</div>
</body>
</html>
E:selection
當元素被選擇的時候，就是鼠標選取文字的時候，你要復制文本的時候，默認是藍色背景，白色文字，你可以用這選擇去修改它的樣式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/* 注意：這是兩個冒號，如果只有一個，那是沒有效果的 */
div::selection,p::selection{
background: #000;
color: pink;
}
</style>
</head>
<body>
<p>p的文本</p>
<div>div的文本</div>
</body>
</html>
通配符 *
通配符就是指定了頁面上的所有元素，也就是所有的標簽
比如上面那段代碼，如果確定網頁上的所有文字被選取時都是那樣式的時候，其實可以這樣寫
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
*::selection{
background: #000;
color: pink;
}
</style>
</head>
<body>
<p>p的文本</p>
<div>div的文本</div>
</body>
</html>
E:invalid和E:valid
E:invalid 當元素不能通過HTML5自帶的驗證時的樣式
E:valid 當元素通過HTML5自帶的驗證時的樣式
可以先輸入數字，在鼠標點擊其他地方，讓輸入框失去焦點，會根據符不符合來選取對應的樣式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
input:invalid{
border: 1px solid red;
}
input:valid{
border: 1px solid skyblue;
}
</style>
</head>
<body>
<input type="email" name="">
</body>
</html>
E:required與E:optional
E:required 擁有required這個屬性時的樣式
E:optional 沒有required這個屬性時的樣式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
input:required{
background: red;
}
input:optional{
background: skyblue;
}
</style>
</head>
<body>
<input type="text" name="" required>
<input type="text" name="" >
</body>
</html>
E:in-range與E:out-of-range
前者是值在范圍內時的樣式，后者是值在范圍外，比如對於<input type="number" min="1" max="100">
如果數字在1到100之間，那就是第一個選擇器的樣式，如果不在這個范圍就第二個選擇器的樣式
試下輸入50和500會有什么效果
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
input:in-range{
background: red;
}
input:out-of-range{
background: skyblue;
}
</style>
</head>
<body>
<input type="number" min="1" max="100">
</body>
</html>
說下a標簽的狀態
a標簽有四個狀態
- :link 鏈接未被點擊
- :visited 鏈接被點擊過了
- :hover 鼠標在鏈接上面
- :active 鼠標在鏈接上按下並不要松開
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
a:link{
color: red;
}
a:visited{
color: green;
}
a:hover{
color: blue;
}
a:active{
color: yellow;
}
</style>
</head>
<body>
<a href="#">鏈接</a>
<a href="#">鏈接</a>
<a href="#">鏈接</a>
<a href="#">鏈接</a>
</body>
</html>
注意：
如果你發現你點擊標簽后，:hover的樣式失效了，請檢查你的書寫順序，雖然按邏輯來看是鏈接未被點擊，鼠標在鏈接上，鏈接激活也就是鼠標點擊了的瞬間，然后就是鼠標點擊后，如果按照這樣子的排列方式就出現上面所說的:hover丟失樣式的bug，應該像上面代碼那樣寫，:link->:visited->:hover->:active