一、

（一）后代选择器

后代选择器：先找到选择器1，然后在选择器1下面去查找所有选择器2，并设置属性

（1）语法：选择器1 选择器2{ }

（2）注意点

后代选择器必须使用空格隔开；
后代不仅仅包括儿子，还包括孙子，曾孙等等；

后代选择器可以无限嵌套

（二）子选择器

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

（1）语法格式：元素1>元素2{ }

例如：h1>strong{color:red}

（2）注意：

子元素选择器只会选择第一代选择器,不会选择被嵌套的其他标签
子元素选择器不仅仅可以使用标签的名称,还可以使用其他的选择器(如id、class选择器）
子选择器可以无限嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0805_02相邻的兄弟选择器变形ul+ul</title>
    <style>
 h1>strong{color:red}
    </style>
</head>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>

扫描二维码关注公众号，回复： 3685534 查看本文章

（三）兄弟选择器

1、相邻兄弟选择器：

（1）语法格式：元素1 + 元素2 { }
例如：h1+p{border:1px solid red;}
（2）注意点：元素1和元素2必须有一个共同的父级元素，并且元素2紧在其同胞元素1后面.

例1、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01相邻兄弟选择器</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            border:1px solid #000;
            margin:100px auto;
            text-align: center;
        }
        h1+p{
            color:red;
        }
        /*只选中紧接着h1标签相邻的p标签，并且h1标签和p标签拥有一个共同的父级div*/
    </style>
</head>
<body>
<div>
    <h1>h1标签</h1>
    <p>第一个p标签</p>
    <p>第二个p标签</p>
    <p>第三个p标签</p>
    <p>第四个p标签</p>
</div>
</body>
</html>

例2、

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div+p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p>I will not be styled.</p>
</body>
</html>

当然这个也会循环查找，即当两个兄弟元素相同时，会一次循环查找：

