一、结构性伪类选择器

1、类选择器
在css中可以使用类选择器把相同的元素定义成不同的样式。比如：

p.left{text-align: left}
 p.rigth{text-align: right}

2、伪类选择器
类选择器和伪类选择器的区别在于，类选择器我们可以随意起名，而伪类选择器是CSS中已经定义好的选择器，不可以随意起名。
最常见的伪类选择器

a:link{ color: #ff6600 } 未被访问的链接
 a:visited{ color: #87b291 } 已被访问的链接
 a:hover{ color: #6535b2 } 鼠标指针移动到链接上
 a:active{ color: #55b28e } 正在被点击的链接

3、伪元素选择器
伪元素选择器，针对于CSS中已经定义好的伪元素使用的选择器。
使用方法：
选择器：伪元素{属性：值}
与类配合使用
选择器.类名：伪元素{属性：值}

4、在CSS中，主要有四个伪元素选择器。

1）、first-line伪元素选择器
first-line伪元素选择器用于向某个元素中的第一行文字使用样式。

2）、first-letter伪元素选择器
first-letter伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或者是日文等汉字）使用样式。

3）、before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容。

4）、after伪元素选择器
after伪元素选择器用于在某个元素之后插入内容。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>伪类选择器以及伪元素</title>
    <style>
        :root{
            background: #126fb0;
        }
        body{
            background: #ffffff;
        }
        p.aaas{
            text-align: left;
            color: red;
        }
        p.right{
            text-align: right;
            color: green;
        }
        a:link{
            color: #000;
        }
        a:visited{
            color: fuchsia;
        }
        a:hover{
            color :green;
        }
        a:active{
            color: #ff6600;
        }
        p:first-line{
            color: #f60;
        }
        p:first-letter{
            color: green;
            font-size: 24px;
        }
        li{
            list-style: none;
        }
        li:before{
            content:"...";
            color: red;
        }
        li:after{
            content: "__after追加";
            color: #ff6600;
        }
    </style>
</head>
<body>
<h1>类选择器</h1>
<p class="aaas">伪类选择器以及伪元素</p>
<p class="right">伪类选择器以及伪元素</p>

<br/>
<a href="index1.html">伪类选择器</a>
<br/>
<p>
        在CSS中，主要有四个伪元素选择器<br/>
        first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
</p>
<ul>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
</ul>
</body>
</html>

5、结构性伪类选择器root、not、empty和target
1）、root选择器
root选择器将样式绑定到页面的根元素中。
2）、not选择器
想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，我们就可以使用not选择器。
3）、empty选择器
empty选择器指定当元素中内容为空白时使用的样式。
4）、target选择器
target选择器对页面中某个target元素指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

root、not、empty的代码总和：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>TARGET</title>
    <style>
        :target{
            background: #000;
            color: #fff;
        }
    </style>
</head>
<body>
<a href="#A">A</a>
<a href="#B">B</a>
<a href="#C">C</a>
<a href="#D">D</a>
<div id="A">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="B">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="C">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="D">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
</body>
</html>

target的代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>TARGET</title>
    <style>
        :target{
            background: #000;
            color: #fff;
        }
    </style>
</head>
<body>
<a href="#A">A</a>
<a href="#B">B</a>
<a href="#C">C</a>
<a href="#D">D</a>
<div id="A">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="B">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="C">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="D">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
</body>
</html>

6、选择器first-child、last-child、nth-child和nth-last-child
1）、first-child选择器
first-child单独指定第一个子元素的的样式。
li:first-child{
background: #ff6600;
}

2）、last-child选择器
last-child单独指定最后一个子元素的的样式。

li:last-child{
            background: green;
   }

3）、nth-child选择器
nth-child(n) 选择器匹配正数下来第 N 个子元素
nth-child(odd)选择器匹配正数下来第奇数个子元素
nth-child(even)选择器匹配正数下来第偶数个子元素

li:nth-child(odd){
            background: red;
        }

4）、nht-last-child选择器
nth-last-child(n) 选择器匹配倒数数下来第 N 个子元素
nth-last-child(odd)选择器匹配倒数数下来第奇数个子元素
nth-last-child(even)选择器匹配倒数下来第偶数个子元素

li:nth-last-child(odd){
            background: green;
        }
li:nth-last-child(even){
            background:gray;
        }

7、选择器nth-of-type和nth-last-of-type

1）、在使用nth-child和nth-last-child时产生的问题
在案例中指定奇数文章的标题背景为黄色，偶数文章的标题为绿色。

h2:nth-child(even){
            background: #693ada;
        }
h2:nth-of-type(odd){
            background: #126fb0;
        }

2）、使用nth-of-type和nth-last-of-type
nth-of-type和nth-last-of-type在css3中就是用来避免上面这类问题的发生，在统计的时候就只针对同类型的子元素进行计算。
nth-of-type正数
nth-last-of-type倒数

h2:nth-last-of-type(even){
            background: #f60;
        }

兼容性：
nth-of-type和nth-last-of-type都是CSS3开始提供需要在IE8以上的浏览器才会被支持，Chrome浏览器、Firefox浏览器、Opera浏览器、Safari浏览器都支持！

8、循环使用样式
nth-child(An+B)A表示每次循环中共包括几种样式，B表示指定的样式在循环中所处的位置。

li:nth-child(3n+1){
            background: #126fb0;
        }
        li:nth-child(3n+2){
            background: #ff6600;
        }li:nth-child(3n+3){
            background: #ff1b00;
        }
        li:nth-child(4n+3){
            background: #000000;
        }
        li:nth-child(4n+4){
            background: green;
        }

9、only-child选择器
only-child选择器，只对唯一的子元素起作用。

li:only-child{
            background: #ff1b00;
        }

二、UI元素状态伪类选择器

1、选择器E:hover、E:active和E:focus

1)、E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式
使用方法：
<元素>:hover{
CSS样式
}
我们可以在“<元素>”中添加元素的type属性。
例：
input[type=“text”]:hover{
CSS样式
}

2)、E:active选择器被用来指定元素被激活时使用的样式
3)、E:focus选择器被用来指定元素获得光标聚焦点使用的样式，主要是在文本框控件获得聚焦点并进行文字输入时使用。
4)、小案例：
结合上诉实现以下效果，当鼠标移动上去是文本框变成绿色，当鼠标点击时（点击并未谈起）文本框处于蓝色，当处于可输入状态时文本框变成橙色。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>选择器E:hover、E:active和E:focus</title>
    <style>
        input[type="text"]:hover{
            background: green;
        }

        input[type="text"]:focus{
            background: #ff6600;
            color: #fff;
        }

        input[type="text"]:active{
            background: blue;
        }
        input[type="password"]:hover{
            background: red;

        }
    </style>
