当前位置：文档之家 › 30个最常用css选择器解析讲解

30个最常用css选择器解析讲解

  • 格式：doc
  • 大小：82.51 KB
  • 文档页数：19

下载文档原格式

  / 19

合集下载

常见CSS选择器的权重和优先级

常见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 父选择器 使用方法

css 父选择器使用方法CSS 父选择器通常是指后代选择器（descendant selector）和子元素选择器（child selector）。

它们可以帮助我们选择特定元素的父元素或子元素。

1. 后代选择器（Descendant Selector）：通过空格分隔，可以选择某元素的所有后代元素，不论层级。

示例：```cssdiv p {color: red;}```上述样式会选择所有在 `<div>` 元素内部的 `<p>` 元素，不论 `<p>` 是在`<div>` 的哪一层。

2. 子元素选择器（Child Selector）：通过 `>` 符号分隔，可以选择某元素的直接子元素。

示例：```cssdiv > p {color: red;}```上述样式只会选择 `<div>` 的直接子 `<p>` 元素，不会选择更深层次的`<p>` 元素。

此外，还有一些伪类选择器可以用来选择特定状态的父元素或子元素，例如：`:hover`：当用户将鼠标悬停在元素上时选择该元素。

`:active`：当用户与元素交互（例如点击按钮）时选择该元素。

`:focus`：当元素获得焦点时选择该元素。

`:first-child`：选择元素的第一个子元素。

`:last-child`：选择元素的最后一个子元素。

`:nth-child(n)`：选择元素的第 n 个子元素。

这些伪类选择器可以与其他选择器结合使用，以选择特定状态的父元素或子元素。

例如，`div:hover p` 会选择所有在悬停状态下的 `<div>` 内部的`<p>` 元素。

CSS3中的子元素选择器

CSS3中的子元素选择器

