CSS选择器

一：基本选择器

1.标签选择器

说明：标签选择器用于选择html中是标签的元素，然后添加其css样式。
语法：标签 {属性:属性值;属性:属性值;}
实例：

a {
	text-decoration:none;
}
h1 {
color:red;
margin:20px;
}

代码解析：
html文档中是a标签的元素将会清除其文本修饰，去除其默认的样式；h1标签内的文字颜色将会变为红色。

2.类选择器

说明：选中对应class属性值的元素，然后改变其样式。
语法：.class属性值{属性:属性值;属性:属性值;}
实例：

.one
{
	text-align:center;
}

代码解析:
class的属性值为one的HTML元素水平居中显示。

3.id选择器

说明：id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
语法 : #id属性值{属性:属性值;属性:属性值;}
实例：

#two
{
    text-align:center;
    color:red;
}

代码解析:
id的属性值为two的HTML元素水平居中显示,文字颜色为红色。

4.通配符选择器

说明 : 选中html中的所有元素。（权重为0）
语法 : *{属性:属性值;属性:属性值;}
实例 : *{

         margin: 0;  
         padding: 0;  

}
代码解析：让html中的所有元素的外边距与内边距都设置为0px，通常写于开头，用于清除元素的默认的边距。

二：群组选择器

1.并集集选择器

说明：同时选中对应选择器的元素。
语法：选择器1,选择器2,选择器3~~ {属性:属性值;属性:属性值;}
实例：

 div,p,h3,.one{
      font-size: 30px;
    }

代码解析：div、p、h3、.class这些选择器都会被一起选中。

2.交集选择器（该选择器并不是群组选择器，群组选择器是并集选择器）

说明：多个选择器写在一起，可以选中同时满足所有条件的标签。
语法：选择器1.选择器2.选择器3~~{属性:属性值;属性:属性值;}
实例：

 span.one{
            color: blue;
        }

代码解析：选中类名为one的span标签，将其颜色设为红色。

三：属性选择器

说明：可以根据属性值，给其带有该属性值特定的标签设置样式。
语法：
属性选择器一共有7种写法

1.标签[属性]{}

p[title]{
	color: red;
}

说明：为设有title的p标签文字颜色设为红色。
2.标签[属性=属性值]{}

input[type=submit] {
	margin: 40px;
}

说明：为属性值为submit的按钮设置外边距为40px。
3.标签[属性^=属性值]{}

p[title^=ab] {
    color: red;
}

说明：title属性值以ab开头的p标签文字颜色设为红色。
4.标签[属性$=属性值]{}

p[title$=c] {
    color: chocolate;
}

说明：title属性值以c结尾的p标签文字颜色设置为巧克力色。
5.标签[属性*=属性值]{}

p[title*=c] {
    color: red;
}

说明：title属性值包含c的p标签，将其文字颜色设为红色。
6.标签[属性~=属性值]{}

p[title~=link] {
    color: red;
}

说明：title属性值包含独立单词的link,这样的p标签颜色设为红色。
7.标签[属性|=属性值]{}

p[title|=link] {
    color: red;
}

说明：title属性值必须是完整且唯一的单词link,且以link开头，这样的p标签颜色设为红色。

四：关系选择器

1.后代选择器

说明：用于选取某元素的后代元素。
语法：标签/选择器 标签/选择器 {属性:属性值;属性:属性值;}
实例：

div p
{
  background-color:yellow;
}

代码解析：选中p标签，且p标签嵌套在div内部。

2.子代选择器

说明：用于选取某元素的子代元素。
语法：标签/选择器>标签/选择器 {属性:属性值;属性:属性值;}
实例：

div>p
{
  background-color:yellow;
}

代码解析：选中p标签，且p标签嵌套在div内部，且p标签的**上一级（父级）**为div。

3.普通兄弟选择器

说明：选取所有指定元素之后的相邻兄弟元素。
语法：标签/选择器~标签/选择器 {属性:属性值;属性:属性值;}
实例：

div~p
{
  background-color:yellow;
}

代码解析：选中与div具有相同的父元素的p标签

4.相邻兄弟选择器

说明：可选择一个紧接在另一元素后的元素，且二者有相同父元素。
语法：标签/选择器+标签/选择器 {属性:属性值;属性:属性值;}
实例：

div+p
{
  background-color:yellow;
}

代码解析：选中与div紧邻的且具有相同的父元素的第一个p标签。

五：伪类选择器

1.常用伪类选择器

1. :first-child
   说明：用来选择父元素的第一个子元素。（紧邻父元素）
   语法：标签/选择器:first-child {属性:属性值;属性:属性值;}
   实例：

h1:first-child {
    color: blue;
}

代码解析：选中父元素下第一个h1标签。（第一个必须是h1标签）

2. :last-child
   说明：用来选择父元素的最后一个子元素。
   语法：标签/选择器:last-child {属性:属性值;属性:属性值;}
   实例：

p:last-child {
    color: blue;
}

代码解析：选中父元素最后一个p标签。

3. :nth-child(n)
   说明：用来选择父元素的第n个子元素。
   语法：标签/选择器:nth-child(n) {属性:属性值;属性:属性值;}
   实例：

p:nth-child(2) {
    color: brown;
}

代码解析：选中第2个p标签。（第2行必须是p标签）

4. :first-of-type (:first-of-type)
   说明：用来选择父元素的第一个子元素。
   语法：标签/选择器:nth-child(n) {属性:属性值;属性:属性值;}
   实例：

p:first-of-type {
    color: red;
}

代码解析：选择的每个 p 元素是其父元素的第一个 p 元素。（第一行可以是其它标签）

5. :not()
   说明：用来选择不是（）之外的标签。
   语法：标签/选择器:not(){属性:属性值;属性:属性值;}
   实例：

h1:not(.ca) {
    color: aqua;
}

代码解析：选择除去类名为ca的h1标签，其它h1标签内容颜色为水色。

6. :beforep （:after）
   说明：在每个元素之前插入内容。
   语法：标签/选择器:before{属性:属性值;属性:属性值;}
   实例：

p:before {
    content: "李白说：";
    color: blue;
}

代码解析：在所有的p标签之前都插入“李白说：”，并把该插入的内容颜色设为蓝色。