</head>
<body>
<h1>选择器E:hover、E:active和E:focus</h1>
<form>
    姓名：<input type="text" placeholder="请输入姓名">
    <br/>
    <br/>
    密码：<input type="password" placeholder="请输入密码">
</form>
</body>
</html>
2、E:enabled伪类选择器

1)、E:enabled选择器被用来指定当元素处于可用状态时的样式。
2)、E:disabled选择器被用来指定当元素处于不可用状态时的样式。
3)、小案例：
结合上诉实现以下效果，文本框可用时背景颜色绿色，不可用时背景变成浅灰色。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>E:enabled伪类选择器与E:disabled伪类选择器</title>
    <style>
        input[type="text"]:enabled{
            background: green;
            color: #ffffff;
        }
        input[type="text"]:disabled{
            background: #727272;

        }
    </style>
</head>
<body>
<h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>
<form>
    姓名：<input type="text" placeholder="请输入姓名" disabled>
    <br/>
    <br/>
    学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>
3、E:read-only伪类选择器

1)、E:read-only选择器被用来指定当元素处于只读状态时的样式。
2)、E:read-write选择器被用来指定当元素处于非只读状态时的样式。
3)、小案例：
结合上诉实现以下效果，文本框可用时输入文字变成红色，不可用时，设置里面的背景为黑色，文字为绿色。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>read-only伪类选择器与E:read-write伪类选择器</title>
    <style>
        input[type="text"]:read-only{
            background: #000;
            color: green;
        }
        input[type="text"]:read-write{
            color: #ff6600;
        }
    </style>
