选择器优先级

内联样式（1000）> id选择器（100）> 类和伪类选择器（10） > 元素选择器（1）>通配 * 选择器（0）> 继承的样式

一、元素选择器

作用：通过元素选择器可以选择页面中的所有指定元素。

标签名{...
}

二、id选择器

作用：通过元素的id属性选中唯一的一个元素。id属性在一个页面中是唯一的。

<p id="p_1">床前明月光</p>
<p id="p_2">疑是地上霜</p>

#id属性值{...
}

三、类选择器（class选择器）

作用：通过元素的class属性，选择一组元素。class属性在页面中不唯一，且一个元素可以有多个class（空格隔开多个class）。

<p class="p1 class1 class2">锄禾日当午</p>
<p class="p1 class1">汗滴禾下土</p>

.class属性值{...
}

四、并集选择器（选择器分组）

作用：通过并集选择器可以同时选中多个选择器对应的元素。

选择器1, 选择器2, 选择器3{...
}

比如现在有三个选择器，id选择器：p_1{ ... } ，class选择器：.p2{ ... }，元素选择器：h1{ ... }，那么选择器分组语法如下：

#p_1, .p2, h1{...
}

五、交集选择器（复合选择器）

作用：选择同时满足多个选择器的元素。

选择器1选择器2选择器3 {...
}

和并集选择器区分，并集选择器可以理解为“只要满足其中一种即可”是一种“或”的关系；而交集选择器是“必须满足所有选择器才可以”是一种“与”的关系。注意在书写上，并集选择器多个选择器之间用逗号隔开，交集选择器之间紧密相连，没有任何分隔符。另外，因为id选择器已经可以唯一确定一个元素，因此，id选择器不建议使用复合选择器。

六、通配选择器

作用：可以选择页面中的所有元素。

* {...
}

七、后代元素选择器

作用：选中指定元素的指定后代元素。

祖先元素 后代元素 {...
}

八、子元素选择器

作用：选中指定父元素的指定子元素。

父元素 > 子元素 {...
}

九、属性选择器

作用：可以根据元素中的属性或属性值来选取指定元素。

<p title="text">一段文字</p>

/* [属性名] 根据属性名选取*/
p[title]{...
}
/* [属性名="属性值"] 根据属性值选取*/
p[title="text"]{...
}
/* [属性名^="xx"] 选取以xx为开头的属性值*/
p[title^="te"]{...
}
/* [属性名$="xx"] 选取以xx结尾的属性值*/
p[title$="xt"]{...
}
/* [属性名*="x"] 选取属性值中有 x 的元素*/
p[title*="x"]{...
}

HTMLCSS————CSS常用选择器及优先级相关推荐

CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器.....），你知道多少？
CSS常用选择器 CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,一起来看看吧! 一.通配符选择器通配符选择器常用 '*' 号表示,它是所有选择器里作用范围最 ...
CSS样式选择器的优先级顺序
样式(css)是一种按照优先级来进行加载的语言. css各种选择器的优先级顺序:(由上到下,优先级顺序依次降低) 不同级别: 1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样 ...
面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分第一种是 W3C 标准的盒子 ...
css——常用选择器
一,常用的基本选择器 1.最基本的了 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
CSS基本选择器及优先级顺序
CSS选择器是编写CSS代码时的一个核心概念,我们在设计网页页面时,使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器.而HTML页面中的元素就是通过CSS选 ...
css常用选择器：相邻兄弟选择器（+）、子选择器（＞）、兄弟选择器（~）、属性选择器等用法
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+).子选择器(& ...
CSS常用选择器、伪元素选择器、伪类选择器大全——响应式Web系列学习笔记
1. 常用的CSS选择器 CSS选择器的作用就是从HTML页面中找出特定的某类元素.常用的几类CSS选择器如下表所示. 选择器代码示例代码说明通用选择器 * *{} 选择所有元素. 标签选择器 ...
css常用选择器及用法
标签/元素选择器作用:通过标签名选中对应的内容语法:标签名{} 注意:html常用标签大概20多个,如果用元素选择器选中设置css样式 <div><h1>登高</h1 ...
css 类别选择器并集,CSS常用选择器
1.元素选择器作用:通过元素选择器,可以选择页面中的指定元素. 语法:标签名{} Title p{ color:red; } 锄禾日当午 2.id选择器作用:通过元素的id属性值,选中唯一的一个元 ...

HTMLCSS————CSS常用选择器及优先级