CSS选择器

CSS选择器

一、元素选择符

html{color: black;}
h1{color: gray;}
h2{color: silver};

二、群组选择符

h2, p{color: gray;};

三、通用选择符

*{color: red};	

四、类选择符

<p class="one" class="two">Mr.Yao</p>
.one{color: red;}
p.one{color: red
.one.two{color: red;}
p.one.two{color: red;}

五、ID选择符

<p id="one">Mr.Yao</p>
*#yao{color: red;}
#yao{color: red;}
p#yao{color: red;}

六、简单属性选择符

<h1 class="one" id="two">Mr.Yao</h1>
h1[class]{color: red;}
*[class]{color: red;}
h1[class][id]{color: red;}

七、根据精准的属性值选择

<a href="htt://www.baidu.com" class="one two">Baidu</a>
a[href="http://www.baidu.com"]{color: red;}
a[href="http://www.baidu.com"][class="one two"]{color: red;}

八、根据部分属性值选择

形式	说明
[foo|="bar"]	选择的元素有foo属性，且其值以bar和一个英文破折号（U+002D）开头，或者值就是bar本身
[foo~="bar"]	选择的元素有foo属性，且其值是包含bar这个词的一组词
[fooo*="bar"]	选择的元素有foo属性，且其值包含字串bar
[foo^="bar"]	选择的元素有foo属性，且其值以bar开头
[foo$="bar"]	选择的元素有foo属性，且其值以bar结尾

<h1 lang="en">Hello</h1>
<p lang="en-us">Greetings</p>
<div lang="en-au">G'day</div>
<p lang="fr">Bonjour</p>
<h4 lang="cy-en">Jrooana</h4>
*[lang|="en"]{color: red;}
/*选择lang属性的值为en或者en-开头的元素*/

<span class="barren rocky">Mercury</span>
<span class="cloudy barren">Venus</span>
<span class="life-bearing cloudy">Earth</span>
span[class~="cloudy"]{color: red;}

<span class="barren rocky">Mercury</span>
<span class="cloudy barren">Venus</span>
<span class="life-bearing cloudy">Earth</span>
span[class*="cloud"]{color: red;}

<a href="http://www.baidu.com">Baidu</a>
a[href^="http"]{color: red;}

<a href="http://www.baidu.com">Baidu</a>
a[href$=".com"]{color: red;}

九、不区分大小写的标识符

<planet type="barren rocky">Mercury</planet>
<planet type="cloudy ROCKY">Venus</planet>
<planet type="life-bearing Rock">Earth</planet>
planet[type*="rock" i]{color: red;}

十、后代选择符

<h1><em>Mr.Yao</em></h1>
h1 em{color: red;}

十一、选择子元素

<h1>This is <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
h1 > strong{color: red;}

十二、选择紧邻同胞元素

<div>
	<ol>
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
	</ol>
	<ul>
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
	</ul>
	<p>Mr.Yao</p>
</div>
li + li{font-weight: bold;}

十三、选择后续同胞

<div>
	<ol>
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
	</ol>
	<ul>
		<li>One</li>
		<li>Two</li>
		<li>Three</li>
	</ul>
	<p>Mr.Yao</p>
</div>
ol ~ p{font-weight: bold;}

十四、选择根元素

在HTML中根元素始终是html。

:root{border: 10px dotted gray;}

十五、选择空元素

:empty{display: none;}

十六、选择唯一的子代

<a href="http://w3.org/"><img src="w3.png" alt="W3C"></a>
<a href="http://w3.org/"><img src="w3.png" alt=""> The W3C</a>
<a href="http://w3.org/"><img src="w3.png" alt=""><em>The W3C</em><a>
a[href] img:only-child{border: 2px solid black;}

十七、选择同胞元素中的唯一元素

<a href="http://w3.org/"><b>*</b><img src="w3.png" alt="W3C"></a>
<a href="http://w3.org"/><span><b>*</b><img src="w3.png" alt="W3C"></span></a>
a[href] img:only-of-type{border: 5px solid black;}

十八、选择第一个和最后一个子代

<div>
	<p>There are the necessary steps:</p>
	<ul>
		<li>Insert key</li>
		<li>Turn Key</li>
		<li>Push accelerator</li>
	</ul>
	<p>push the break at the same time as accelerator</p>
</div>
p:first-child{color: red;}
p:last-child{color: rend;}

十九、选择第一个和最后一个某种元素

<div>
	<p>There are the necessary steps:</p>
	<ul>
		<li>Insert key</li>
		<li>Turn Key</li>
		<li>Push accelerator</li>
	</ul>
	<p>push the break at the same time as accelerator</p>
</div>
p:first-of-type{color: red;}
p:last-of-type{color: rend;}

二十、选择每第n个子元素

<div>
	<p>These are the necessary steps:</p>
	<ul>
		<li>Insert key</li>
		<li>Turn key <strong>clockwise</strong></li>
		<li>Push accelerator</li>
	</ul>
	<p>
		Do <em>not</em>push the break at the same time as the accelerator
	</p>
</div>
p:nth-child(1){font-weight: bold;}
li:nth-child(1){text-transform: uppercase;}

:nth-child(2n+1)或者:nth-child(2n-1)选择的是奇数位的子代。
两个关键字even和odd。

:nth-last-child()从一组同胞的最后一个元素开始，从后向前计算。

二十一、选择每第n个某种元素

p > a:nth-of-type(even){backgroud: blue; color: white;}