CSS选择器

---

前言

对css中的几种选择器进行总结。

---

提示：以下是本篇文章正文内容

1.css语法

css的基本语法：
选择器 声明块

选择器：通过选择器可以选中页面中的指定元素
声明块：可以通过声明块来指定要为元素设置的样式

		p{
            color: green;
            font-size: 30px;
        }

2.常用选择器

常用的选择器有：元素选择器、id选择器、类选择器、通配选择器

元素选择器：根据标签名来选中指定元素
	
		 h1{
             color: seagreen;
         }

id选择器：根据元素的id属性值选中一个元素
		#id{
			font-size:20px;
		}

类选择器：根据元素的class属性值选中一组元素
		.class{
			color: blueviolet;
		}

class是一个标签的属性，它与id相同，但是class可以重复使用，可以使用class为标签分组，也可以同时为一个元素指定多个class
		<p class="blue abc"></p>
	    <p class="blue"></p>

通配选择器：选中页面的所有元素
		*{
			margin:0;
			padding:0;
		}

2.复合选择器

分为交集选择器和选择器分组(并集选择器)

交集选择器：选中复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意：交集选择器中如果有元素选择器，必须使用元素选择器开头
		div.red{
			color: blueviolet;
		}
		.a.b.c{
			color: blueviolet;
		}

选择器分组(并集选择器)：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器n{}
	
		 h1,span{
              font-size: 30px;
          }

3.关系选择器

子元素选择器、后代元素选择器、兄弟选择器

子元素选择器：选中指定父元素的指定子元素
语法：父元素 > 子元素
	
		 div > span{
             color: seagreen;
         }

后代元素选择器：选中指定元素的指定后代元素
语法：祖先 后代
	
		 div span{
             color: seagreen;
         }

兄弟元素选择器

选择下一个兄弟元素
语法：前一个 + 下一个
	
		 p + span{
             color: seagreen;
         }
选择下面所有的兄弟元素
语法：兄~弟
		p ~ span{
             color: tomato;
        }

4.属性选择器

[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性的和属性值元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素

		p[title]{
            color: tomato;
        }
        p[title=abc]{
            color: blue;
        }
        p[title^=abc]{
            color: blue;
        }
        p[title$=abc]{
            color: blue;
        }

5.伪类选择器

伪类（不存在的类，特殊的类）
-伪类用来描述一个元素的特殊状态
比如：第一个子元素、被点亮的元素、鼠标移入的元素…
-伪类一般情况下都是使用:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值：
n 第n个 n的范围是0到正无穷
2n或even 表示选中偶数位的元素
2n+1或odd 表示选中奇数位分元素
-以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
-这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行的
-not() 否定伪类
-将符合条件的元素从选择器中去除

		 ul > li:not(:nth-of-type(3)){
             color: orange;
         }

6.伪元素选择器

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用 ::开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表是选中的内容
::before 元素的开始
::after 元素的结束
-before 和 after 必须结合content属性来使用

		 p::first-letter{
             font-size: 40px;
         }
         p::first-line{
             background-color: yellow;
         }
         p::selection{
             color: green;
         }
 		 div::before{
            content: '[';
         }
         div::after{
             content: "]";
         }