30个最常用css选择器解析

常见CSS选择器的权重和优先级⼀、常见CSS选择器【元素选择器】1、通配选择器：*（匹配所有元素）a、效率不⾼，页⾯上的标签越多，效率越低，所以页⾯上最好不要出现这个选择器2、标签选择器：li（匹配标签为li的元素）a、所有标签都能够当做选择器，⽐如body、h1、dl、ul、span等等b、不管这个标签藏的多深，都能够被选择上c、选择的是所有的，⽽不是某⼀个。

所以是共性，⽽不是特性3、ID选择器：#content（匹配ID属性值等于content的元素）4、类选择器：.list（匹配class属性包含list的元素）a、class可以重复，也就是说，同⼀个页⾯上可能有多个标签同时属于某⼀个类b、同⼀个标签可以同时携带多个类，多个类⽤空格隔开，多个样式有冲突的，以css中后出现的为准c、不要去试图⽤⼀个类名，把某个标签的所有样式写完。

这个标签要多携带⼏个类，共同造成这个标签的样式d、每⼀个类要尽可能⼩，有“公共”的概念，能够让更多的标签使⽤【关系选择器】1、后代选择器：#content h3（匹配ID为content的元素内所有的h3元素）a、空格就表⽰后代，强调⼀下：选择的是后代，不⼀定是⼉⼦b、当要把某⼀个部分的所有的什么，进⾏样式改变，就要想到后代选择器2、⼦元素选择器：#content>h3（匹配ID为content的元素⼦级的h3元素）3、交集选择器：h3.content（匹配class为content的h3元素）a、交集选择器没有空格b、交集选择器可以连续交（⼀般不要这么写）c、交集选择器，我们⼀般都是以标签名开头，⽐如div.haha ⽐如p.special4、并集选择器（分组选择器）：h1，h2（匹配所有的h1和h2元素）5、相邻选择器：h1+h2（匹配 h1 元素之后紧跟的 h2 元素）6、兄弟选择器：h1~h2（匹配 h1 元素之后所有的 h2 元素）【属性选择器】1、a[class]：匹配具有 class 属性值的 a 的元素2、a[target="_blank"]：匹配 target 属性值等于 _blank 的 a 元素3、a[href^="https"]：匹配 href 属性值以 https 开头的 a 元素4、a[href$=".jpg"]：匹配 href 属性值以 .jpg 结尾的 a 元素5、a[href*="baike"]：匹配 href 属性值包含 baike 的 a 元素6、a[class~="abc"]：匹配 class 属性值以空格为分隔符，其中有⼀个等于 abc 的 a 元素伪类选择器和伪元素选择器使⽤频率不⾼，本⽂暂不说明，详细⽰例可参考：⼆、CSS选择器权重和优先级共分为5个等级：第1等：提升指定样式规则的应⽤优先权，如：color:red !important，权值为10000（不建议使⽤）第2等：代表内联样式，如: style="xxx"，权值为1000第3等：代表ID选择器，如：#content，权值为100第4等：代表类，伪类和属性选择器，如.content，:hover，[attribute]，权值为10第5等：代表元素选择器和伪元素选择器，如div，p，权值为1通⽤选择器（*），⼦选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0三、CSS选择器权重计算1、元素被两个css样式选中，选择权重⼤的样式，如果权重⼀样，以css中后出现的为准2、元素没有被css样式选中，要显⽰继承的样式时，使⽤就近原则2、继承的样式权重为0（color、 text-开头的、line-开头的、font-开头的样式都可以继承）判断⼀块内容的样式是什么？按照以下步骤：HTML代码：<div id="content"><div id="main-content"><h2>CSS简介</h2><p>CSS是⼀组格式设置规则，⽤于控制Web页⾯的外观。

css样式的六种选择器css常⽤的选择器有：1.标签选择器：标签选择器，这种选择器影响范围⼤，建议尽量应⽤在层级选择器中。

如：*{margin:0;padding:0} /* 影响所有的标签 */div{color:red} /* 影响所有的div标签 */<div>......</div> <!-- 对应以上两条样式 --><div class=”box”>......</div> <!-- 对应以上两条样式 -->2.id选择器：通过id名来选择元素，元素的id名称不能重复，所以⼀个样式设置项只能对应于页⾯上⼀个元素，不能复⽤，id名⼀般给程序使⽤，所以不推荐使⽤id作为选择器。

id是所有标签的属性，所有标签都有id属性，写代码时id的值是不允许重复的如：#box{color:red}<div id=”box”>......</div> <!-- 对应以上⼀条样式，其它元素不允许应⽤此样式 -->3.类选择器：（常⽤）通过类名来选择元素，⼀个类可应⽤于多个元素，⼀个元素上也可以使⽤多个类，应⽤灵活，可复⽤，是css中应⽤最多的⼀种选择器。