例3、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0805_02相邻的兄弟选择器变形ul+ul</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid #000;
            text-align: center;
        }
        ul+ul{
            list-style:none;
            color: red;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>第一个ul中的li</li>
        <li>第一个ul中的li</li>
        <li>第一个ul中的li</li>
    </ul>
    <ul>
        <li>第二个ul中的li</li>
        <li>第二个ul中的li</li>
        <li>第二个ul中的li</li>
    </ul>
    <ul>
        <li>第二个ul中的li</li>
        <li>第二个ul中的li</li>
        <li>第二个ul中的li</li>
    </ul>
    <ul>
        <li>第二个ul中的li</li>
        <li>第二个ul中的li</li>
        <li>第二个ul中的li</li>
    </ul>
</div>
</body>
</html>

可以看出第一个li字体颜色没有变红，第二个和第三个元素字体变红，这就是因为第三个li是第二个li的兄弟元素，所以也会应用样式。

例4、

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
</style>
</head>

<body>
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>
</body>
</html>

不论是后代选择器，子元素选择器，相邻兄弟选择器还是普通兄弟选择器，选择的都是：最后面的（挨着花括号的）元素。

2、普通兄弟选择器

普通兄弟选择器:查找某一个指定元素的后面的所有兄弟结点。

（1）语法格式：元素1 ~ 元素2{ }

例如：div~p { background-color：yellow；}

（2）注意：元素2必须跟（不一定紧跟）在其同胞元素1后面。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div~p
{
 background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>

二、ID和类选择器

（一）ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

（1）语法举例

<p id="para1">hello world</>的相应ID选择符为：

#para1{css样式声明}或p#para1{css样式声明}

（2）注意

id选择器可以忽略通配选择符

（二）类选择器

（1）语法举例

<h1 class="center">
    This heading will be center-aligned
</h1>
的相应类选择符是： .center {color:red}

（2）注意

1）如果你只想瞄准带有这个类的段落，可以把标签名和类选择符写在一起。

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0805_02相邻的兄弟选择器变形ul+ul</title>
    <style>
       h1.center {color:red}
    </style>
</head>
<body>
<h1 class="center">
    This heading will be center-aligned
</h1>

<p class="center">
    This paragraph will also be center-aligned.
</p>
</body>
</html>

2）如果你想要瞄准某个句子中的某个单词：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0805_02相邻的兄弟选择器变形ul+ul</title>
    <style>
       .center em{color:deepskyblue}
    </style>
</head>
<body>
<h1 class="center">
    This heading will be center-aligned
</h1>

<p class="center">
    This paragraph will<em>also</em>  be center-aligned.
</p>
</body>
</html>

3）如果class属性有多个空格分隔的值，要选择同时存在这两个类名的元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0805_02相邻的兄弟选择器变形ul+ul</title>
    <style>
        .color.center {color:red}
    </style>
</head>
<body>
<h1 class="color center">
    This heading will be center-aligned
</h1>
</body>
</html>

三、属性选择器

四、伪类

（一）链接伪类

link 链接等待用户点击
visited 用户此前点击过该链接
hover 鼠标正悬停在链接上
active 链接正在被点击（鼠标在元素上按下，还没有释放）

遵守一个爱恨原则LoVe/HAte,也就是Link--visited--hover--active

<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>

（二）UI元素状态伪类

UI元素状态伪类包括 ":enabled" ":disabled" ":checked"

1、":enabled" 和":disabled"

比如我们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；

2、":checked"

另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

IE6-8不支持":checked",":enabled",":disabled"这三种选择器。

（三）CSS3的:nth选择器

这节内容才是关键，也是CSS3选择器最新部分，有人也称这种选择器为CSS3结构类，下面我们通过实际的应用来具体了解他们的使用和区别，首先列出他具有的选择方法：

:first-child选择某个元素的第一个子元素；
:last-child选择某个元素的最后一个子元素；
:nth-child()选择某个元素的一个或多个特定的子元素；
:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type()选择指定的元素；
:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
:first-of-type选择一个上级元素下的第一个同类子元素；
:last-of-type选择一个上级元素的最后一个同类子元素；
:only-child选择的元素是它的父元素的唯一一个了元素；
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty选择的元素里面没有任何内容。

下面我们针对上面所列的各种选择器，一个一个来介绍：

1、:first-child

:first-child是用来选择某个元素的第一个子元素，比如我们这里的这个demo，你想让列表中的"1"具有与从不同的样式，我们就可以使用:first-child来实现：

			.demo li:first-child {background: green; border: 1px dotted blue;}

在没有这个选择器出现之前，我们都需在要第一个li上加上一个不同的class名，比如说“first”，然后在给他应用不同的样式

			.demo li.first {background: green; border: 1px dotted blue;}

其实这两种最终效果是一样的，只是后面这种，我们需要在html增加一个额外的class名，请看效果：

IE6不支持:first-child选择器。

2、:last-child

:last-child选择器与:first-child选择器的作用类似，不同的是":last-child"选择是的元素的最后一个子元素。比如说，我们需要单独给列表最后一项一个不同的样式，我们就可以使用这个选择器，如：

			.demo li:last-child {background: green; border: 2px dotted blue;}

这个效果和以前在列表上的“last”的class是一样的

			.demo li.last {background: green; border: 2px dotted blue;}

他们效显示的效果都是一致的，如图所示；

3、:nth-child()

:nth-child()可以选择某个的一个或多个特定的子元素，你可以按这种方式进行选择：

			:nth-child(length);/*参数是具体数字*/
			:nth-child(n);/*参数是n,n从0开始计算*/
			:nth-child(n*length)/*n的倍数选择，n从0开始算*/
			:nth-child(n+length);/*选择大于length后面的元素*/
			:nth-child(-n+length)/*选择小于length前面的元素*/
			:nth-child(n*length+1);/*表示隔几选一*/
			//上面length为整数

:nth-child()可以定义他的值（值可以是整数，也可以是表达式），如上面所示，用来选择特定的子元素，对于这个我们直接看实例，比我说的更好理解。

:nth-child(3),选择某元素下的第三个子元素，（这里的3可以是你自己需要的数字），比如说，我需要选择列表中的第三个li元素，那么我们可以直接这样使用：

			.demo li:nth-child(3) {background: lime;}

效果如下所示：

这种不式不能引用负值，也就是说li:nth-child(-3)是不正确的使用方法。

:nth-child(n)，其中n是一个简单的表达式，那么"n"取值是从“0”开始计算的，到什么时候结束我也不知道，如果你在实际应用中直接这样使用的话，将会选中所有子元素，比如说，在我们的demo中，你在li中使用":nth-child(n)",那么将选中所有的"li",如：

			.demo li:nth-child(n) {background: lime;} 
			等于
			.demo li {background: lime;}

他其实是这样计算的

			n=0 －－》 没有选择元素
			n=1 －－》 选择第一个li,
			n=2 －－》 选择第二个li,后在的依此类推，这样下来就选中了所有的li

请看效果：

请注意了，这里的“n”只能是"n"，不能使用其他字母代替，不然会没有任何效果的。

:nth-child(2n),这中方式是前一种的变身，我们可以选择n的2倍数，当然其中“2”可以换成你自己需要的数字，如：

			.demo li:nth-child(2n) {background: lime;}
			等于
			.demo li:nth-child(even) {background: lime;}

我们来看一下其计算的过程：

			n=0 －－》 2n=0 －－》 没有选中任何元素，
			n=1 －－》 2n=2 －－》 选择了第二个li
			n=2 －－》 2n＝4 －－》 选择了第四个li，后面的依此类推

如果是“2n”这样跟我们以使用"even"命名class定义样式，所起到的效果是一样的，如图所示：

“:nth-child(2n)”也等于":nth-child(even)"效果。

:nth-child(2n-1),这个选择器是在":nth-child(2n)"基础上演变过来的，上面说了人是选择偶数，那么我们在他的基础上减去“1”就变成奇数选择，如：

			.demo li:nth-child(2n-1) {background: lime;}

我们来看看其实现过程

			n=0 －－》 2n-1=-1 －－》 也没有选中任何元素，
			n=1 －－》 2n-1=1 －－》 选择第一个li
			n=2 －－》 2n-1=3 －－》 选择第三个li,后面的依此类推

其实实现这种奇数效果，我们还可以使用":nth-child(2n+1)"和":nth-child(odd)",一起来看他们的效果

:nth-child(n+5)这个选择器是选择从第五个元素开始选择，这里的数字你可以自己定义，如：

			.demo li:nth-child(n+5) {background: lime;}

按前面的计算方法，我们来看看，

			n=0 －－》 n+5=5 －－》  选中第5个li
			n=1 －－》 n+5=6 －－》  选择第6个li，后面的就不列出来了，原理一样

你可以使用这种方法选择你需要开始选择的元素位置，也就是说换了数字，起始位置就变了，看下在的效果图：

:nth-child(-n+5)这种选择器刚好和上面的选择器相反，这个是选择第5个前面的，如：

			.demo li:nth-child(-n+5) {background: lime;}

如果不清楚怎么一回事，你只要计算一下就明白了

			n=0 －－》 -n+5=5 －－》 选择了第5个li
			n=1 －－》 -n+5=4 －－》 选择了第4个li
			n=2 －－》 -n+5=3 －－》 选择了第3个li
			n=3 －－》 -n+5=2 －－》 选择了第2个li
			n=4 －－》 -n+5=1 －－》 选择了第1个li
			n=5 －－》 -n+5=0 －－》 没有选择任何元素

从上面的计算方法中，大家很清楚的知道是怎么得来的，最后我们一起看看效果吧：

:nth-child(4n+1)这种方法是实现隔几选一的效果，比如我们这里是隔三选一，如果你把"4"换成别的数字那就是另外的一种隔法了，比如这个实例

			.demo li:nth-child(4n+1) {background: lime;}

我们主要来看其计算出来的结果

			n=0 －－》4n+1=1 －－》选择了第一个li
			n=1 －－》4n+1=5 －－》选择了第五个li
			n=2 －－》4n+1=9 －－》选择了第九个li

效果如下

IE6-8和FF3-浏览器不支持":nth-child"选择器。

4、:nth-last-child()

":nth-last-child()"选择器和前面的":nth-child()"很相似，只是这里多了一个last，所以他起的作用就和前面的":nth-child"不一样了，他只要是从最后一个元素开始算，来选择特定元素。我们来看几个实例：

			.demo li:nth-last-child(4) {background: lime;}

上面代码表示选择倒数第四个列表项，效果如下：

其中":nth-last-child(1)"和":last-child"所起作用是一样的，都表示的是选择最后一个元素。

另外":nth-last-child()"也可以像“:nth-child()”一样，可以使用表达式来选择特定元素，下面我们来看几个特殊的表达式所起的作用

:nth-last-child(2n),这个表示的是从元素后面计算，选择的是偶数个数，从而反过来说就是选择元素的奇数，和前面的":nth-child(2n+1)",":nth-child(2n-1)",":nth-child(odd)"所起的作用是一样的。如：

			.demo li:nth-last-child(2n) {background: lime;}
			.demo li:nth-last-child(even) {background: lime;}
			等于
			.demo li:nth-child(2n+1) {background: lime;}
			.demo li:nth-child(2n-1) {background: lime;}
			.demo li:nth-child(odd) {background: lime;}

请看效果：

:nth-last-child(2n-1)这个选择器刚好跟上面的相反，从后面计算选择的是奇数，而从前面计算选择的就是偶数位了，这个前面的":nth-child(2n)"之类是相同的效果，如：

			.demo li:nth-last-child(2n+1) {background: lime;}
			.demo li:nth-last-child(2n-1) {background: lime;}
			.demo li:nth-last-child(odd) {background: lime;}
			等于：
			.demo li:nth-child(2n) {background: lime;}
			.demo li:nth-child(even) {background: lime;}

效果如下

看了这几个实例，大家都知道":nth-last-child()"和"nth-child()"使用方法是一样的，只不过他们的区别是“:nth-child()”是从元素的第一个开始计算，而“:nth-last-child()”是从元素的最后一个开始计算，他们的计算方法都是一样的。同样在IE6-8和FF3.0-浏览器不支持“:nth-last-child()”选择器。

5、:nth-of-type

:nth-of-type类似于:nth-child，不同的是他只计算选择器中指定的那个元素,其实我们前面的实例都是指定了具体的元素，这个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处，比如说，我们div.demo下有好多p元素，li元素，img元素等，但我只需要选择p元素，并让他每隔一个p元素就有不同的样式，那我们就可以简单的写成：

			.demo p:nth-of-type(even) {background-color: lime;}

其实这种使用和:nth-child使用是一样的，也可以使用:nth-child的那些表达式和使用方法，唯一不同的是这种指定了元素的类型而以。同样在IE6-8和FF3.0-浏览器不支持这种选择器

6、:nth-last-of-type

这个选择器不用说大家都能想得到了，他和前面的:nth-last-child一样使用，只是他指一了元素的类型而以。

同样在IE6-8和FF3.0-浏览器不支持这种选择器

7、:first-of-type和:last-of-type

:first-of-type和:last-of-type这两个选择器就类似于:first-child和:last-child;不同之处就是指定了元素的类型。

:nth-of-type,:nth-last-of-type;:first-of-type和:last-of-type实际意义并不是很大，我们前面讲的:nth-child之类选择器就能达到这此功能，不过大家要是感兴趣还是可以了解一下，个人认为实用价值并不是很大。此类说法仅供参考。

8、:only-child和:only-of-type

":only-child"表示的是一个元素是它的父元素的唯一一个子元素。我们一起来看一个实例更好理解

			<div class="post">
	    	<p>Lorem ipsum dolor sit amet, consectetur</p>
	    	<p>Lorem ipsum dolor sit amet, consectetur</p>
	    </div>
	    <div class="post">
	    	<p>Lorem ipsum dolor sit amet, consectetur</p>
	    </div>

css样式

			.demo .post p {background: lime;}

初步效果

如果我需要在div.post只有一个p元素的时候，改变这个p的样式，那么我们现在就可以使用:only-child,如：

			.demo .post p {background: lime;}
			.demo .post p:only-child {background: red;}

此时只有div.post只有一个子元素p时，那么他的背景色将会改变,如图所示：

:only-of-type是表示一个元素他有很多个子元素，而其中只有一个子元素是唯一的，那么我们使用这种选择方法就可以选择中这个唯一的子元素，比如说

			<div class="post">
	    	<div>Lorem ipsum dolor sit amet, consectetur</div>
	    	<p>Lorem ipsum dolor sit amet, consectetur</p>
			  <div>Lorem ipsum dolor sit amet, consectetur</div>
	    </div>

如果我们想只选择中上面中的p元素，我们就可以这样写，

			p:only-of-type{background-color:red;}

IE6-8浏览器不支持:only-child选择器；IE6-8和FF3.0-浏览器不支持:only-of-type选择器。

9、:empty

:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格，比如说，你有三个段落，其中一个段落什么都没有，完全是空的，你想这个p不显示，那你就可这样来写：

			p:empty {display: none;}

IE6-8浏览器不支持:empty选择器

三、否定选择器（:not）

否定选择器和jq中的:not选择器一模一样，就拿form中的元素来说明这个选择器的用法，比如你想对form中所有input加边框，但又不想submit也起变化，此时就可以使用:not为实现

			input:not([type="submit"]) {border: 1px solid red;}

否定选择器 :not()，可以让你定位不匹配该选择器的元素。IE6-8浏览器不支持:not()选择器

CSS总结篇之选择器

一、