【CSS选择器】CSS选择器有哪些？如何选择合适的使用？各类选择器的优劣势是什么？

我们所熟知的CSS选择器有：通用选择器、标签选择器、id选择器、类选择器、群主选择器、关系型选择器、伪类选择器……本文会详细展开介绍CSS选择器类型、优劣势及其运用。

CSS选择器

1.基础选择器

css选择器是css规则的一部分，由元素和声明快组成的

选择器用于告诉浏览器哪一个html标签即将被渲染

1.通用选择器 （通配符选择器）	* {    color：red； }
	*指当前页面所有标签都应用该样式，优先级非常低，性能低
	在练习中常用的使用通配符场景* { margin:0; padding:0 } 将所有元素的内、外间距去除
2、标签选择器	直接使用标签的名字当做选择器使用 div {    color：red； }
	优势：快捷，选中所有标签相同的元素渲染 劣势：选择太广泛，不利于项目使用
	优先级权重值为1（最低的）
3.id选择器	①先要在标签中加入id属性，使用css中的 #id名{} ②优势：非常直观的找到该元素，优先级值为100 ③劣势：一般项目书写，尽量不用id选择器，具有唯一性，复用性低
4.类选择器	①类选择器需要在标签中加calss属性，样式中 .类名{ } ②类选择器复用性很高,在项目中经常使用 ③优先级权重为10

2、群组选择器

①多个选择器用逗号连接,使用相同的样式

②群组选择器不限定选择器，必须是同一个类型

3、关系型选择器

①语法：后代选择器需要在先代选择器后加空格连接后代选择器

②后代元素指的是当前标签内嵌套的所有标签

③祖先选择器  后代选择器{ }

④易错点：空格容易被忽略

⑤使用场景：内部结构简单,相同标签较少时

<style>
        div,.color-red{
			color:red;
		}
</style>

<div>我要红色字体</div>
<p class="color-red">我要红色字体</p>

1.后代选择器

</style>
    .a .c {
			color:red;
		 }

</style>

<div class="a">我是最外层
	<div class="b">我是中间层
		<div class="c">我是最内层</div>
	</div>
</div>

2.子代选择器

</style>
    .a>.b>.c {
			color:red;
		 }

</style>

<div class="a">我是最外层
	<div class="b">我是中间层
		<div class="c">我是最内层</div>
	</div>
</div>

3.兄弟和相邻兄弟选择器

①兄弟选择器

兄选择器~弟选择器{ }

只能选中后面的兄弟，不能选中前面的兄弟

后面的兄弟全被选中

  不能选中兄本身

②相邻兄弟选择器

兄选择器+弟选择器{ }

 相邻兄弟选择器，指的是紧紧挨着的兄弟元素

  只选中一个相邻兄弟

		<style type="text/css">
		/* 兄弟选择器 */
		.b~li{
			color: #008000;
		}

        /* 相邻兄弟选择器 */
		.a+li{
			color: #FF0000;
		}

		</style>


		<div class="name">
			<input type="text" placeholder="用户名" id="x">
			<label for="x">用户名</label>
			<label for="x">禁止</label>
			<label for="x">*%$等符号</label>			
		</div>		
		<div class="pwd">
			<input type="text" placeholder="密码" id="y">
			<label for="y">密码</label>
			<label for="y">只能</label>
			<label for="y">使用数字</label>
		</div>

4、伪类选择器

伪类是添加到选择器的关键字，指定元素的特殊状态

①鼠标悬停	当鼠标移动到元素范围内，叠加元素样式 如果是触摸屏（无鼠标）  :hover会呈现不同效果
②点击激活 鼠标按住元素不松开，就会触发激活	.box:active{    background-color:blue; }
③<a></a>标签未激活的状态	.a:link{color：green;}
④<a></a>激活之后的状态	.a:visited{ color:orange;}
☆☆☆<a></a>标签的优先级：  :link > :hover > :actived > :visited
⑤获取焦点：focus获取检点的元素（如表单元素），当用户点击或触摸元素会触发。            表单元素，输入或选择转台会触发该伪类。

另：附上伪元素，不要和伪类选择器搞混~~

1.定义	伪元素是一个附加至选择器末的关键词，允许你对被选择的元素进行指定部分的修改样式。简单说它不是一个元素，而是元素某个部分的样式
2.语法规范	::  大部分伪元素也可以使用:   尽量使用::  以区别伪类选择器
3. before 4.after	指的是元素内容最开始的位置插入，ie7以下不支持
5.content属性	必须要结合使用

		<style>
		a~a::before{
			content:">"
		}
		</style>

		<div>
			<a href="#">首页</a>
			<a href="#">学习用品</a>
			<a href="#">笔记本电脑</a>
			<a href="#">联想</a>
		</div>

以上代码效果：首页>学习用品>笔记本电脑>联想

综上：各类选择器节气用法，理解即记忆，建议多用关系型选择器~   优化代码