</head>
<body>
<h1>read-only伪类选择器与E:read-write伪类选择器</h1>
<form>
    姓名：<input type="text" placeholder="请输入姓名" value="朱朝兵" readonly>
    <br/>
    <br/>
    学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>
4、伪类选择E:checked、E:default和indeterminate

1)、E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
2)、E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
3)、E:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。
4)、小案例：
A、模拟一个发布房产信息的选框控件，当选择以后，会给他一个2px 实线 绿色的边框！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>checked伪类选择器</title>
    <style>
        input[type="checkbox"]:checked{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1>checked伪类选择器</h1>
<form>
    房屋状态：
    <input type="checkbox">水
    <input type="checkbox">电
    <input type="checkbox">气
    <input type="checkbox">光纤
</form>
</body>
</html>

B、实现一个默认选择中的控件，默认给他一个2px 实线 绿色的边框！
效果：
当他去掉勾以后还会有样式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>default伪类选择器</title>
    <style>
        input[type="checkbox"]:default{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1>default伪类选择器</h1>
<form>
    房屋状态：
    <input type="checkbox" checked>水
    <input type="checkbox">电
    <input type="checkbox">气
    <input type="checkbox">光纤
</form>
</body>
</html>

C、实现一个在默认打开都没有选中时，给他们一个2px 实线 绿色的边框！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>indeterminate伪类选择器</title>
    <style>
        input[type="radio"]:indeterminate{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1>indeterminate伪类选择器</h1>
<form>
    性别：
    <input type="radio">男
    <input type="radio">女
</form>
</body>
</html>
5、伪类选择器E::selection

1)、E:selection伪类选择器用来指定当元素处于选中状态时的样式。
2)、小案例：
选择网页中p段落中的文字和文本框中的文字，改变他的背景颜色为绿色！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>伪类选择器E::selection</title>
    <style>
        ::selection{
            background: green;
            color: #ffffff;
        }
        input[type="text"]::selection{
            background: #ff6600;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1>伪类选择器E::selection</h1>
<p>今天，我们在这里隆重举行南京大屠杀死难者国家公祭仪式，缅怀南京大屠杀的无辜死难者，缅怀所有惨遭日本侵略者杀戮的死难同胞，缅怀为中国人民抗日战争胜利献出生命的革命先烈和民族英雄，表达中国人民坚定不移走和平发展道路的崇高愿望，宣示中国人民牢记历史、不忘过去，珍爱和平、开创未来的坚定立场。</p>
<input type="text" placeholder="文本">
</body>
</html>
6、E:invalid伪类选择器与E:valid伪类选择器

1)、E:invalid伪类选择器用来指定，当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。
2)、E:valid伪类选择器用来指定，当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。
3)、小案例：
通过Email属性的表单判断输入是否正确，正确输入的内容为绿色，输入错误就是红色！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>E:invalid伪类选择器与E:valid伪类选择器</title>
    <style>
        input[type="email"]:invalid{
            color: red;
        }
        input[type="email"]:valid{
            color: green;
        }
    </style>
</head>
<body>
<h1>E:invalid伪类选择器与E:valid伪类选择器</h1>
<form>
    <input type="email" placeholder="请输入邮箱">
</form>
</body>
</html>
7、E:required伪类选择器与E:optional伪类选择器

