44种CSS选择器的说明和实例
详解三十个最常用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选择器详解（转）
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选择器大全详解：
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中，选择器用于指定需要样式化的元素。
以下是一些
常见的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（层叠样式表）是一种用于描述网页上元素样式的语言。
在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选择器
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选择器总结 本⽂来⾃： 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选择器的基本类型_解释说明
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选择器解析讲解
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对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与SCSS的选择器总结
CSS与SCSS的选择器总结选择器可以选择1. 类（或ID）、2. 标签、3. 类（或ID）与标签组合表⽰⽅式为：类标签IDHTML class="cla"<lab>id="num"CSS.cla lab#num注意：类与ID类似，下⾯的例⼦的类也可以换成ID⼀、CSS的选择器1、多（类）选择器（1）类或标签选择class=“cla1 cla2 cla3”的标签，改变【内容3】.cla1.cla2.cla3 {width: 100%;}<div class="cla1"> 内容1</div><div class="cla1 cla2"> 内容2</div><div class="cla1 cla2 cla3"> 内容3</div>（2）标签与类的组合table.cla1.cla2 {width: 100%;}<table class="cla1 cla2"> 内容</table>2、群组选择器（1）类或标签选择含有cla1、cla2、cla3任⼀个class的标签，改变【内容1】、【内容2】、【内容3】.cla1, .cla2, .cla3 {width: 100%;}<div class="cla1"> 内容1</div><div class="cla1 cla2"> 内容2</div><div class="cla1 cla2 cla3"> 内容3</div>（2）标签与类的组合table, .cla1, .cla2 {width: 100%;}<div class="cla1"> 内容1</div><div class="cla2"> 内容2</div><table> 内容3</table>3、相邻选择器（1）类或标签选择cla1后⾯紧接的cla2（同⼀⽗级），改变【内容2】.cla1 + .cla2 {width: 100%;}<div class="cla0"><div class="cla1"> 内容1 </div><div class="cla2"> 内容2 </div></div>（2）标签与类的组合h1 + cla1 {width: 100%;}<div class="cla0"><h1> 内容1 </h1><div class="cla1"> 内容2 </div></div>4、⼦代(类)选择器（1）类或标签选择 cla1>cla2>cla3 这种嵌套结构的全部cla3标签（直接后代），改变【内容1】.cla1>.cla2>.cla3 {width: 100%;}<div class="cla1"><div class="cla2"><div class="cla3"> 内容1 <div class="cla3"> 内容2</div></div></div></div>（2）标签与类的组合table>.cla1>td {width: 100%}<table><div class="cla1"><td> 内容 </td></div></table>5、后代(类)选择器（1）类或标签选择 cla1后代⾥⾯的全部cla3标签（不管后代嵌套得有多深），改变【内容1】、【内容2】.cla1 .cla3 {width: 100%;}<div class="cla1"><div class="cla2"><div class="cla3"> 内容1<div class="cla3"> 内容2</div></div></div></div>（2）标签与类的组合.cla1 h1 {width: 100%;}<div class="cla1"><td><h1> 内容 </h1></td></div>6、伪类选择器伪类必须配合正常的类来使⽤，改变未访问的链接【内容】a:link {color: #fff}<a> 内容</a>⼆、SCSS的选择器1、多（类）选择器.cla1 {&.cla2.cla3 {width: 100%;}}.cla1.cla2.cla3 {width: 100%;}2、群组选择器.cla1 {&, .cla2, .cla3 {width: 100%;}}.cla1, .cla2, .cla3 {width: 100%;}3、相邻选择器.cla1 {& + .cla2 {width: 100%;}}.cla1 + .cla2 {width: 100%;}4、⼦代（类）选择器.cla1 {>.cla2>.cla3 {width: 100%;}}//或者是从⼦类写到⽗类（根据⾃⼰实际需要）.cla2 {.cla1>&>.cla3 {width: 100%;}}.cla1>.cla2>.cla3 {width: 100%;}5、后代（类）选择器.cla1 {.cla3 {width: 100%;}}//或者是从⼦类写到⽗类（根据⾃⼰实际需要）.cla3 {.cla1 & {width: 100%;}}.cla1 .cla3 {width: 100%;}6、伪类选择器a {&:link {color: #ffffff;}}a:link {color: #ffffff;}7、⾃定义类（BEM）的选择//以前的⽤法.cla {@at-root #{&}1 {width: 100%;}@at-root #{&}2 {width: 100%;}}//新⽀持的⽤法（后⾯最好不要跟【标签】或【属性】名）.cla {&1 {width: 100%;}&2 {width: 100%;}}.cla1 {width: 100%;}.cla2 {width: 100%;}8、属性的选择.cla1 {border: {width: 1px;style: soild;color: #ffffff;}}.cla1 {border-width: 1px;border-style: soild;border-color: #ffffff;}。
CSS选择器
CSS选择器CSS选择器当我们使⽤html搭好⼀个⽹页的框架后，就需要使⽤CSS来对⽹页进⾏美化。
CSS的语法⾮常简单，简⽽⾔之，就是选择器+声明块。
⼀张⽹页上的元素⾮常多，我们往往需要对不同的元素呈现出不同的样式，这时候就需要通过CSS选择器来选中页⾯上的指定元素，为其设置样式。
⼀、标签选择器标签选择器⽤来选中页⾯上所有相同的标签元素。
语法：HTML标签元素 +{}例⼦：/*标签选择器，这⾥选中p标签*/p{color: #FF5722;}<body><h1>测试⽤例1</h1><p>这是⼀段⽤来测试的⽂字1</p><p>这是⼀段⽤来测试的⽂字2</p><ul><li>这是⼀段⽤来测试的⽂字3</li><li><p>这是⼀段⽤来测试的⽂字4</p></li></ul></body>显⽰效果：⽆论标签处于页⾯中的任意位置，都会被⼀视同仁地设置成相同的样式。
⼆、类选择器类选择器会按照给定的class属性值，选择所有匹配的元素。
语法： . 类名+{}例⼦/*类选择器*/.words{color: #FF5722;}<body><h1>测试⽤例2</h1><p class="text">这是⼀段⽤来测试的⽂字1</p><p class="words text">这是⼀段⽤来测试的⽂字2</p> <!--class可以由多个属性值--><ul><li class="words">这是⼀段⽤来测试的⽂字3</li><li><p>这是⼀段⽤来测试的⽂字4</p></li></ul></body>显⽰效果三、id选择器按照id属性值选择⼀个匹配的元素。
CSS中的选择器有哪些类型各自的特点是什么
CSS中的选择器有哪些类型各自的特点是什么在网页设计和开发中，CSS（层叠样式表）是用于美化网页外观的重要工具。
而选择器则是 CSS 中用于选取需要应用样式的元素的关键部分。
就好像在一个装满各种物品的盒子里，选择器就是帮助我们准确找到想要处理的那些物品的工具。
下面让我们一起来了解一下 CSS 中的选择器有哪些类型，以及它们各自的特点。
一、简单选择器1、类型选择器（元素选择器）类型选择器是根据元素的名称来选择元素的。
例如，｀p` 选择器会选中所有的｀＜p>｀段落元素，｀h1` 选择器会选中所有的｀＜h1>｀标题元素。
它的特点是简单直接，能够快速地为同一类型的元素应用相同的样式。
但如果只想针对特定的某个或某些同类元素进行样式设置，类型选择器就显得不够精确了。
2、类选择器类选择器通过在元素的｀class` 属性中指定的类名来选择元素。
使用点号（）加上类名来定义，例如｀myClass` 。
其特点是可以将相同的样式应用于多个不同类型的元素，只要它们被赋予了相同的类名。
这使得样式的应用更加灵活，能够跨越元素类型的限制。
3、 ID 选择器ID 选择器是通过元素的｀id` 属性来选择元素的，使用井号（）加上 ID 名称，例如｀myId` 。
每个页面中每个 ID 都应该是唯一的，这就决定了 ID 选择器具有极高的特异性。
它通常用于选择单个、独特的元素，并且在整个页面中应该只使用一次。
二、组合选择器1、后代选择器后代选择器用于选择作为某元素后代的元素。
例如，｀div p` 会选择所有在｀＜div>｀元素内部的｀＜p>｀元素。
它的特点是能够精确地选择嵌套在特定元素内部的元素，从而实现更精细的样式控制。
2、子选择器子选择器只选择直接作为某元素子元素的元素。
例如，｀div ＞ p`只会选择｀＜div>｀元素的直接子元素｀＜p>｀，而不会选择｀＜div>｀内部嵌套的其他｀＜div>｀中的｀＜p>｀元素。
CSS 的常用选择器
一、标签选择器div {}二、类选择器.article {}三、id 选择器#pass {}四、通配符选择器* {margin: 0;padding: 0;}五、后代选择器div a span {}六、子代选择器div > a {}七、并集选择器div a,span a {}八、链接伪类选择器如果混合使用，需要按照 " link、visited、hover、active " 的顺序书写，否则浏览器可能无法正常显示这4种样式a:link {/* 选择鼠标未点击的 */}a:visited {/* 选择鼠标已经点击过的 */}a:hover {/* 选择鼠标经过 */}a:active {/* 选择鼠标点击未弹开 */}九、属性选择器[YY] {/* 选择有YY属性的所有元素 */}E[YY] {/* 选择有YY属性的E元素 */}E[YY="ZZ"] {/* 选择有YY属性，且属性值等于ZZ的元素 */}E[YY^=icon] {/* 选择有YY属性，且属性值是以icon开头的元素 */}E[YY$=icon] {/* 选择有YY属性，且属性值是以icon结尾的元素 */}E[YY*=icon] {/* 选择有YY属性，且属性值包含icon的元素 */}十、结构伪类选择器1. n 的说明取值意义1 2 3 ... n选中第几个子元素even(偶数)、odd(奇数)选中全部的奇数或偶数公式2n(0 2 4 6 ... )、5-n(5 4 3 2 1 0) 、、、、、、2. child 选择器功能：选择有父级元素的第 n 个 XX元素，先关注是第几个孩子，再判断类型是否符合先找到有父级元素的第 n 个 XX元素，之后判断是不是指定元素li:first-child {找到同一级中的第1个子元素判断是不是li}li:last-child {找到同一级中的最后1个子元素判断是不是li}li:nth-child(n) {找到同一级中的第n个子元素判断是不是li}3. type 选择器与child选择器功能一样，只不过type是先找出所有符合类型要求的元素，再关注第几个li:first-of-type {}li:last-of-type {}li:nth-of-type(n) {}十一、伪元素选择器需要注意的内容必须要有 content 属性，否则不起效果before 在内容前面，after 在内容后面before 和 after 创建的是一个行内元素伪元素和标签选择器一样，权重为 1创建出来的元素在 Dom 中查找不到，所以称为伪元素p:before {content: '前面前面';color: red;}p:after {content: '后面后面';color: yellow;}。
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.继承选择器（如：div p,注意两选择器⽤空格键分开）7.伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。
）8.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)在标签内写⼊style=" "的⽅式，应该是CSS的⼀种引⼊⽅式，⽽不是选择器，因为根本就没有⽤到选择器。
我们分别来看下这些选择器：1：标签名选择器⼀个XHTML⽂档中有许多标签，例如p标签，h1标签等。
若要使⽂档中的所有p标签都使⽤同⼀个CSS样式，就应使⽤标签选择器。
复制代码代码如下:div {color:red;border:1px blue solid;}p {color:#000;}2：类选择器使⽤标签选择器可以为整个XHTML⽂档中的同⼀个标签指定相同的CSS样式。
但是在实际运⽤中，XHTML⽂档中的同⼀个标签会被反复使⽤。
若要为相同的标签赋予不同的CSS样式就应使⽤类选择器。
复制代码代码如下:<div class="test">测试代码</div>.test {color:red;border:1px blue solid;}在html⽂档⾥，我们在要控制样式的标签的开标签（⾮成对标签如input直接放在标签⾥）⾥加⼊ class="xxx",在页⾯对应的css⽂件⾥，⽤.xxx就可以指向这个标签，从⽽对这个标签进⾏控制，我们称这种通过定义类（class）来找到标签的⽅式为：类选择器。
CSS选择器有哪几种？举例轻松理解CSS选择器
CSS选择器有哪⼏种？举例轻松理解CSS选择器CSS选择器汇总（清爽版）1、元素选择器标签名{ }2、id选择器 #id属性值{ }3、类选择器 ·class属性值{ }4、选择器分组（并集选择器）作⽤：通过它可以同时选中多个选择器对应的元素（通常⽤于集体声明）语法：选择器1，选择器2，选择器n{ }5、复合选择器（交集选择器）作⽤：选择更准确更精细的⽬标元素并为其设置属性语法：选择器1选择器2选择器n{ }<!--注意选择器之间不能有空格，要紧挨在⼀起-->6、通配选择器作⽤：⽤来选中页⾯中所有的元素语法：*{ }7、后代元素选择器作⽤：选中指定元素的指定后代元素语法：祖先元素后代元素{ }8、⼦元素选择器作⽤：选中指定⽗元素的⼦元素语法：⽗元素>⼦元素9、伪类选择器伪类表⽰元素的⼀种特殊状态:hover 移⼊时元素的状态:visited 已被访问过后的元素的状态:active 被点击时元素的状态10、属性选择器作⽤：根据元素中的属性或属性值来选取指定元素语法：[属性名]选取含有指定属性的元素[属性名=“属性值”]选取含指定属性值的元素[属性名^="属性值"] 选取属性值以指定内容开头的元素[属性名$="属性值"] 选取属性值以指定内容结尾的元素[属性名*="属性值"] 选取属性值包含指定内容的元素11、兄弟元素选择器+选择器作⽤：选中⼀个元素后紧挨着的指定的兄弟元素语法：前⼀个+后⼀个（作⽤在后⼀个）~选择器作⽤：选中后边所有的制定兄弟元素语法：前⼀个~后边所有。
CSS选择器的种类及使用场景解析
CSS选择器的种类及使用场景解析CSS选择器是用来选择HTML元素并对其应用样式的工具。
了解不同类型的CSS选择器及其适用的场景，可以帮助开发者更好地控制和定制网页的外观。
本文将介绍常见的CSS选择器类型，并探讨它们的使用场景。
1. 元素选择器元素选择器是最基本的CSS选择器类型，通过HTML元素的标签名称来选择对应的元素。
例如，使用p选择器可以选择所有的段落元素：```cssp {color: red;}```适用场景：元素选择器在全局样式中使用较多，可以通过选择元素名称来对整个页面或大部分页面元素进行样式设置。
2. 类选择器类选择器通过HTML元素的class属性来选择对应的元素。
使用`.`符号表示类选择器。
例如，使用`.highlight`选择器可以选择所有具有"highlight"类的元素：```css.highlight {background-color: yellow;}```适用场景：类选择器广泛应用于网页样式中，特别是当需要为多个不同类型的元素应用相同的样式时，可以通过为这些元素添加相同的类名来简化样式定义。
3. ID选择器ID选择器通过HTML元素的id属性来选择对应的元素。
使用`#`符号表示ID选择器。
例如，使用`#header`选择器可以选择具有"id"为"header"的元素：```css#header {font-size: 24px;}```适用场景：ID选择器一般用于唯一标识某个特定元素，例如页面的顶部导航栏或者页脚等，可以对其进行特殊样式设置。
4. 属性选择器属性选择器通过HTML元素的属性值来选择对应的元素。
属性选择器可以根据属性名称、属性值以及属性值的一部分进行选择。
例如，使用`[href]`选择器可以选择所有具有href属性的元素：```cssa[href] {color: blue;}```适用场景：属性选择器可以用来选择具有特定属性的元素，非常适用于根据元素的属性来进行样式设置。
CSS选择器实例
CSS选择器实例元素选择器E，选择所有指定元素名称的元素，例如p，选择所有的 p 元素。
通⽤选择器*，选择所有元素，例如：1.2.* {3.box-sizing: border-box;4.}类选择器.class，⽤⼀个点号加类名表⽰，例如.header，选择所有 class 属性中包含 header 的元素。
1.2.<div class="header">会被选中</div>3.4.<h2 class="header">也会被选中</h2>多类选择器使⽤多个 class 可以选择同时含有多个类名的元素，例如.collapse.in选择同时含有类 collapse 和 in 的元素：1.2.<div class="collapse in">会被选中</div>3.<div class="collapse">不会被选中</div>4.<div class="in">不会被选中</div>IE 6 浏览器不⽀持多类选择器，会忽略多类中前⾯的类，⽐如这⾥ IE 6 只会匹配.in。
ID 选择器#id，⽤⼀个 # 号加 ID 值表⽰，例如#title，选择 id 属性等于 title 的元素。
1.2.<h2 id="title"></h2>上下⽂选择器selector selector，⽤于选择元素内部的元素，例如p span，选择所有属于 p 元素内部的 span 元素。
1.2.<p>3.<span>会被选中</span>4.<strong><span>同样会被选中</span></strong>5.</p>⼦元素选择器selector > selector，⽤于选择带有特定⽗元素的元素，例如p > span，选择所有⽗元素为 p 的 span 元素。
信息与网络管理中心办公室-CSS所有的选择器类型总结
无参滤镜
有参滤镜
Gray：使对象产生灰度图 Alpha：设置对象的透明度。
效果，仅对图像有作用。 Blur：使对象产生模糊效果。
Invert：使对象产生“底片” Dropshadow：设置对象的阴
效果。
影效果。
Xray：使对象产生“X光 片”效果。
Chroma：将对象中指定的颜 色设置为透明色。
FlipH：使对象产生水平翻 Glow：在对象的边缘产生类
高
整理课件
对盒子模型的思考
边框是实的，我们可以看到实实在在的边 框，而填充和边界都是虚的，我们只能看 到他们对元素的影响
整理课件
c. 16进制颜色 16进制颜色的使用最普遍，其原理同样是RGB 色，不过将RGB颜色的数值转换成了16进制的 数字，并用更加简单的方式写出来—— #RRGGBB，如#ffcc33。
其参数取值范围为：00－FF（对应十进制仍为0－ 255），如果每个参数各自在两位上的数值相同， 那么该值也可缩写成“#RGB”的方式。例如， #ffcc33可以缩写为#fc3。
础。没有单位，浏览器将不知道一个边框 是10厘米还是10象素。CSS中较复杂的值 和单位有颜色取值和长度单位。 注意：HTML的属性的值一般不要写单位， 这是因为html属性的取值可用的单位很少， 要么是象素，要么是百分比 <table width="768">
整理课件
CSS长度单位
为了正确显示网页中的元素，许多CSS属性都 依赖于长度。所有长度都可以为正数或者负数 加上一个单位来表示，而长度单位大致可分为 三类：绝对单位、相对单位和百分比。
a. 命名颜色： p{color: red; } 其中“red”就是命名颜色，能够被CSS识别的颜
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
今天的笔记中包括44个选择器，基本涵盖了CSS 2和CSS 3的所有规定。
=====================
CSS选择器
阮一峰整理
一、基本选择器
实例：
* { margin:0; padding:0; }
p { font-size:2em; }
.info { background:#ff0; }
{ background:#ff0; }
.error { color:#900; font-weight:bold; }
#info { background:#ff0; } p#info { background:#ff0; } 二、多元素的组合选择器
实例：
div p { color:#f00; }
#nav li { display:inline; }
#nav a { font-weight:bold; } div > strong { color:#f00; } p + p { color:#f00; }
三、CSS 2.1 属性选择器
实例：
p[title] { color:#f00; }
div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; }
p[lang|=en] { color:#f00; }
blockquote[class=quote][cite] { color:#f00; } 四、CSS 2.1中的伪类
实例：
p:first-child { font-style:italic; }
input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; }
q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; } 五、CSS 2.1中的伪元素
实例：
p:first-line { font-weight:bold; color;#600; }
.preamble:first-letter { font-size:1.5em; font-weight:bold; }
.cbb:before { content:""; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; } a:link:after { content: " (" attr(href) ") "; }
六、CSS 3的同级元素通用选择器
实例：
p ~ ul { background:#ff0; }
七、CSS 3 属性选择器
实例：
div[id^="nav"] { background:#ff0; }
八、CSS 3中与用户界面有关的伪类
实例：
input[type="text"]:disabled { background:#ddd; } 九、CSS 3中的结构性伪类
实例：
p:nth-child(3) { color:#f00; }
p:nth-child(odd) { color:#f00; }
p:nth-child(even) { color:#f00; }
p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; }
tr:nth-child(2n+11) { background:#ff0; } tr:nth-last-child(2) { background:#ff0; } p:last-child { background:#ff0; }
p:only-child { background:#ff0; }
p:empty { background:#ff0; }
十、CSS 3的反选伪类
实例：
:not(p) { border:1px solid #ccc; } 十一、CSS 3中的:target 伪类。