如：.red{color:red}.big{font-size:20px}.mt10{margin-top:10px}<div class=”red”>......</div>4.层级选择器：主要应⽤在选择⽗元素下的⼦元素，或者⼦元素下⾯的⼦元素，可与标签元素结合使⽤，减少命名，同时也可以通过层级，防⽌命名冲突。

如：.box span{color:red}.box .red{color:pink}.red{color:red}<div class=”box”><span>......</span><a href=”#” class=”red”>......</a></div><h3 class=”red”>......</h3>层级选择器最好不要超过四层，否则会影响性能。

css 前缀class选择器用法CSS 前缀 Class 选择器用法在 CSS 中，使用 Class 选择器可以为 HTML 元素添加样式。

然而，可能会出现多个 CSS 文件或者库同时使用同一个 Class 名称的情况，为了避免样式冲突，可以使用前缀来区分不同的 Class。

下面是一些常见的 CSS 前缀 Class 选择器的用法：•.myapp-container：以.myapp-为前缀的 Class 选择器可以用于标识属于某个应用程序的特定容器。

例如，在一个大型网页中，可以使用该选择器来命名容器类，如.myapp-header、.myapp-sidebar和.myapp-footer。

•.btn 和 .btn-primary：.btn是一个通用的按钮样式类，而.btn-primary是基于.btn的一个特定样式类。

这种前缀的使用方法可以让我们更方便地复用和扩展样式。

•.feature 和 .feature-：.feature选择器可以用于某个特定模块的整体样式，而.feature-something可以用来表示该模块的不同子元素或变化状态的样式。

•.grid 和 .grid-1, .grid-2：.grid选择器可以用来表示整个网格系统的样式，而.grid-1和.grid-2选择器则可以分别用来表示该网格系统的不同列样式。

•.media 和 .media-object：.media选择器用于表示一个媒体对象，而.media-object则用于表示该媒体对象的不同部分或变化状态。

•.error 和 .error-message：.error选择器用于表示错误提示的整体样式，而.error-message可以用于表示该错误提示的具体消息样式。

•.container 和 .container-fluid：.container选择器可以用来表示一个固定宽度的容器，而.container-fluid则用来表示一个流式宽度的容器。

CSS选择器优先级总结CSS三⼤特性—— 继承、优先级和层叠。

继承：即⼦类元素继承⽗类的样式;优先级：是指不同类别样式的权重⽐较;层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。

css选择符分类 ⾸先来看⼀下css选择符(css选择器)有哪些? 1.标签选择器(如：body,div,p,ul,li) 2.类选择器(如：class="head",class="head_logo") 3.ID选择器(如：id="name",id="name_txt") 4.全局选择器(如：*号) 5.组合选择器(如：.head .head_logo,注意两选择器⽤空格键分开) 6.后代选择器 (如：#head .nav ul li 从⽗集到⼦孙集的选择器) 7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显⽰ 8.继承选择器(如：div p,注意两选择器⽤空格键分开) 9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。

) 10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含) 11.⼦选择器 (如：div>p ,带⼤于号>) 12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)css优先级当两个规则都作⽤到了同⼀个html元素上时，如果定义的属性有冲突，那么应该⽤谁的值的，CSS有⼀套优先级的定义。

不同级别1. 在属性后⾯使⽤ !important 会覆盖页⾯内任何位置定义的元素样式。

2. 作为style属性写在元素内的样式3. id选择器4. 类选择器5. 标签选择器6. 通配符选择器7. 浏览器⾃定义或继承总结排序：!important > ⾏内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性同⼀级别同⼀级别中后写的会覆盖先写的样式上⾯的级别还是很容易看懂的，但是有时候有些规则是多个级别的组合，像这样<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">div.test{background-COLOR:#a00;width:100px;height: 100px;}.test.test2{background-COLOR:#0e0;width:100px;height: 100px;}</style></head><body><div class="test test2"></div></body></html>到底div是应⽤那条规则呢，有个简单的计算⽅法（经园友提⽰，权值实际并不是按⼗进制，⽤数字表⽰只是说明思想，⼀万个class也不如⼀个id权值⾼）内联样式表的权值为 1000ID 选择器的权值为 100Class 类选择器的权值为 10HTML 标签选择器的权值为 1我们可以把选择器中规则对应做加法，⽐较权值，如果权值相同那就后⾯的覆盖前⾯的了，div.class的权值是1+10=11，⽽.test1 .test2的权值是10+10=20，所以div会应⽤.test1 .test2变成绿⾊另外⼀种理解⽅式： CSS优先级：是由四个级别和各级别的出现次数决定的。

30个最常用css选择器解析作者：iiduce 文章来源： 点击数：835 更新时间：2011-7-31你也许已经掌握了id、class、后台选择器这些基本的css选择器。