CSS3中的⼦元素选择器⽬录：1.⼦元素选择器>，⽤来选中某个元素的第⼀级⼦元素，也就是⼉⼦元素<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* ⼦代选择器,只对⼉⼦元素有效 */p>strong{color: red;}</style></head><body><p>这是p标签，<strong>表⽰⼀个段落</strong></p><p>这是p标签，嵌套了<i>b标签和<strong>i标签</strong></p></body></html>2.兄弟选择器+，两个元素有同⼀个⽗元素，只对邻近的第⼀个元素起作⽤<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* 兄弟选择器,只对相邻的⼀个元素起作⽤ */h3+p{color: #008000;font-size: 18px;font-family: "楷体";}</style></head><body><h3>望庐⼭瀑布</h3><p>⽇照⾹炉⽣紫烟，遥看瀑布挂前川。

</p><p>飞流直下三千尺，疑是银河落九天。

css的选择器的详细介绍

css的选择器的详细介绍

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被选中，第二个不起作用。

CSS基本选择器

CSS基本选择器

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选择器的使⽤⽅法今天给⼤家分享⼀下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中的选择器有哪些类型各自的特点是什么在网页设计和开发中，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选择器兄弟选择器相邻兄弟选择器子元素选择器

css选择器兄弟选择器相邻兄弟选择器子元素选择器

css选择器兄弟选择器相邻兄弟选择器⼦元素选择器1.兄弟选择器： ~该选择器会选择当前元素之后的所有相邻指定元素（具有相同⽗元素的兄弟元素）；.p ~ li{color: blue;}<div><p class="p">我是p元素</p><strong>我是strong元素</strong><li>我是li元素</li> /*li元素被选中*/</div>2.相邻兄弟选择器： +该选择器会选择当前元素相邻的第⼀个兄弟元素（不管指定不指定相邻兄弟元素的类型，都会选择相邻第⼀个元素，如果没有匹配到则不给定样式）；.p + li {color: red;}<p class="p">我是p元素</p><li>我是紧邻的li元素</li> /*紧邻的li被选中；如果紧邻p元素的的不是li元素，则没有选中任何元素就⽆法添加指定样式*/<strong>我是strong元素</strong>3.⼦元素选择器： >该选择器会选择该元素下的指定⼦元素（只包括⼦元素，除了⼦元素以外的后代选择器不被选择）；.p > li {color: green;}<p class="p"><strong>我是strong</strong><li>我是li1</li> /*被选中*/<li> /*被选中*/我是li2<li>我是p元素的孙⼦元素li</li> /*作为p元素的孙⼦元素，不被选中*/</li><span>我是span</span></p>。

CSS中的选择器有哪些？

CSS中的选择器有哪些？

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选择器用法

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. 子元素选择器子元素选择器只选取某个元素的直接子元素。

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.继承选择器（如：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）来找到标签的⽅式为：类选择器。

CSS3选择器——属性选择器、关系选择器、结构化伪类选择器、伪元素选择器、伪链接

CSS3选择器——属性选择器、关系选择器、结构化伪类选择器、伪元素选择器、伪链接

CSS3选择器——属性选择器、关系选择器、结构化伪类选择器、伪元素选择器、伪链接属性选择器 属性选择器可以根据元素的属性及属性值来选择元素。

CSS3中新增了 3 种属性选择器：E[att^=value]、E[att$=value] 和 E[att*=value]1.E[att^=value] 属性选择器 E[att^=value] 属性选择器是指选择名称为 E 的标记，且该标记定义了 att 属性，att 属性值包含前缀为 value 的⼦字符串。

其中 E 是可以省略的，如果省略则表⽰可以匹配满⾜条件的任意元素。

如：div[id^=section] 表⽰匹配包含 id 属性，且 id 属性值是以 “section” 字符串开头的 div 元素。

2.E[att$=value] 属性选择器 E[att$=value] 属性选择器是指选择器名称为 E 的标记，且该选择器定义了 att 属性，att 属性值包含后缀为 value 的⼦字符串。

与E[att$=value]选择器⼀样，E元素可以省略，如果省略则表⽰可以匹配满⾜条件的任意元素。

如：div[id$=section]表⽰匹配包含 id 属性，且 id 属性值是以 “section” 结尾的 div 元素。

3.E[att*=value] 属性选择器 E[att*=value] 选择器⽤于选择名为 E 的标记，且该标记定义了 att 属性，att 属性值包含 value ⼦字符串，该选择器与前两个选择器⼀样，E 元素也可以省略，如果省略则表⽰可以匹配满⾜条件的任意元素。

如：div[id*=section] 表⽰匹配包含 id 属性，且 id 属性包含 “section” 字符串的 div 元素。

关系选择器 CSS3中的关系选择器主要包括⼦代选择器和兄弟选择器，其中⼦代选择器由符号 “>” 连接，兄弟选择器由符号 “+”和 “~” 连接。

1.⼦代选择器（>） ⼦代选择器主要⽤来选择某个元素的第⼀级⼦元素，如希望选择只作为 h1 元素⼦元素的 strong 元素，可以写为：h1 > strong。

CSS基本语法

CSS基本语法

CSS基本语法CSS常⽤选择器1、页⾯中，所有的CSS代码，需要写⼊到<style></style>标签中。

style标签的type属性应该选择text/css2、CSS 注释CSS修改页⾯中的所有标签，必须借助选择器选中。

选择器中，可以写多对CSS属性，⽤{}包裹：每个属性名与属性值之间⽤:分隔，多对属性之间，必须⽤;分隔。

3、【CSS常⽤选择器】①标签选择器写法： HTML标签名{}作⽤：可以选中页⾯中，所有与选择器同名的HTML标签。

②类选择器(class选择器)写法： .class名{}调⽤：在需要调⽤选择器样式的标签上，使⽤class="class名"调⽤选择器优先级： >标签选择器③ID 选择器写法： #ID名{}调⽤：需要调⽤样式的标签，起⼀个id="ID名"优先级： ID选择器>class选择器注意：⼀个页⾯中，不能出现同名ID【Class选择器与ID选择器的区别】写法不同:class选择器⽤.声明，ID选择器⽤#声明；优先级不同： ID选择器>class选择器作⽤范围不同： class选择器可以多次调⽤，ID选择器只能使⽤⼀次。

【选择器的命名规范】只能有字母、数字、下划线、减号组成；开头不能是数字。

也不能是只有⼀个减号。

⼀般，起名要求有语义，使⽤英⽂单词与数字的组合。

④通⽤选择器写法： *{}作⽤：可以选中页⾯中所有的HTML标签。

优先级：最低⑤并集选择器写法：选择器1,选择器2,……,选择器n{}⽣效规则：多个选择器取并集，只要标签满⾜其中任意⼀个选择器，样式即可⽣效。

⑥交集选择器写法：选择器1选择器2……选择器n{} 所有选择器紧挨着，没有分隔⽣效规则：多个选择器取交集，则必须满⾜所有选择器的要求，才能⽣效⑦后代选择器写法：选择器1 选择器2 …… 选择器n{} 选择器之间空格分隔⽣效规则：只要满⾜，后⼀选择器是前⼀个选择器的后代，即可成效。

automa css选择器用法

automa css选择器用法

automa css选择器用法在CSS中，选择器用于选择要应用样式的元素。

以下是一些常用的CSS选择器及其用法：1、元素选择器：元素选择器根据元素的名称选择元素。

例如，要选择所有的段落元素，可以使用以下选择器：cssp {color: red;}2、类选择器：类选择器使用元素的class属性来选择元素。

要选择具有特定类的元素，可以在类名前加上点（.）。

例如，要选择类名为"my-class"的所有元素，可以使用以下选择器：css.my-class {background-color: yellow;}3、ID选择器：ID选择器使用元素的ID属性来选择元素。

要选择具有特定ID的元素，可以在ID前加上井号（#）。

例如，要选择ID为"my-id"的元素，可以使用以下选择器：css#my-id {font-size: 20px;}4、后代选择器：后代选择器选择特定元素的后代元素。

要选择特定元素的后代元素，可以使用空格分隔两个元素名称。

例如，要选择所有在div元素内的p元素，可以使用以下选择器：cssdiv p {color: blue;}5、子元素选择器：子元素选择器选择特定元素的直接子元素。

要选择特定元素的直接子元素，可以使用大于符号（>）。

例如，要选择div元素的直接子元素p，可以使用以下选择器：cssdiv > p {color: green;}6、属性选择器：属性选择器根据元素的属性来选择元素。

要选择具有特定属性的元素，可以在方括号内指定属性名和属性值。

例如，要选择具有title属性的所有元素，可以使用以下选择器：css[title] {cursor: pointer;}这些是常用的CSS选择器，根据需要组合使用它们来选择和样式化页面上的元素。

css选择器表达式

css选择器表达式

css选择器表达式在CSS（层叠样式表）中，选择器用于选择要样式化的HTML元素。

以下是一些常见的CSS选择器表达式：元素选择器：选择所有指定元素。

例如，选择所有段落元素：p {color: blue;}类选择器：选择具有指定类的元素。

类选择器以点号（.）开头，后面跟着类名。

例如，选择所有具有 "highlight" 类的元素：.highlight {background-color: yellow;}ID选择器：选择具有指定ID的元素。

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

请注意，ID应该是唯一的。

例如，选择具有 "header" ID 的元素：#header {font-size: 24px;}后代选择器：选择元素的后代元素。

后代选择器使用空格分隔元素。

例如，选择所有 div 元素下的段落元素：div p {font-style: italic;}子元素选择器：选择元素的直接子元素。

子元素选择器使用大于号（>）。

例如，选择所有 ul 元素下的直接子元素 li：ul > li {list-style-type: square;}相邻兄弟选择器：选择与指定元素相邻的兄弟元素。

相邻兄弟选择器使用加号（+）。

例如，选择所有 h2 元素后面紧跟的 p 元素：h2 + p {color: red;}通用选择器：选择所有元素。

通用选择器使用星号（*）。

例如，为所有元素设置边框：* {border: 1px solid black;}属性选择器：选择具有指定属性或属性值的元素。

例如，选择所有具有 "data-category" 属性的元素：cssCopy code[data-category] {font-weight: bold;}这只是一小部分CSS选择器表达式的示例。

选择器的组合和使用可以非常灵活，以满足不同的样式化需求。

CSS选择器是Web开发中非常强大和常用的工具，可以帮助你选择和样式化页面上的各种元素。

详解CSS中的选择器优先级顺序

详解CSS中的选择器优先级顺序

详解CSS中的选择器优先级顺序特殊性是什么在对⼀个HTML元素应⽤CSS样式时，常常有很多种⽅法可以找到元素，⽐如：CSS Code复制内容到剪贴板1. <div id="container" class="wrap_sty">2. <p class="pra">这是⼀个段落</p>3. </div>4. <style>5. #container p { color:red }6. div p { color:green }7. p { color:yellow }8. </style>可见，如果要作⽤到⼀个HTML元素的⽅法有很多，远远不⽌这些。

那么如果⼀个元素被应⽤了很多同样的样式，最终会显式到哪⼀个样式呢？CSS对于多个选择器的优先性使⽤了⼀个叫做特殊性的⽅式。

CSS特殊性选择器的特殊性分为4个等级，a b c d，从左到右，越左边的越优先, 如果⼀个选择器规则有多个相同类型选择器，则+1。

如果是HTML内样式，那么特殊性最优先，a=1id选择器的特殊性是b，类选择器、伪类选择器、属性选择器为c标签选择器、伪元素选择器为d先来说说⼀些选择器类型：1.id选择器CSS Code复制内容到剪贴板1. #myid { ... }2.类选择器CSS Code复制内容到剪贴板1. .myclass { ... }3.标签选择器CSS Code复制内容到剪贴板1. p { ... }4.属性选择器CSS Code复制内容到剪贴板1. [title="mytitle"] { ... }由于⼤多数⽂档例如W3CSCHOOL可能并没有详细说明，或许不少⼈认为属性选择器是这样的 div[title="mytitle"] 或#id[title="mytitle"]等等，这样是属性选择器，严格来说，这样的并⾮单纯的属性选择器，⽽是由id选择器、标签选择器等等和属性选择共同组成的。

css概述与css选择器

css概述与css选择器

css概述与css选择器1.css概述css以HTML为基础提供了丰富的内容，如字体，颜⾊背景的控制及整体的排版等，⽽且可以根据不同浏览器设置不同的样式图中⽂字的颜⾊，粗体，背景，⾏间距和左右两列的排版等，都可以通过css控制的同时css⾮常灵活，既可以镶嵌在html⽂档中，也可以是⼀个单独的外部⽂件，如果是独⽴⽂件，必须以.css为后缀名css使⽤的是内嵌式，虽然与html在同⼀个⽂件中。

但css要集中写在html⽂档的头部，也是符合结构与表现相分离的2.css样式规则1.CSS样式中的选择器严格区分⼤⼩写，属性和值不区分⼤⼩写，按照书写习惯⼀般将选择器、属性和值都采⽤⼩写的⽅式。

2.多个属性之间必须⽤英⽂状态的分号隔开，最后⼀个属性的分号可以省略，但是，为了便于增加新样式最好保留。

3.如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英⽂状态下的引号。

4.在编写CSS代码时，为了提⾼代码的可读性，通常会加上CSS注释。

3.CSS的⼀些特点1.丰富的样式定义CSS提供了丰富的⽂档样式外观，以及设置⽂本和背景属性的能⼒；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变⽂本的⼤⼩写⽅式、修饰⽅式以及其他页⾯效果。

2.层叠性简单的说，层叠就是对⼀个元素多次设置同⼀个样式，这将使⽤最后⼀次设置的属性值。

例如对⼀个站点中的多个页⾯使⽤了同⼀套CSS样式表，⽽某些页⾯中的某些元素想使⽤其他样式，就可以针对这些样式单独定义⼀个样式表应⽤到页⾯中。

这些后来定义的样式将对前⾯的样式设置进⾏重写，在浏览器中看到的将是最后⾯设置的样式效果。

3.继承性⼀些属性和样式，如果在⽗代的元素设置了，⼦代以及后代的元素没有另外设置元素属性的话，就会继承⽗代的元素与属性。

⼀：属性选择器1.E[att^=value]属性选择器E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的字符串。

CSS中常用的七种选择器

CSS中常用的七种选择器

CSS中常⽤的七种选择器<!DOCTYPE html><html><head><meta charset="utf-8"><title>元素选择器</title><style>div{color: blue;font-size: 25px;}</style></head><body><div>昨天是个好⽇⼦</div><div>今天是个好⽇⼦</div><div>明天是个好⽇⼦</div></body></html><!DOCTYPE html><html><head><meta charset="utf-8"><title>ID选择器</title><style>#div1{color: red;}#div2{color: gold;}#div3{color: greenyellow;}</style></head><body><div id="div1">昨天是个好⽇⼦</div><div id="div2">今天是个好⽇⼦</div><div id="div3">明天是个好⽇⼦</div></body></html><!DOCTYPE html><html><head><meta charset="utf-8"><title>类选择器</title><style>.song{color: gold;font-size: 30px;}</style></head><body><div class="song">青花瓷</div><div class="song">东风破</div><div class="song">烟花易冷</div></body></html><!DOCTYPE html><html><head><meta charset="utf-8"><title>属性选择器</title><style>a[href][title='a']{color: yellow;}a[title='b']{color: darkblue;}</style></head><body><a href="#" title="a">张三</a><a href="#" title="b">李四</a></body></html><!DOCTYPE html><html><head><meta charset="utf-8"><title>后代选择器</title><style>p em{color: yellow;}</style></head><body><p><em>我是⼉⼦斜体</em><strong><em>我是孙⼦斜体</em></strong></p></body></html><!DOCTYPE html><html><head><meta charset="utf-8"><title>⼦元素选择器</title><style>p>em{color: yellow;}</style></head><body><p><em>我是⼉⼦斜体</em><strong><em>我是孙⼦斜体</em></strong></p></body></html><!DOCTYPE html><html><head><meta charset="utf-8"><title>伪类选择器</title><style>a:link{color: blue;} /*未点击*/a:visited{color: red;} /*已点击*/a:hover{color: yellow;} /*⿏标放在链接上但未点击*/ a:active{color: green;} /*⿏标点击但未松开*/ </style></head><body><a href="#">我是链接</a></body></html>。

CSS选择器

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>这样，我们就只是定义了一个类，同时把样式应用到了所有的元素当中。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

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;}这也是我们最常用的一种选择器——后代选择器。

