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常⽤的选择器有：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选择器以某字端开头的命令

CSS选择器以某字端开头的命令一、介绍在CSS（层叠样式表）中，选择器是用来选择要应用样式的元素的模式。

在开发网页时，我们经常需要根据特定的元素选择器来应用样式。

而以某字端开头的命令是指以某个字母或字符串开头的选择器命令。

这些选择器命令在CSS中有着重要的作用，能够帮助我们快速有效地选择到指定的元素，从而实现网页的样式设计和布局。

本文将详细介绍CSS选择器中以某字端开头的命令，以及它们在实际开发中的应用。

二、ID选择器1. #idID选择器是通过元素的id属性来选择元素，id属性是页面上的唯一标识符。

在CSS中，我们可以使用以#符号开头的命令来选择指定id的元素，并为其设置样式。

例如：#header {background-color: #f2f2f2;border: 1px solid #000;}2. #[id^="value"]在实际开发中，有时候我们需要选择以某个值开头的id，这时可以使用以^符号开头的命令来实现。

我们想选择所有id以"menu"开头的元素，可以这样写：#[id^="menu"] {color: red;}三、类选择器1. .class类选择器是通过元素的class属性来选择元素，class属性可以用于多个元素。

在CSS中，我们可以使用以.符号开头的命令来选择指定class的元素，并为其设置样式。

