一、基本选择器
1、标签选择器
HTML标签作为标签选择器的名称，例如： <h1>…<h6>、<p>、<img/>
<!-- 例如：p { font-size:16px;} p表示标签选择器 font-size:16px表示声明 font-size表示属性 16px表示值 -->
2、 类选择器（ class选择器 可以多次使用）
<!-- 例如：.content-color { font-size:16px;} content-color表示类名称 .content-color表示类选择器 -->
<!-- <标签名 class= "类名称">标签内容</标签名> -->
<!-- 类选择器可以方便咱们复用样式代码 -->
<!-- <p class="content-color">大家好，马上要到中秋节了，祝大家中秋节快乐！</p>
<h1 class="content-color">我是学生，我要好好学习提高自己的技能早日在社会上立足</h1>
<h2 class="content-color">我要和h1共用一个颜色</h2>
3、id选择器（id选择器 是唯一的，只能设置一个，一个元素上只能有一个id，而且id的名称不要和别元素的id名称一样 ，如需要多次使用建议使用class选择器）
<!-- #fontId {font-size:16px;} #fontId表示id选择器 fontId表示id的名称 -->
<!-- <i id="fontId">我是斜体，但是我的心很正</i>
<p>我是p标签，但是我不能和斜体标签共用一个相同的id</p> -->
二、CSS高级选择器-层次选择器
1、 后代选择器
<!-- E F 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 -->
<!-- 例如body p 是body元素后面所有的p标签都起作用，包括子元素，子孙元素在内的所有元素都起作用 -->
<!-- ☆后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入 -->
例如：
2、子选择器 （选择父后面的子代）
<!-- E>F 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素 -->
<!-- 使用子选择器，只有父元素的儿子辈的生效，孙子辈及以下的其他后辈不生效 -->
3、相邻兄弟选择器（只能+F后面一个兄弟 是一个）
<!-- 相邻兄弟选择器 E+F 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面 -->
<!-- 选择相邻的后面的兄弟选择器 -->
4、通用兄弟选择器（这是加E相邻后面的所有同辈兄弟）
<!-- 通用兄弟选择器 E~F 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 -->
<!-- 兄弟：p1的兄弟是 p2和p3 （ul和p不是同一种元素） E~F的意思是匹配p1元素后所有的兄弟元素-->
三、CSS高级选择器-属性选择器
样式如下：
1、 <!-- E[attr] 选择匹配具有属性attr的E元素 -->
例如： 选择属性是class的元素
li[class]{
background-color: green;
}
2、<!-- E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写） -->
例如：选择属性是class，值为one的元素
E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中
li[class=one]{
background-color: red;
}
3、 <!-- E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配-->
例如： 选择属性是class，值包含by的元素
li[class*=by]{
background-color: lightblue;
}
4、 <!-- E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串 -->
例如：/选择属性是name，值是以data-开头的元素
li[name^=data-]{
background-color: black;
}
5、<!-- E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串 -->
例如： 选择属性是name，值是以com结尾的元素
li[name$=com]{
background-color: #ccc;
}
