css attribute属性匹配、nth-last-child元素位置索引匹配等复杂选择器使用总结

css有很多选择器，常见的有：根据id、class、html标签等，除此之外还有一些复杂的选择器，比如：按属性匹配、查找紧接在div元素之后的所有p元素、最后一个child、empty空元素等复杂选择器，本文就css 复杂选择器做一总结。

1、元素父子关系、前后关系选择器

先解释下何为子元素，比如下述html, span是p的子元素，但不是div的子元素。

<div><p>里面有个span。<span>我是span</span></p></div>

1）element>element， div>span 选择父元素为div元素的所有span元素。

<style>
	div>span{background-color:yellow;}
</style>
<div>
	<span>唐老鸭</span>
	<p><span>黛西</span></p>
</div>

上述css只会让唐老鸭背景色变成黄色，而黛西不变，原因黛西不是div的直接子元素。

2）element+element，div+p, 选择紧接在div元素之后的所有p元素

<style>
	div+p{color:yellow;}
</style>
<div>
	<p>我是唐老鸭。</p>
	<p>我住在 Duckburg。</p>
</div>
<p>我会变黄色</p>
<p>我不会变黄色</p>

上述css，“我不会变黄色” p标签因为紧接的不是div而是p所以不会变成黄色。

3）element1~element2，p ~ ul, 选择前面有p元素的每个ul元素。

<style> 
	p~ul{ background:#ff0000;}
</style>
<div>一个 div 元素。</div>
<ul>
  <li>item</li>
</ul>
<p>第一段。</p>
<ul>
  <li>item1</li>
</ul>
<h2>另一个列表</h2>
<ul>
  <li>item2</li>
</ul>

上述css，item1、item2的父元素ul都会变成红底，而item对应的ul则不会，原因是该ul前没有p元素。

2、属性选择器

属性选择器，css2和css3不太一致，个人感觉css3更加符合正则表达式特性，因此以css3来讲解属性选择器。

选择器	案例	描述
[attribute]	[target]	选择带有 target 属性所有元素
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素
[attribute^=value]	a[src^=“https”]	选择其 src 属性值以 “https” 开头的每个a元素
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 “.pdf” 结尾的所有a元素
[attribute*=value]	a[src*=“abc”]	选择其 src 属性中包含 “abc” 子串的每个a元素

实际应用中，用的比较多的可能就是[attribute]属性泛选择器和[attribute=value]属性精确匹配选择器，看个DEMO。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
	body{line-height: 1.425;}
	a {padding: 4px 8px}
	a[target] { background-color: yellow; }
	a[target=_top] { background-color: red; }
	a[href*='.com'] {font-size: 24px;}
	a[href$='.com'] {font-weight: bold; font-size: 34px}
</style>
</head>
<body>
	<a href="http://www.w3school.com.cn">w3school.com.cn</a>
	<a href="http://www.disney.com" target="_blank">disney.com</a>
	<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>

3、位置索引选择器

关于位置索引选择器，有2类：*-type 和 *-child，后者包含前者，后者不区分标签类型，而前者统计的是同一个标签类型子元素，看下表。

选择器	案例	描述
: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元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数
–	–	–
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 p元素
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 p 元素
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 p元素
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 p元素
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数

*-type DEMO

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style> 
	p:first-of-type { background:#ff0000;}
	p:nth-of-type(2) { background:#00ff00; }
	p:nth-last-of-type(2) { background:#0000ff; }
	p:last-of-type { background:#ffff00;}
	h1:only-of-type{ background: #f00;}
</style>
</head>
<body>
	<h1>这是标题,红色背景,第一个P红底，第二P绿底，倒数第二个P蓝底，最后一个P黄底</h1>
	<p>这是第一个段落。</p>
	<p>这是第二个段落。</p>
	<p>这是第三个段落。</p>
	<p>这是第四个段落。</p>
</body>
</html>

*-child DEMO, 把type DEMO的type全变成child，如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style> 
	p:first-child { background:#ff0000;}
	p:nth-child(2) { background:#00ff00; }
	p:nth-last-child(2) { background:#0000ff; }
	p:last-child { background:#ffff00;}
	h1:only-child{ background: #f00;}
</style>
</head>

<body>
	<h1>这是标题,第一个P绿底，倒数第二个P蓝底，最后一个P黄底</h1>
	<p>P1: 这是第一个段落。</p>
	<p>P2: 这是第二个段落。</p>
	<p>P3: 这是第三个段落。</p>
	<p>P4: 这是第四个段落。</p>
</body>
</html>

4、位置索引选择器延伸，条纹样式的典型应用

位置索引选择器的一个典型应用就是条纹样式，比如boot-strap的table，css如何实现呢？

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。

案例1
Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1），分不清Odd是奇数还是偶数的同学，请记住奇数个字母的odd表示奇数，偶数个字母的even表示偶数。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style> 
	tr:nth-child(odd) { background:#ff0000; }
	tr:nth-child(even) { background:#0000ff; }
</style>
</head>
<body>
<h1>这是个条纹显示表格,奇数行红底，偶数行蓝底</h1>
<table border=1>
	<tr><td>1</td>
		<td>第一行</td></tr>
	<tr><td>2</td>
		<td>第二行</td></tr>
	<tr><td>3</td>
		<td>第三行</td></tr>
	<tr><td>4</td>
		<td>第四行</td></tr>
	<tr><td>5</td>
		<td>第五行</td></tr>								
</table>
</body>
</html>

案例2:
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
我们用公式实现案例1的表格条纹效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style> 
	/*tr:nth-child(odd) { background:#ff0000; }*/
	/*tr:nth-child(even) { background:#0000ff; }*/
	tr:nth-child(2n+1){ background:#ff0000; }
	tr:nth-child(2n+0){ background:#0000ff; }
</style>
</head>
<body>
<h1>这是个条纹显示表格,奇数行红底，偶数行蓝底</h1>
<table border=1>
	<tr><td>1</td>
		<td>第一行</td></tr>
	<tr><td>2</td>
		<td>第二行</td></tr>
	<tr><td>3</td>
		<td>第三行</td></tr>
	<tr><td>4</td>
		<td>第四行</td></tr>
	<tr><td>5</td>
		<td>第五行</td></tr>								
</table>
</body>
</html>