为了方便记忆，我暂且这么归类和命名（若归类命名不规范后期持续完善）

基础选择器

1. 标记选择器

标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。 用标记选择器定义的样式对页面中该类型的所有标记都有效。

语法格式：
标记名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
案例代码：

  1. /*页面中所有h3标记都会使用下面的样式*/
  2. h3 { font-family:'微软雅黑';color:#00F;font-size:28px;}

2. 类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名。 其最大的优势是可以为元素对象定义单独或相同的样式。

语法格式：
.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
案例代码：

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>类选择器</title>
  6.         <style type="text/css">
  7.             .red{ color:red; }
  8.             .green{ color:green; }
  9.             .font22{ font-size:22px; }
  10.             p{
  11.                text-decoration:underline; 
  12.                font-family:"微软雅黑";
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <h2 class="red">二级标题文本</h2>
  18.         <p class="green font22">段落一文本内容</p>
  19.         <p class="red font22">段落二文本内容</p>
  20.         <p>段落三文本内容</p>
  21.     </body>
  22. </html>

3. id选择器

id选择器使用“#”进行标识，后面紧跟id名。元素的id值是唯一的，只能对应于文档中某一个具体的元素。

语法格式：
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
案例代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>id选择器</title>
  6.     <style type="text/css">
  7.         #bold {
  8.             font-weight: bold;}
  9.         #font24 {
  10.             font-size: 24px;}
  11.     </style>
  12. </head>
  13. <body>
  14.     <p id="bold">段落1设置粗体文字。</p>
  15.     <p id="font24">段落2设置字号为24px。</p>
  16.     <p id="font24">段落3设置字号为24px。</p>
  17.     <p id="bold font24">段落4同时设置粗体和字号24px。</p>
  18.     <!-- 同时设置粗体和字号是不正确的,id选择器不支持定义多个值 -->
  19. </body>
  20. </html>

注意：

  1. 一个id样式，只能被应用于一个标记。如

    。
  2. id选择器不支持定义多个值。如

    是不存在的，错误的。
  3. 分为使用+定义两个步骤，先后次序都可以，类名称保持一致即可。

    4. 通配符选择器

    通配符选择器用“*”号表示，它是所有选择器中作用范围最广，能匹配页面中所有的元素。

语法格式：
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
案例代码：

  1. *{
  2.     margin:0;   /*定义外边距*/
  3.     padding:0;  /*定义内边距*/
  4. }

复合选择器

5. 后代选择器

后代选择器用来选择元素或元素组的后代，当标记发生嵌套时，内层标记就成为外层标记的后代。 其写法就是把外层标记写在前面，内层标记写在后面，中间用空格！空格！空格！(重要的事情说3遍！)分隔。

案例代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>后代选择器</title>
  6.     <style type="text/css">
  7.         p strong {color: red;}    /*后代选择器*/
  8.         strong {color: blue;}
  9.     </style>
  10. </head>
  11. <body>
  12.     <p>段落文本<strong>嵌套在段落中，使用strong标记定义的文本（红色）。</strong></p>
  13.     <strong>嵌套之外由strong标记定义的文本（蓝色）。</strong>
  14. </body>
  15. </html>

效果如图所示：
image.png

6. 并集选择器

若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。 并集选择器是各个选择器通过逗号！逗号！逗号！(还是重要的事情说3遍！)连接而成的。 任何形式的选择器都可以作为并集选择器的一部分。

案例代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>并集选择器</title>
  6.     <style type="text/css">
  7.       /*不同标记组成的并集选择器*/
  8.         h2,h3,p {
  9.             color: red;
  10.             font-size: 14px; }
  11.          /*标记、类、id组成的的并集选择器*/
  12.         h3,.special,#one {
  13.             text-decoration: underline; }     
  14.     </style>
  15. </head>
  16. <body>
  17.     <h2>二级标题文本。</h2>
  18.     <h3>三级标题文本,加下划线。</h2>
  19.         <p class="special">段落文本1，加下划线。</p>
  20.         <p>段落文本2，普通文本。</p>
  21.         <p id="one">段落文本3，加下划线。</p>
  22. </body>
  23. </html>

7. 标签指定式选择器

标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器， 第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one。

案例代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>标签指定式选择器的应用</title>
  6.     <style type="text/css">
  7.         p { color: blue;}
  8.         .special { color: green; }
  9.         p.special { color: red;}     /*标签指定式选择器*/    
  10.     </style>
  11. </head>
  12. <body>
  13.     <p>普通段落文本（蓝色）</p>
  14.     <p class="special">指定了.special类的段落文本（红色）</p>
  15.     <h3 class="special">指定了.special类的标题文本（绿色）</h3>
  16. </body>
  17. </html>

其他选择器

8. :first-child和:last-child选择器

:first-child选择器：为父元素中的第一个设置样式 :last-child选择器：为父元素中的最后一个子元素设置样式

9. :nth-child(n)和:nth-last-child(n)选择器

使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第2个或倒数第2个子元素，这两个选择器就不起作用了。为此，CSS3引入了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-child选择器的扩展。

案例代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>nth-child(n)和nth-last-child(n)选择器的使用</title>
  6.     <style type="text/css">
  7.         p:nth-child(2) {
  8.             color: pink;
  9.             font-size: 16px;
  10.             font-family: "宋体";}
  11.         p:nth-last-child(2) {
  12.             color: blue;
  13.             font-size: 16px;
  14.             font-family: "微软雅黑";}
  15.     </style>
  16. </head>
  17. <body>
  18.     <p>第一篇 毕业了</p>
  19.     <p>第二篇 关于考试</p>  <!--我是:nth-child(2) -->
  20.     <p>第三篇 夏日飞舞</p>
  21.     <p>第四篇 惆怅的心</p>  <!--我是:nth-last-child(2) -->
  22.     <p>第五篇 畅谈美丽</p>
  23. </body>
  24. </html>

10. :only-child 选择器

:only-child 选择器用于匹配属于某父元素的唯一子元素的元素， 如果某个父元素仅有一个子元素，则使用“:only-child 选择器”可以选择这个子元素。 （是独生子吗？还是偏爱某一个孩子？正确答案：是只有一个子元素！）

11. 子代选择器（>）

子代选择器主要用来选择某个元素的第一级子元素。 选择只作为h1 元素子元素的strong 元素，可以这样写：h1 > strong。

12. 兄弟选择器 （+、~）

兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。

  • 临近兄弟选择器

    该选择器使用加号“+”来链接前后两个选择器。 选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。

  • 普通兄弟选择器

    普通兄弟选择器使用 “~”来链接前后两个选择器。 选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。

链接伪类

在CSS中定义超链接时，通过链接伪类可以实现不同的链接状态， 使得超链接在点击前、点击后和鼠标悬停时的样式不同。

超链接标记的伪类 含义
a:link{ CSS样式规则; } 未访问时超链接的状态
a:visited{ CSS样式规则; } 访问后超链接的状态
a:hover{ CSS样式规则; } 鼠标经过、悬停时超链接的状态
a:active{ CSS样式规则; } 鼠标点击不动时超链接的状态