44种CSS选择器的说明和实例

详解三十个最常用CSS选择器解析你也许已经掌握了id、class、后台选择器这些基本的css选择器。

但这远远不是css的全部。

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

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

一、========================== 我是代码==========================* {margin: 0;padding: 0;}========================== 我是代码==========================星状选择符会在页面上的每一个元素上起作用。

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

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

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

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

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

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

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

CSS选择器详解（转）元素选择器通配选择器* { sRules }选定⽂档所有的元素/** 设置所有元素为红⾊ **/* { color: red;}<div>我是div</div><p>我是p</p>类型选择器E { sRules }选定指定的⽂档元素 E/** 设置元素p为红⾊ **/p { color: red;}<p>我是p</p>类选择器E.myclass { sRules }选定 class 属性包含 myclass 的⽂档元素 E/** 设置 calss="myclass" 的元素为红⾊ **/.myClass { color: red}<div class="myclass">我是div</div>多类选择器E.myclass.myotherclass { sRules }选定 class 属性包含 myclass 以及 myotherclass 的⽂档元素 E/** 设置 calss="myclass myotherclass" 的元素为红⾊ **/.myClass.myotherclass { color: red}<div class="myclass myotherclass">我是div</div>ID选择器E#myid { sRules }选定 id 属性值为 myid 的⽂档元素 E/** 设置 id="myid" 的元素为红⾊ **/#myid { color: red;}<div id="myid">我是div</div>属性选择器E[attr] { sRules }选定具有属性 attr 的⽂档元素 E/** 设置有属性 id 的元素为红⾊ **/div[id] { color: red;}<div id="myid">我是div</div>根据具体属性值选择E[attr="val"] { sRules }选定具有属性 attr 且属性值等于 val 的⽂档元素 E/** 设置有属性 id 且值等于 "myid" 的元素为红⾊ **/div[id="myid"] { color: red;}/** 多个属性-值 **/input[type="text"][class="text1"] { width: 20px;}<div id="myid">我是div</div><input type="text" class="text1" />根据部分属性值选择E[attr~="val"] { sRules }选定具有属性 attr 且属性值为⽤空格分隔的字词列表，其中有⼀个等于 val （包含只有⼀个值且该值等于 val 的情况）的⽂档元素 E /** 设置 class 属性有⼀个值为 div1 的元素为红⾊ **/div[class~="div1"] { color: red;}<div calss="div1">我是div</div><div class="div1 header">我是div</div>E[attr^="val"] { sRules }选定具有属性 attr 且属性值以 val 开头的字符串的⽂档元素 E/** 设置 class 属性的值以 head 开头的元素为红⾊ **/div[class^="head"] { color: red;}<div calss="headClass">我是div</div>E[attr$="val"] { sRules }选定具有属性 attr 且属性值以 val 结尾的字符串的⽂档元素 E/** 设置 class 属性的值以 Class 结尾的元素为红⾊ **/div[class$="Class"] { color: red;}<div calss="headClass">我是div</div>E[attr*="val"] { sRules }选定具有属性 attr 且属性值包含 val 的字符串的⽂档元素 E/** 设置 class 属性的值包含 Div 的元素为红⾊ **/div[class*="Div"] { color: red;}<div calss="headDivClass">我是div</div>选定具有属性 attr 且属性值以 val 开头并⽤连接符 "-" 分隔的字符串（包含属性值只有 val 的情况）的⽂档元素 E /** 设置 class 属性的值以 head 开头并⽤连接符 "-" 分隔的元素为红⾊ **/div[class|="head"] { color: red;}<div calss="head-class">我是div</div>关系选择器后代选择器E F { sRules }选定⽂档元素 E 所有的后代元素 F，包含所有⼦孙/* 设置 div 后代所有的 p 为红⾊ */div p { color: red;}<div> <p>我是段落1</p> <div> <p>我是段落2</p> </div></div>⼦代选择器E>F { sRules }选定⽂档元素 E 所有的⼦代元素 F，不包含孙代元素/* 设置 div ⼦代的 p 为红⾊，但孙代的 p 不为红⾊ */div>p { color: red;}<div> <p>我是段落1</p> <div> <p>我是段落2</p> </div></div>相邻选择器E+F { sRules }选定⽂档元素 E 之后且同属⼀个⽗元素的相邻兄弟元素 F/* 设置 h1 相邻的 p 为红⾊，但第⼆个 p 不为红⾊ */h1>p { color: red;}<div> <h1>我是h1</h1> <p>我是段落1</p> <p>我是段落2</p></div>兄弟选择器E~F { sRules } CSS3选定⽂档元素 E 之后且同属⼀个⽗元素的兄弟元素 F/* 设置 h1 之后所有的 p 为红⾊ */h1>p { color: red;}<div> <p>我是段落2</p></div>伪类选择器:linka:link { sRules }设置超链接 a 未被访问前的样式a:link { color: blue;}<a href=""></a>:visiteda:visited { sRules }设置超链接 a 已经被访问后的样式a:link { color: red;}<a href=""></a>:focusE:focus { sRules }设置元素 E 在成为输⼊焦点（该元素的 onfocus 事件发⽣）时的样式a:focus { color: black;}<a href=""></a>:hoverE:hover { sRules }设置元素E在⿏标悬停时的样式a:hover { color: red;}<a href=""></a>:activeE:active { sRules }设置元素E在被⽤户激活（在⿏标点击与释放之间发⽣的事件）时的样式a:active{ color: green;}<a href=""></a>以上五种伪类选择器同时⽤在a超链接时，各伪类需按特定的顺序书写才能⽣效，保证各浏览器具有相同的表现。