但这远远不是cs s的全部。

下面向大家系统的解析css中30个最常用的选择器，包括我们最头痛的浏览器兼容性问题。

掌握了它们，才能真正领略css的巨大灵活性。

1.以下是代码片段：* {margin: 0;padding: 0;}星状选择符会在页面上的每一个元素上起作用。

web设计者经常用它将页面中所有元素的margin和padding设置为0。

*选择符也可以在子选择器中使用。

以下是代码片段：#container * {border: 1px solid black;}上面的代码中会应用于id为container元素的所有子元素中。

除非必要，我不建议在页面中过的的使用星状选择符，因为他的作用域太大，相当耗浏览器资源。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera2. #X以下是代码片段：#container {width: 960px;margin: auto;}井号作用域有相应id的元素。

id是我们最常用的css选择器之一。

id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用id选择器的地步？兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera3. .X以下是代码片段：.error {color: red;}这是一个class(类)选择器。

class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera4. X Y以下是代码片段：li a {text-decoration: none;}这也是我们最常用的一种选择器——后代选择器。

css的选择器的详细介绍前言css选择器，是前端的基本功，只要你是一个前端，这个一定要掌握！今天之所以要重温一下css选择器，主要是和大家再复习一下css选择器中的一些常用符号的使用，例如“+、~、^、$、>、*”等的使用！之所以要复习呢，是因为我一个写后端的哥们，前端写的也很好，但是他今天突然问我，css中加号和大于号是啥意思？我说，这个貌似jquery中也有吧！好吧，可能这些符号不常用，造成我们对这些符号的陌生！那么今天，我们一起再来复习一下吧！大家在右侧搜索框中搜索“选择器”，会发现，我之前写过css用伪类nth-child，进行奇偶行的选择。

今天，关于css3伪类选择器，我就不多描述了！同时大家也可以看一下我之前写的“jquery常用选择器总结”，其实，jquery选择器和css选择器类似！特别是在属性选择和组合选择上面！基本选择器ID选择器：#header {}类选择器：.header {}元素选择器：div {}子选择器：ul > li {}后代选择器：div p {}伪类选择器：a:hover {}属性选择器：input[type="text"] {}id优先级高于类class；后面的样式覆盖前面的；指定的高于继承；css选择器之特殊符号1、>(大于号)大于号代表选择子元素，这个我们经常用，值得注意的是h1>strong 和h1 strong的区别这2个都是选择子元素，但是h1>strong 只选择某个元素的子元素。

例如如下：<h1>This is <strong class="haorooms">very</strong> <strong>very</strong> important.</h1><h1>This is <em>really <strong>very</strong></em> important.</h1>h1>strong ，只有第一个h1下面的strong被选中，第二个不起作用。

1.3 基本CSS选择器选择器(selector)是CSS中很重要的概念，所有HTML语言中德标记样式都是通过不同的CSS选择器进行控制的。

用户自尧通过选择器对不同的HTML标签进行选择，并赋予各种样式声明，即可实现各种效果。

为了理解选择器的概念，可以用“地图”作文类比。

在地图上都可以看到一些“图例”，比如河流用蓝色线表示，某公路用红色线表示，等等。

本质上就是一种内容与表现形式的对应关系。

在网页上，也同样存在着这样的对应关系，例如h1标题用蓝色文字表示，h2标题用红色文字表示。

因此为了使CSS规则与HTML元素对应起来，就必须定义一套完整的规则，实现CSS对HTML的“选择”。

这就是叫“选择器”的原因。

在CSS中，有各种不同类型的选择，本节先介绍“基本”选择器。

所谓“基本”，使相对于下一节中介绍的“复合”选择器而言的。

也就是说“复合”选择器使通过对基本选择器进行组合而构成的。

基本选择器有标记选择器、类别选择器、和ID选择器3种，下面详细介绍。

1.3.1 标记选择器一个HTML页面由很多不同的标记组成，CSS标记选择器用来声明哪些标记采用哪种CSS样式？因此，每一种HTML标记的名称都可以作为相应的标记选择器的名称。

例如，p选择器就是用于声明页面中所有标记的样式风格。

同样可以通过h1选择器来声明页面种所有的h1标记的风格，如下所示：<style>h1{color:red;font-size:25px;}</style>以上这段CSS代码声明了HTML种所有h1标记。

文字颜色采用红色，大小都为25px。

每一个CSS 选择器都半酣选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标记声明多种样式风格，如图1.6所示。

图1.6CSS标记选择器1.3.2 类别选择器在1.3.1小节中提到的标记选择器一旦声明，那么页面中所有的该标记都会相应的残生变化。

例如当声明了<P>标记为红色时，页面中所有的<P>标记都将显示为红色。

