css选择器有哪些及优先级(七种基本的css选择器)
大家好，今天给各位分享css选择器有哪些及优先级的一些知识，其中也会对七种基本的css选择器进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
css选择器有哪些各种选择器优先级大小顺序
CSS选择器如下：
1.
标签名选择器
div
{
color：Red;}
/即页面中的各个标签名的css样式
2.类选择器
.divClass
{color:Red;}
/即定义的每个标签的class
中的css样式
3.ID选择器
#myDiv
{color:Red;}
/即页面中的标签的id
4.后代选择器（类选择器的后代选择器）
.divClass
span
{
color:Red;}
/即多个选择器以逗号的格式分隔
命名找到准确的标签
5.群组选择器
div,span,img
{color:Red}
/即具有相同样式的标签分组显示
选择器的优先级
1.最高优先级是
(直接在标签中的设置样式，假设级别为1000)
2.次优先级是（ID选择器
,假设级别为100）
#myDiv{color:Red;}
3.其次优先级是（类选择器，假设级别为10）
.divClass{color:Red;}
4.最后优先级是
（标签选择器，假设级别是
1）
div{color:Red;}
5.那么后代选择器的优先级就可以计算了啊
比如
.divClass
span
{
color:Red;}
优先级别就是：10+1=11
CSS选择器的优先级
通常我们可以将CSS的优先级由高到低分为六组：
1、无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。
2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。
3、第三级优先的属性是由一个或多个id选择器来定义的。例如#id{margin:0;}会覆盖.classname{margin:3px;}。
4、第四级的属性由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px;}会覆盖 div{margin:6px;}
5、第五级由一个或多个类型选择器定义。如 div{margin:6px;}覆盖*{margin:10px;}。
最低一级的选择器是为一个通配选择器，用*{margin:10px;}这样的类型来定义。
另外，可以用一句极为简单的话来描述CSS优先级问题：当一个CSS选择器拥有更多的高级别属性时，它的优先级就会比较高。如#i100
*.c20*.c10{}的优先级就会高于#i100*.c10 div p span em{}
，这是由于前者拥有一个第三级和两个第四级的选择器而后者第三级和第四级的选择器各为一个，当然前者优先级会比较高。
如果想学习和交流更多html前端开发的技术你可以来我们这个群：先写下这三个数字：432，然后在写下中间这三个数字：664，最后写下的三个数字是：883，按照这个顺序连起来，群就会出现。还有更多的技术资料，学习课程。
CSS选择器是一个非常灵活的CSS属性，优雅的使用它会使你的页面代码不再臃肿，而且还可以作为hack的妙用方法之一。
当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：
1、位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
2、第二级的优先属性由位于<style/>标签中的@import引入样式表所定义。
3、第三级的优先属性由<link/>标签所引入的样式表定义。
4、第四级的优先属性由<link/>标签所引入的样式表内的@import导入样式表定义。
5、第五级优先的样式有用户设定。
最低级的优先权由浏览器默认。
理解了这些CSS优先级问题后，也就不必苦恼于样式定于中的此类问题了。
CSS选择器、优先级以及!important知识总结
关于CSS选择器，首先请看这里： CSS选择器参考手册
通过以上，我们可以将CSS选择器分为以下几种：
<script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>
示例：
说明：以下E表示元素，attr表示属性，val表示属性的值。
说明：以下E表示元素
示例：
示例：
示例：
示例：
E:not(s),匹配不符合当前选择器的任何元素
示例：
E:target,匹配文档中特定"id"点击后的效果
示例：
这里我们简单讨论下后代元素选择器和子元素选择器的区别
示例
CSS优先级是指CSS样式在浏览器中被解析的先后顺序。
多重样式（Mutiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是多重样式的使用情况。
一般情况下，（外部样式）External style sheet<（内部样式）Internal style sheet<（内联样式）Inline style
例外：如果外部样式放在内部样式的后面，则外部样式将会覆盖内部样式。
示例：
给不同的选择器分配不同的权值
解释：
示例
结果：标签内的数据显示为蓝色。
比较样式的优先级是，只需统计不同选择器的个数，然后与对应的权值相乘即可。根据结果便可得出优先级。
看到这里，有些同学是不是对!important有点迷惑呀为什么有了它，就优先级最高呐下面我们再来详细讲一讲!important~
!important是CSS1就定义的语法，作用是提高指定样式的应用优先权。
语法格式：{cssRule!important}，即写在定义的最后面，例如： box{ color: red!important}
声明了!important的样式，具有最高的优先级，相当于写在最下面（最后定义）
IE 6.0不完全支持!important
IE支持重定义中的!important，例如：
你将会发现定义了样式 class="yuanxin"时，在IE下，字体显示为红色（#e00）。
但不支持同一定义中的!important。例如：
此时在IE6下不支持，你将会发现定义了样式 class="yuanxin"时，字体显示为黑色（#000）。
解释：
important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为!important优先级较高，否则当含!important的样式属性被同一个{}里的样式覆盖时，IE 6.0认为!important较低!
再举一个例子：
因为IE 6.0一直都不完全支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important。
完。
总结内容参考以下：
w3school_CSS选择器参考手册
阮一峰_CSS选择器笔记
css选择器优先级深入理解
CSS的优先级机制[总结]
十分感谢你们的分享 n(*≧▽≦*)n
注：原文章首发于： CSS选择器、优先级以及!important知识总结，现迁移至此。
<script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>
关于本次css选择器有哪些及优先级和七种基本的css选择器的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。