css——常用選擇器
阿新 • • 發佈：2019-03-19
偽元素 list inpu type css 無標題 border 超鏈接 doc
一，常用的基本選擇器
1.最基本的了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本選擇器</title> <style type="text/css"> /*通配符選擇器*/ * { margin: 0; padding: 0; border: none; } /*元素選擇器*/ body { background: #eee; } /*類選擇器*/ .list { list-style: square; } /*ID選擇器*/ #list { width: 500px; margin: 0 auto; } /*後代選擇器*/ .list li { margin-top: 10px; background: #abcdef; } /*選擇器分組*/ #list,.second{background: pink;} </style> </head> <body> <ul id="list" class="list"> <li class="first">1</li> <li class="second">2</li> <li>3</li> <li>4</li> </ul> </body> </html>
2，子元素和兄弟選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子元素選擇器</title> <!--我們也可以稱它為直接後代選擇器--> <style type="text/css"> #wrap>.inner { color: pink; border: 1px solid; } /* 這被稱為一個相鄰兄弟選擇器. 它只會匹配緊跟著的兄弟元素 緊跟！！！！ */ #wrap>#first+.inner { color: blue; border: 1px solid; } /* 在使用 ~ 連接兩個元素時,它會匹配第二個元素, 條件是 它必須跟(不一定是緊跟)在第一個元素之後, 且他們都有一個共同的父元素 */ #wrap2 #second~div { border: 1px solid #f5f5f5; /*color: pink;*/ } </style> </head> <body> <div id="wrap"> <div class="inner"> wrap下一層 <div class="inner"> 最裏層</div> <!-- 孫子層無效果 --> </div> <div class="inner">wrap下一層</div> <div class="inner">inner</div> <div id="first">first</div> <div class="inner">inner <!-- 此行生效 --> </div> <div id="wrap2"> <div id="second">first</div> <p></p> <div class="inner">inner <div>inner2</div> </div><!-- 生效 --> <div class="inner">inner</div><!-- 生效 --> <div class="inner">inner</div><!-- 生效 --> <div class="inner">inner</div><!-- 生效 --> </div> </div> </body> </html>
二，元素選擇器
<meta charset="UTF-8"> <title>存在和值屬性選擇器</title> <style type="text/css"> /* [attr]：該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。 */ [name] { border: 1px solid; } /* [attr=val]：該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素。 */ [name="atguigu_llc"] { font-size: 22px; } /* [attr~=val]：該選擇器僅選擇 attr 屬性的值（以空格間隔出多個值）中有包含 val 值的所有元素， 比如位於被空格分隔的多個類（class）中的一個類。 */ [name~="atguigu"] { font-size: 10px; } /* [attr|=val] : 選擇attr屬性的值以val（包括val）或val-開頭的元素 [attr^=val] : 選擇attr屬性的值以val開頭（包括val）的元素。 [attr$=val] : 選擇attr屬性的值以val結尾（包括val）的元素。 [attr*=val] : 選擇attr屬性的值中包含字符串val的元素。 */ [name*="atguigu"] { background: pink; } </style> </head> <body> <div name="atguigu_llc">李立超</div> <div name="atguigu-llc atguigu">李票</div> <div name="atguigu-xfz">曉飛張</div> <div name="atguigu-bhj atguigu">白浩傑</div> <div name="atguigu_sym">腿長1米8</div> <div>佟剛</div> </body> </html>
三，偽類與偽元素選擇器
1.鏈接偽類和動態偽類
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--:link：表示作為超鏈接，並指向一個未訪問的地址的所有錨--> <style type="text/css"> a { text-decoration: none; } /* 錨點偽類 點擊後，已經點擊過的 */ a:visited { color: rgb(201, 131, 110); } /* 錨點偽類 點擊後鼠標未松開 */ a:link { color: deeppink; } /* 錨點偽類 不是a標簽，無效果 */ #test:link { background: pink; } /* 動態偽類 鼠標移上去時*/ a:hover { color: blue; } /* 動態偽類 鼠標點擊時未松開*/ a:active { color: aqua; } /* 動態偽類 有效果時*/ #test:link { background: pink; } </style> </head> <body> <a href="#">點我點我點我</a> <div id="test">我是div啦</div> </body> </html>
2.表單相關偽類
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文檔</title> <style> input { width: 100px; height: 30px; color: #000; } /* 可用和不可用 */ input:enabled { color: red; } input:disabled { color: blue; } input:checked { width: 100px; height: 100px; } /* 獲取焦點 */ input:focus { background: pink; } div:focus { background: pink; } </style> </head> <body> <input type="text" value="曉飛張" /> <input type="text" value="曉飛張" disabled="disabled" /> <input type="checkbox" /> <input type="text" value="" /> <div style="width: 200px;height: 200px;background: deeppink;" contenteditable="true"></div> </body> </html>
3.結構性偽類元素
/* :first-of-type p:first-of-type 選擇每個p元素是其父級的第一個p元素 :last-of-type p:last-of-type 選擇每個p元素是其父級的最後一個p元素 :only-of-type p:only-of-type 選擇每個p元素是其父級的唯一p元素 :nth-of-type(n) p:nth-of-type(2) 選擇每個p元素是其父級的第二個p元素 ..... */
css——常用選擇器