html中基本选择器的优先级,CSS基础知识-选择器的种类及优
先级
⼀、CSS选择器常见的有⼏种?
常见的有
1、id选择器
见⾃⼰编写的如下代码：html>
Document
这是id选择器
这不是id选择器
2、class选择器html>
Document
这是class选择器
这不是class选择器
3、属性选择器
3.1 属性名加属性值型html>
Document          ⽤户名
密码
3.2纯属性名型html>
Document
这⾥是匿名者的图⽚    ![Anonymous](upload-images.jianshu.io/upload_images/2166980-53ed3d75ce5ae54c.jpg? imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)    ![AnonymousPicture](upload-
images.jianshu.io/upload_images/2166980-3494a3e338066626.jpg?imageMogr2/auto-
orient/strip%7CimageView2/2/w/1240)    ![AnonymousPicture](upload-images.jianshu.io/upload_images/2166980-3494a3e338066626.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
4、分组选择器
⽤“,”隔开，表⽰该组元素属性都会作⽤html>
Document
这是h1标题
这也是h1标题
这是div⾥的h1
这是div⾥的p
5、派⽣选择器html>
Document
这是h1标题
这是div⾥的h1
这也是div⾥的h1标题
这是div⾥的p
6、伪类选择器
⽐如.hover、::selection、.action、:first-child、:last-child、:first-of-type、:last-of-type、:nth-of-type(n)、:nth-of-last-type(n)等html>
Document
这是伪类选择器
⼜例如：html>
Document
选中后字体变红⾊背景变蓝⾊
选中后不变⾊
7、伪元素选择器
:after、:before等html>
Document
我的前⾯需要增加“这是前置字”，我的后⾯需要增加“这是后置字”
我的前⾯需要增加“这是前置字”，我的后⾯需要增加“这是后置字”
我的前⾯需要增加“这是前置字”，我的后⾯需要增加“这是后置字”
我的前⾯需要增加“这是前置字”，我的后⾯需要增加“这是后置字”
8、组合选择器
⽐如E,F/E F(后代选择器)/E>F(⼦元素选择器)/E+F(直接相邻元素选择器----匹配之后的相邻同级元素)/E~F(普通相邻元素选择器----匹配之后的同级元素)html>
css选择器分为哪几类Document
这是外层DIV
这是h1⼤标题
这是外层DIV⾥的div
这是中层div的h1标题1
这是中层div⾥的段落
这是中层div的h1标题2
这是内层div
这是内层div的h1标题
这也是h1⼤标题
这还是h1⼤标题
⼆、选择器的优先级是怎样的?选择器优先级由⾼到低分别为：
!
important > 作为style属性写在元素标签上的内联样式 >id选择器>类选择器>伪类选择器>属性选择器>标签选择器> 通配符选择器(* 应少⽤)>浏览器⾃定义；当⽐较多个相同级别的CSS选择器优先级时，它们定义的位置将决定⼀切。下⾯从位置上将CSS优先级由⾼到低分为六级：
1、位于
标签⾥的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。