用于选取X元素下子元素Y，要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况是不宜使用的，比如上述的代码去掉li下的所有a的下划线，但li里面还有个ul，我不希望ul下的li的a去掉下划线。

使用此后代选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。

这种后代选择器还有个作用，就是创建类似命名空间的作用。

比如上述代码样式的作用域明显为li。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera5. X以下是代码片段：a { color: red; }ul { margin-left: 0; }标签选择器。

使用标签选择器作用于作用域范围内的所有对应标签。

优先级仅仅比*高。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera6. X:visited和X:link以下是代码片段：a:link { color: red; }a:visted { color: purple; }使用:link伪类作用于未点击过的链接标签。

:hover伪类作用于点击过的链接。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera7. X+Y以下是代码片段：ul + p {color: red;}相邻选择器，上述代码中就会匹配在ul后面的第一个p，将段落内的文字颜色设置为红色。

(只匹配第一个元素)兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera8. X>Y以下是代码片段：div#container > ul {border: 1px solid black;}<div id="container"><ul><li> List Item<ul><li> Child </li></ul></li><li> List Item </li><li> List Item </li><li> List Item </li></ul></div>子选择器。

与后代选择器X Y不同的是，子选择器只对X下的直接子级Y起作用。

在上面的css和html例子中，div#container>ul仅对container中最近一级的ul起作用。