1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。
3)、小案例：
姓名必填表单背景红色，年龄可选填表单背景绿色

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>E:required伪类选择器与E:optional伪类选择器</title>
    <style>
    input[type="text"]:required{
        background: red;
        color: #ffffff;
    }
        input[type="text"]:optional{
            background: green;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1>E:required伪类选择器与E:optional伪类选择器</h1>
<form>
    姓名：<input type="text" placeholder="请输入姓名" required>
    <br/>
    <br/>
    学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>
8、E:in-range伪类选择器与E:out-of-range伪类选择器

1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。
3)、小案例：
0-100以内的数字，小于0或超过100字体变成红色，否则绿色。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>
    <style>
        input[type="number"]:in-range{
            color: #ffffff;
            background: green;

        }
        input[type="number"]:out-of-range{
            background: red;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1>
<input type="number" min="0" max="100" value="0">
</body>
</html>

三、通用兄弟元素选择器

通用兄弟元素选择器
他用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。

使用方法：
<子元素>~<之元素之后的同级兄弟元素>{
CSS样式
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        span~p{
            background: green;
        }
    </style>
</head>
<body>
<div>
    <span>123465164</span>
    <span>123465164</span>
    <p>今天太阳可真大啊</p>
    <p>今天太阳可真大啊</p>
    <p>今天太阳可真大啊</p>

</div>
<span>123465164</span>
<p>今天太阳可真大啊</p>
<p>今天太阳可真大啊</p>
<p>今天太阳可真大啊</p>
<p>今天太阳可真大啊</p>
<div>
    <p>今天太阳可真大啊</p>
    <p>今天太阳可真大啊</p>
    <p>今天太阳可真大啊</p>
</div>
<p>今天太阳可真大啊</p>
<p>今天太阳可真大啊</p>
</body>
</html>

四、使用选择器在页面中插入内容

1、插入文字

1）使用选择器插入内容
在CSS2中，使用before选择器在元素前面插入内容，使用after在元素后面插入内容，在选择器content属性中定义要插入的内容。

例如对H2使用before选择器在H2的前面插入文字“Title”。

<style type="text/css"> 
 h2:before{
 content:"Title";
 }
 </style>

并且我们还可以给他定义样式，进行美化操作。
比如我们给“Title”的文字设置为白色，加上绿色的背景，内边距上下1像素左右5像素，外边距右边5像素，当然还可以设置他的字体等等。

2）排除一些不需要插入内容的元素
使用content属性的追加一个none属性值。
比如：

2、插入图片

1）插入图片文件
使用before或者after除了可以在元素前后插入文字之外还可以插入图片。
在插入图片是需要使用URL指定图片的路径，比如在标题前插入一张图片！

比如：

<style type="text/css"> 
 h2:before{
 content:url(1.gif);
 }
 </style>

2）插入图片文件的好处
节省开发人员的工作量，比如可以通过类的方式来进行不同标题图片的追加！
比如我们给标题定义一个“hot”“digest”分别来调用一张站的图标个顶的小图标！

<style type="text/css"> 
 h2.hot:before{ content:url(hot.gif); }
 h2.digest:before{ content:url(digest.gif); }
 </style>
<h2 class="hot">这是标题测试</h2>
<h2 class="digest">这是标题测试</h2>
<h2 class="hot">这是标题测试</h2>
<h2>这是标题测试</h2>
<h2>这是标题测试</h2>
3、插入项目编号

1）在多个标题前加上连续编号
在content属性中使用counter属性来正对对个项目追加连续的编号。
使用方法：

元素:before{
 content:counter(计数器);
 }

使用计数器来计算编号，计数器可以任意命名。
除了使用计数器，还需要在元素的样式中追加对元素的（counter-increment）属性的指定为content属性值中所指定的计数器名称。

元素{
 counter-increment:content属性值中所指定的计数器名称
 }