CSS选择器大全详解：1.标签选择器2.类选择器3.id选择器4.A B表示后代选择器5.A,B表示与集选择器6.A.B表示交集选择器7.A*表示A的所有后代元素,如果A是<body>可省略A不写8.A+B表示选择紧接着A元素后的B元素(A和B有共同的父元素)h1 + p {margin-top:50px;}选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素9.A~B:p~ul选择器 p之后出现的所有ul。

两种元素必须拥有相同的父元素，但是 ul不必直接紧随 p。

10.A>B:css3特有的选择器，A>B 表示选择A元素的所有子B元素。

与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。

11.p:first-child选择属于其父元素的首个子元素的每个<p> 元素设置每个 <ul> 的首个子元素，并设置其样式：ul>:first-child{background:yellow;}12.:only-child:only-child 选择器匹配属于其父元素的唯一子元素的每个元素。

ul li:only-child选择属于ul唯一li的list-childp:last-child指定属于其父元素的最后一个子元素的 p 元素的背景色14.nth-child():nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

规定属于其父元素的第二个子元素的每个 p 的背景色：p:nth-child(2){background:#ff0000;}15.nth-last-child()规定属于其父元素的第二个子元素的每个p 元素，从最后一个子元素开始计数：p:nth-last-child(2){background:#ff0000;}16.first-of-type指定父元素的首个 p 元素的背景色：p:first-of-type{background:#ff0000;}:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。

css选择器写法
在CSS中，选择器用于指定需要样式化的元素。

以下是一些
常见的CSS选择器写法：
1. 元素选择器（Element Selector）：以元素的标签名作为选择器，例如：div、p、h1等。

2. 类选择器（Class Selector）：以“.”开头，后面跟类名，例如：.container、.red等。

3. ID选择器（ID Selector）：以“#”开头，后面跟ID名，例如：#header、#nav等。

4. 后代选择器（Descendant Selector）：用空格分隔选择器，
选择元素的后代，例如：div p、ul li等。

5. 子元素选择器（Child Selector）：用“>”选择元素的直接子
元素，例如：ul > li。

6. 伪类选择器（Pseudo-class Selector）：以“:”开头，用于选择
元素的特殊状态或行为，例如：hover、first-child等。

7. 伪元素选择器（Pseudo-element Selector）：以“::”开头，用
于选择元素的特殊部分，例如：::before、::after等。

8. 属性选择器（Attribute Selector）：用方括号括起来，用于
选择具有特定属性值的元素，例如：[href]、[type='text']等。

9. 通配选择器（Universal Selector）：用“*”选择所有元素。

以上是一些常见的CSS选择器写法，可以根据需求选择合适的选择器来选择样式化的元素。

CSS选择器解析CSS（层叠样式表）是一种用于描述网页上元素样式的语言。

在CSS中，选择器能够指定一个或多个HTML元素，并定义它们的样式。

选择器的解析是理解和应用CSS的重要基础，本文将对CSS选择器解析进行探讨。

一、选择器的基本概念选择器是CSS中用于选择一个或多个HTML元素的模式。

它可以根据元素的标签名、类名、ID、属性以及它们的关系进行选择。

下面介绍几种常见的选择器类型：1. 标签选择器（Tag Selector）标签选择器是最基本的选择器类型，它通过指定HTML元素的标签名来选择元素。

例如，p选择器将选择所有的段落元素：```p {color: red;}```2. 类选择器（Class Selector）（.）开头，后跟类名。

例如，.highlight选择器将选择所有具有highlight类的元素：```.highlight {background-color: yellow;}```3. ID选择器（ID Selector）ID选择器通过指定HTML元素的唯一ID标识来选择元素。

ID选择器以井号（#）开头，后跟ID名称。

例如，#logo选择器将选择具有logo ID的元素：```#logo {width: 200px;height: 100px;}```4. 属性选择器（Attribute Selector）用方括号（[]）进行包裹，并可以通过元素的属性名或属性值来选择元素。

例如，[type="text"]选择器将选择所有type属性值为text的元素：```[type="text"] {border: 1px solid gray;}```二、选择器的优先级当多个选择器同时应用于同一个元素时，可能会出现优先级的冲突。

为了解决这种冲突，CSS定义了一套选择器优先级的规则，用于确定应用哪个选择器的样式。

选择器优先级的规则如下：1. 通过ID选择器指定的样式优先级最高，它的权重为100。

CSS选择器1.常用选择器常用的选择器有类型选择器和后代选择器。

1.1类型选择器类型选择器用来选择特定类型的元素。

可以根据三种类型来选择。

1）ID选择器，根据元素ID来选择元素。

前面以”#”号来标志，在样式里面可以这样定义：#demoDiv{color:#FF0000;}这里代表id为demoDiv的元素的设置它的字体颜色为红色。

我们在页面上定义一个元素把它的ID定义为demoDiv，如：<div id="demoDiv">这个区域字体颜色为红色</div>用浏览器浏览，我们可以看到因为区域内的颜色变成了红色再定义一个区域<div>这个区域没有定义颜色</div>用浏览器浏览，与预期的一样，区域没有应用样式，所以区域中的字体颜色还是默认的颜色黑色。

2）类选择器根据类名来选择前面以”.”来标志，如：.demoDiv{color:#FF0000;}在HTML中，元素可以定义一个class的属性。

如：<div class="demo">这个区域字体颜色为红色</div>同时，我们可以再定义一个元素：<p class="demo">这个段落字体颜色为红色</p>最后，用浏览器浏览，我们可以发现所有class为demo的元素都应用了这个样式。

包括了页面中的div元素和p元素。

上例我们给两个元素都定义了class，但如果有很多个元素都会应用这个元素，那个一个个的定义元素，就会造成页面重复的代码太多，这种现象称为“多类症”。

我们可以改成这样来定义。

<div class="demo"><div>这个区域字体颜色为红色</div>同时，我们可以再定义一个元素：<p>这个段落字体颜色为红色</p></div>这样，我们就只是定义了一个类，同时把样式应用到了所有的元素当中。

css选择器总结 本⽂来⾃： css⾥的选择器有好多种，下⾯我就把我了解到的写⼀写，如果有不全的或者有误的欢迎留⾔指正，万分感谢。

⼀、选择器 1、* 通配符选择器 这个选择器是匹配页⾯中所有的元素，⼀般⽤来清除浏览器的默认样式.1*{margin:0; padding:0} 2、元素选择器 通过标签名来选择元素。

1div{width:100px; height:100px;} 3、class选择器 class选择器 / 类选择器 / ⽤class属性给元素命名，在页⾯中可以出现很多次，相当于⼈的名字。

1 2 3 4.box{width:100px; height:100px;} <div class="box"></div><p class="box"></p> 4、 id选择器 以id属性来命名，在页⾯中只能出现⼀次，具有唯⼀性，并且权重值最⾼，相当于⼀个⼈的⾝份证。

1 2 3#box{width:100px; height:100px;} <div id="box"></div>　⼆、⾼级选择器⼀　 1、 E F 后代选择器 匹配到E元素下⾯的所有的F元素（包括⼦、孙），空格隔开。

1 2 3 4 5 6 7 8div ul li {width:100px; height:100px;}<br>//匹配到div下⾯的所有ul，且ul的所有后代li <div> <ul> <li></li> <li></li></ul></div> 2、 E,F 多元素选择器 同时匹配到E元素和F元素，⽤逗号隔开。

1 2 3 4div,#box{width:100px; height:100px; background:#000;}//同时匹配到下⽂中的div标签和id为box的p标签<div></div><p id="box"></p> 3、E>F ⼦元素选择器 选择到E元素的直接⼦代F，只选择⼦代。

css选择器的基本类型解释说明1. 引言1.1 概述在网页设计与开发中，CSS选择器起着至关重要的作用。

通过CSS选择器，我们可以选择特定的HTML元素，并针对其应用样式。

这使得我们可以灵活地控制和布局网页中的各个元素，使其呈现出我们期望的样式和效果。

1.2 文章结构本文将对CSS选择器的基本类型进行详细解释和说明。

首先，我们将介绍元素选择器、ID选择器以及类选择器等最常见的基本类型。

然后，我们会进一步解释属性选择器、后代选择器和子元素选择器等更加深入的概念和用法。

接下来，我们还会列举一些实际应用场景示例与案例分析，包括网页排版与样式布局中的常见应用场景、用户界面设计中的CSS选择器应用案例分析以及移动端开发中的CSS选择器实践经验分享。

最后，在结论部分，我们将总结各种类型CSS选择器的特点和适用场景，并探讨未来CSS选择器的发展趋势。

1.3 目的本文旨在帮助读者全面了解和掌握CSS选择器的基本类型及其使用方法。

通过学习本文内容，读者将能够更加熟练地运用CSS选择器来设计和开发网页，实现各种个性化的样式和布局效果。

同时，本文还将通过实际应用场景示例与案例分析，帮助读者更好地理解CSS选择器的实际应用价值，并为读者提供一些在不同领域中使用CSS选择器的参考意见。

最后，展望未来的发展趋势，将有助于读者把握CSS选择器技术的动态变化，并为自己的学习和工作规划做出合理的调整。

2. CSS选择器的基本类型2.1 元素选择器元素选择器是CSS中最基础也是最常用的一种选择器。

它通过匹配HTML文档中指定的元素类型来应用样式。

举个例子，要为所有的段落元素设置红色文字颜色，可以使用以下样式规则：```p {color: red;}```上述规则中的"p" 就是一个元素选择器，它会将样式应用于所有段落元素。

2.2 ID选择器ID选择器是根据HTML元素的唯一标识符（即id属性）来选取元素并应用样式。

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对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=“名称”的属性与属性值，属性值是⾃⼰命名。