从理论上来讲X > Y是值得提倡选择器，可惜IE6不支持。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera9. X ~ Y以下是代码片段：ul ~ p {color: red;}相邻选择器，与前面提到的X+Y不同的是，X~Y匹配与X相同级别的所有Y元素，而X+Y只匹配第一个。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera10. X[title]以下是代码片段：a[title] {color: green;}属性选择器。

比如上述代码匹配的是带有title属性的链接元素。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera11. X[title="foo"]以下是代码片段：a[href=] {color: #1f6053;}属性选择器。

上面的代码匹配所有拥有href属性，且href为的所有链接。

这个功能很好，但是多少又有些局限。

如果我们希望匹配href包含的所有链接该怎么做呢？看下一个选择器。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera12. X[title*=""]以下是代码片段：a[href*=""] {color: #1f6053;}属性选择器。

正如我们想要的，上面代码匹配的是href中包含""的所有链接。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera13. X[href^="http"]以下是代码片段：a[href^="http"] {background: url(path/to/external/icon.png) no-repeat;padding-left: 10px;}属性选择器。

上面代码匹配的是href中所有以http开头的链接。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera13. X[href$=".jpg"]以下是代码片段：a[href^="http"] {background: url(path/to/external/icon.png) no-repeat;padding-left: 10px;}属性选择器。

在属性选择器中使用$，用于匹配结尾为特定字符串的元素。

在上面代码中匹配的是所有链接到扩展名为.jpg图片的链接。

（注意，这里仅仅是.jpg图片，如果要作用于所有图片链接该怎么做呢，看下一个选择器。

）兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera14. X[data-*="foo"]在上一个选择器中提到如何匹配所有图片链接。

如果使用X[href$=".jpg"]实现，需要这样做：以下是代码片段：a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"] {color: red;}看上去比较麻烦。

另一个解决办法是为所有的图片链接加一个特定的属性，例如‘dat a-file’html代码如下：以下是代码片段：<a href="path/to/image.jpg" data-filetype="image"> 图片链接 </a>css代码如下：以下是代码片段：a[data-filetype="image"] {color: red;}这样所有链接到图片的链接字体颜色为红色。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera15. X[foo~="bar"]属性选择器。

属性选择器中的波浪线符号可以让我们匹配属性值中用空格分隔的多个值中的一个。

看下面例子：html代码如下：以下是代码片段：<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>css代码如下：以下是代码片段：a[data-info~="external"] {color: red;}a[data-info~="image"] {border: 1px solid black;}在上面例子中，匹配data-info属性中包含“external”链接的字体颜色为红色。

匹配d ata-info属性中包含“image”的链接设置黑色边框。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera17. X:checkedchecked伪类用来匹配处于选定状态的界面元素，如radio、checkbox。

以下是代码片段：input[type=radio]:checked {border: 1px solid black;}上面代码中匹配的是所有处于选定状态的单选radio，设置1px的黑色边框。

兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera18. X:after和X:before这两个伪类与content结合用于在元素的前面或者后面追加内容，看一个简单的例子：以下是代码片段：h1:after {content:url(/i/logo.gif)}上面的代码实现了在h1标题的后面显示一张图片。

我们也经常用它来实现清除浮动，写法如下：以下是代码片段：.clearfix:after {content: "";display: block;clear: both;visibility: hidden;font-size: 0;height: 0;}.clearfix {*display: inline-block;_height: 1%;}19. X:hover以下是代码片段：div:hover {background: #e3e3e3;}:hover伪类设定当鼠标划过时元素的样式。