我们所熟知的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>

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

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

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

基础选择器之id选择器(CSS、HTML)
基础选择器之id选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta ch ...
CSS基础选择器之标签选择器(CSS、HTML)
CSS基础选择器之标签选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta ...
css3的相邻选择器,CSS选择器之相邻兄弟选择器
选择器是css里面非常重要的一部分知识,根据不同的样式定义,CSS提供了不同类型的选择器,大家可以根据自己的实际情况选择合适的选择器来编写代码,前面的课程我们对类选择器,子元素选择器等作了介绍,下面让 ...
html css 范围选择框,jquery日期范围选择器插件
这是一款jquery日期范围选择器插件.该jquery日期范围选择器插件基于bootstrap,它提供日期范围选择功能,字符串本地化功能,时间选择功能等,功能非常强大. 使用方法该jquery日期范 ...
前端(四)——CSS之导入方式、各类选择器
文章目录 1. CSS简介 1.1 什么是CSS 1.2 CSS发展史及其优势 1.3 快速入门 2. CSS的三种导入方式 3. 基本选择器 4. 层次选择器 5. 结构伪类选择器 6. 属性选择器 ...
java样式是什么_java css样式 css样式的种类选择器文本相关样式背景相关样式边框盒子模式...
今日内容: ? CSS样式 ? CSS样式的种类 ? 选择器 ? 文本相关样式 ? 背景相关样式 ? 边框 ? 盒子模式 select标签下拉列表标签,常用于单选和多选,是一个组合标签,需要和子标签 ...
html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
html css三类选择器,css三类选择器用法引用
css(层叠样式表): css用法:选择符{样式属性:取值;...} css选择器的分类: ①:标签选择器,such as:p{attribute:value;},p为标签选择器的name,该页面中所 ...
CSS基础——CSS复合选择器【学习笔记】
复合选择器后代选择器并集选择器 CSS选择器分为基础选择器和复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签. 目的是为了可以选择更准确更精细的目标元素标签. 复合选择 ...

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