css选择器的使⽤css选择器的使⽤⽅法今天给⼤家分享⼀下css常⽤的选择器使⽤。

⾸先我们先了解⼀下为什么要使⽤选择器。

引⼊、要使⽤css对HTML页⾯中的元素实现⼀对⼀，⼀对多或者多对⼀的控制，这就需要⽤到CSS选择器。

HTML页⾯中的元素就是通过CSS选择器进⾏控制的，这就要⽤到我们的css选择器。

选择器的类别：1. 类型选择器2. id选择器3. class选择器4. 通⽤选择器5. 群组选择器6. 后代选择器7. 伪类选择器8. 属性选择器9. 层级选择器10. ...⼀、类型选择器的⽤法：样式：<style>div{width: 500px;height: 500px;background: #000;}</style>结构：<body><div></div></body><style>div{width: 500px;height: 500px;background: #000;}</style><body><div></div></body>运⾏结果：css通过类名来控制改变样式代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box{width: 200px;height: 100px;background: rgb(248, 2, 2);}</style></head><body><div id="box"></div></body></html>　id选择器⽤法给标签取⼀个id=“名称”的属性与属性值，属性值是⾃⼰命名。

CSS中的选择器有哪些？⼀、CSS选择器有哪些CSS中的选择器很多，⽐如：ID选择器，类选择器，通配符选择器，伪类选择器等等，接下来主要介绍常⽤的⼏个。

1.标签选择器语法：标签名{}，eg：h1{}//为所有的h1元素设置样式。

2.ID选择器语法：#id名{}//id值唯⼀不能重复,eg:#top{}//为id为top的元素设置样式。

3.类选择器语法：.class{},eg：.box{}//为所有的class值为box的元素设置样式。

4.组选择器语法：选择器1，选择器2，选择器N{},eg:#box1,.box2,p{}//为id为box1，class为box2和p的元素共同设置样式。

5、通配符选择器语法：*{}，eg：*{font-size：16px}//将整个页⾯字体⼤⼩设为16px。

6.后代选择器语法：选择器1选择器2{}，eg：p.aa{}//选中指定祖先元素p的指定后代.aa。

7.⼦元素选择器语法：⽗元素>⼦元素{},eg：p>.box{}//选中⽗元素p的指定⼦元素.box。

注意与后代元素选择器的区别8.伪类选择器伪类可以⽤来表⽰⼀些特殊的状态,如：：link-未访问过的超链接。

：visited-已访问过的超链接。

：hover-⿏标经过的元素。

：active-正在点击的元素。

eg：a:hover{color:red}//⿏标经过a标签时，颜⾊变为红⾊。

⼆、CSS选择器的优先级顺序当同⼀属性的不同值都作⽤到了同⼀个元素时，如果定义的属性之间有冲突，那么应该⽤谁的值的，这个时候就涉及到CSS的优先级顺序了。

1.在属性后⾯使⽤!important会覆盖页⾯内任何位置定义的元素样式。

2.作为style属性写在元素内的内部样式3.id选择器4.类选择器5.标签选择器6.通配符选择器7.浏览器⾃定义或继承的总结排序：!important>内部样式>ID选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认属性。

css选择器用法CSS选择器是一种用于选择HTML元素的语法。

它可以根据元素的标签名、类名、ID、属性等特征来选择元素，从而实现对元素样式的控制。

以下是CSS选择器的用法：1. 标签选择器标签选择器是最基本的CSS选择器，它可以通过HTML标签名来选择元素。

例如，要为所有段落设置字体颜色为红色，可以使用以下代码：```cssp {color: red;}```这将会把所有`<p>`标签的字体颜色都设置为红色。

2. 类选择器类选择器可以通过元素的class属性来选取元素。

例如，要为所有类名为`highlight`的元素设置背景颜色为黄色，可以使用以下代码：```css.highlight {background-color: yellow;}```这将会把所有class属性值为`highlight`的元素背景颜色都设置为黄色。

3. ID选择器ID选择器可以通过元素的id属性来选取元素。

例如，要为id值为`header`的元素设置字体大小为24px，可以使用以下代码：```css#header {font-size: 24px;}```这将会把id属性值为`header`的元素字体大小都设置为24px。

4. 属性选择器属性选择器可以通过HTML标签中任意一个属性来选取元素。

例如，要选取所有带有title属性的元素，可以使用以下代码：```css[title] {font-weight: bold;}```这将会把所有带有title属性的元素字体加粗。

5. 后代选择器后代选择器可以选取某个元素下的所有子元素。

例如，要为`<ul>`标签下所有`<li>`标签设置字体颜色为蓝色，可以使用以下代码：```cssul li {color: blue;}```这将会把`<ul>`标签下所有`<li>`标签的字体颜色都设置为蓝色。

6. 子元素选择器子元素选择器只选取某个元素的直接子元素。