例如：.button {background-color: #ff0000;color: #ffffff;}2. .[class^="value"]同样可以使用以^符号开头的命令来选择class以特定值开头的元素。

我们想选择所有class以"btn"开头的元素，可以这样写：.[class^="btn"] {font-size: 16px;}四、属性选择器1. [attribute=value]属性选择器是通过元素的属性值来选择元素，可以根据属性的值来设置样式。

css gt选择器用法

css gt选择器用法摘要：1.CSS 选择器概述2.:gt 选择器的含义3.:gt 选择器的用法4.实例分析正文：一、CSS 选择器概述CSS 选择器是CSS（层叠样式表）中用于选择并匹配HTML 元素的一种方法。

通过使用选择器，我们可以为特定的元素设置样式，从而实现页面排版和美化的目的。

CSS 选择器有很多种类型，如元素选择器、属性选择器、伪类选择器等。

本篇文章主要介绍一种相对较少使用，但非常有用的选择器：`:gt 选择器」。

二、:gt 选择器的含义`:gt 选择器`是CSS 中的一个伪类选择器，它的作用是选取某个元素之后的第一个子元素。

这里的“某个元素”可以是一个具体的HTML 元素，也可以是一个CSS 选择器。

`:gt 选择器`主要用于处理一些特殊场景，如清除浮动、实现三角形布局等。

三、:gt 选择器的用法`:gt 选择器`的基本语法为`:gt(选择器)`，其中括号里的选择器用于指定需要选取的子元素。

以下是一个简单的例子：HTML:```html<div class="parent"><p class="child">子元素1</p><p class="child">子元素2</p><p class="child">子元素3</p></div>```CSS:```css.parent:gt(p) {background-color: red;}```在上述代码中，`.parent:gt(p)`表示选取`.parent`元素之后的第一个`<p>`元素，为其设置背景颜色为红色。

四、实例分析假设我们有如下HTML 结构：```html<div class="container"><div class="item">项目1</div><div class="item">项目2</div><div class="item">项目3</div></div>```我们可以使用`:gt 选择器`为每个项目元素之后的第一个子元素设置样式，代码如下：```css.container.item:gt(div) {background-color: blue;}```在这个例子中，`.container.item:gt(div)`表示选取每个`.item`元素之后的第一个`<div>`元素，为其设置背景颜色为蓝色。

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兄弟选择器，+~选择器的区别壹❀引实习⽣在写搜索框下拉提⽰时，遇到了不知道怎么解决的问题，所以来问我。

效果不难，⿏标选中输⼊框(focus)时，展⽰搜索关键字相关提⽰，看了眼dom结构是这样的：在她的理解⾥⾯，选中⽗元素可以操控⼦元素样式，⽽此时输⼊框和下拉框是兄弟关系，所以难住了，听到这⾥我不假思索说了句，⽤兄弟选择器。

贰❀兄弟选择器1.相邻兄弟选择器++表⽰相邻兄弟选择器，例如h3+p表⽰选中每个h1之后同级（相同⽗级）且紧接其后的第⼀个p元素；我们来看看效果：h3+p{background: #bbded6;color: #fff;}<p>葡萄</p><h3>我是听风是风</h3><p>苹果</p><p>橘⼦</p><div> <p>⾹蕉</p></div><h3>我是听风是风</h3><p>桃⼦</p>可以看到，h3之前的p标签不会⽣效，⾮同级的p标签也不会⽣效，有效的只有紧接h3之后的p标签。

2.通⽤兄弟选择器~表⽰通⽤兄弟选择器，例如h3~p表⽰选中每个h3之后同级（相同⽗级）所有p元素；我们将选择器由 + 改为 ~ ，效果如下图：可以看到，h3之后所有同级p标签全部被选中。

那么到这⾥，我们了解了两种兄弟选择器+与~，⼆者区别在于+选择器⽤于选择紧跟⽬标标签之后的第⼀个兄弟标签，⽽~会选择⽬标标签之后所有兄弟标签。

现在你能区分两个选择器的区别了吗？。

CSS选择器-孩子孙子-兄弟（~+）

CSS选择器-孩⼦孙⼦-兄弟（~+）> 是⼉⼦辈的选择器，只选择⼉⼦辈先写⼀个最基本的（可以在本地跑⼀下试⼀试）：<!DOCTYPE html><head><meta charset="UTF-8"><title>测试⽹页</title><style>div article h2{color:blue;}</style></head><body><div><article><h2>div下的article的h2标签-1</h2><div><h2>div下的article下的div下的h2标签-2</h2></div><h2>div下的article的h2标签-3</h2></article></div></body></html>View Code区别于这个：<!DOCTYPE html><head><meta charset="UTF-8"><title>测试⽹页</title><style>div article>h2{color:blue;}</style></head><body><div><article><h2>div下的article的h2标签-1</h2><div><h2>div下的article下的div下的h2标签-2</h2></div><h2>div下的article的h2标签-3</h2></article></div></body></html>View Code ·······················································~是兄弟选择器，但是只是选择的兄弟的后⾯的兄弟被选择<!DOCTYPE html><head><meta charset="UTF-8"><title>测试⽹页</title><style>div article h2~h2{color:blue;}</style></head><body><div><article><h2>div下的article的h2标签-1</h2><div><h2>div下的article下的div下的h2标签-2</h2></div><h2>div下的article的h2标签-3</h2><h2>div下的article的h2标签-4</h2></article></div></body></html>View Code+是“铁兄弟”选择器，只选择紧挨着他的，如果后⾯第⼀个紧挨着的不是他，那就不选了。

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>。

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

1 相邻选择符<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>相邻选择符 (E+F)</title><!--描述：选择紧贴在E元素之后F元素。

语法：E+F{ sRules }--><style>body{background-color: deepskyblue;}p+p{color:#f00;}</style></head><body><div class="test"><h3>这是一个标题</h3><p>这是一个文字段落</p><p>这是一个文字段落</p><h3>这是一个标题</h3><p>这是一个文字段落</p><h3>这是一个标题</h3><p>这是一个文字段落</p><p>这是一个文字段落</p></div></body></html>2 兄弟选择符<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>兄弟选择符 (E~F)</title><!--描述：选择E元素后面的所有兄弟元素F。

语法：E~F{ sRules }--><style>body{background-color: deepskyblue;}p~p{color:#f00;}</style></head><body><div class="test"><h3>这是一个标题</h3><p>这是一个文字段落</p><p>这是一个文字段落</p><h3>这是一个标题</h3><p>这是一个文字段落</p><h3>这是一个标题</h3><p>这是一个文字段落</p><p>这是一个文字段落</p></div></body></html>3 子选择器<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>子选择符 (E>F)</title><!--描述：选择所有作为E元素的子元素F。

语法：E>F{ sRules }--><style>body{background-color: deepskyblue;}.test>li>a{color:#f00;}</style></head><body><ul class="test"><li><a href="?">列表项目1</a><ul><li><a href="?">项目列表1.1</a></li><li><a href="?">项目列表1.2</a></li></ul></li><li><a href="?">列表项目2</a><ul><li><a href="?">项目列表2.1</a></li><li><a href="?">项目列表2.2</a></li></ul></li><li><a href="?">列表项目</a></li><li><a href="?">列表项目</a></li></ul></body></html>4 包含选择器<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>包含选择符 (E F)</title><!--描述：选择所有被E元素包含的F元素。

语法：E F{ sRules }--><style>body{background-color: deepskyblue;}ul li{color:#f00;}</style></head><body><ul><li>列表项目</li><li>列表项目</li><li>列表项目</li><li>列表项目</li></ul></body></html>5 关系选择符<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>Relationship Selectors index</title><meta name="Description" content="CSS关系选择符" /><meta name="Keywords" content="CSS Relationship Selectors,包含选择符(E F),子选择符(E>F),相邻选择符(E+F),兄弟选择符(E~F)" /><meta name="robots" content="all" /><style type="text/css">body{background-color: deepskyblue;}</style></head><body><header id="hd"><h1 class="tit">CSS Relationship Selectors</h1><ul class="info"><li>关系选择符</li></ul></header><section id="bd"><section id="relationship-listing" class="gmodule gattr"> <h2 class="tit">关系选择符 Relationship Selectors</h2><div class="cont"><table class="gdataform"><thead><tr><th>Selectors<br />选择符</th><th>Name<br />名称</th><th>CSS Version<br />版本</th><th>Description<br />简介</th></tr></thead><tbody><tr><td><a href="ef.htm">E F</a></th><td>包含选择符(Descendant combinator)</td><td>CSS1</td><td>选择所有被E元素包含的F元素。

</td></tr><tr><td><ahref="e-child-f.htm">E>F</a></td><td>子选择符(Child combinator)</td><td>CSS2</td><td>选择所有作为E元素的子元素F。

</td></tr><tr><td><ahref="e-adjacent-f.htm">E+F</a></td><td>相邻选择符(Adjacent sibling combinator)</td><td>CSS2</td><td>选择紧贴在E元素之后F元素。