如何在样式中使用同级选择器css

在样式中使用同级选择器是指通过选择器选择与自身相同父级元素下的其他同级元素来进行样式设置。同级选择器在CSS中使用逗号（,）分隔多个选择器。下面是如何在样式中使用同级选择器的步骤：

了解同级选择器的语法：同级选择器使用“+”符号表示，连接两个选择器。第一个选择器选择要应用样式的元素，第二个选择器选择与第一个选择器相邻的同级元素。
根据需求，选择合适的选择器：同级选择器有多种，包括兄弟选择器（+）、相邻兄弟选择器（~）、通用兄弟选择器（~~）等。根据需要选择适合的选择器来实现样式的选择。
编写样式规则：使用同级选择器来选择需要应用样式的元素。可以选择元素的class、id等属性，或者选择元素本身的标签名。
应用样式：在样式规则中定义需要应用的样式属性和值，例如颜色、字体、大小、背景等。

以下是一个示例，演示如何使用同级选择器：

<!DOCTYPE html>
<html>
<head>
<style>
/* 使用相邻兄弟选择器，选择p元素后紧跟的同级元素span */
p + span {
  color: red;
}

/* 使用通用兄弟选择器，选择p元素后的所有同级元素span */
p ~ span {
  font-weight: bold;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<span>This is a span.</span>
<span>This is another span.</span>

</body>
</html>

在上面的示例中，第一个样式规则使用相邻兄弟选择器选择了紧跟在p元素后面的同级span元素，并将其文字颜色设置为红色。第二个样式规则使用通用兄弟选择器选择了p元素后的所有同级span元素，并将其文字加粗显示。

请注意，上述示例中并没有提及腾讯云的相关产品和链接地址，因为这些内容与使用同级选择器的问题并无关联。如果您有其他云计算方面的问题，我将非常乐意为您解答。

如何在每个h3之后引用Div

/div> <div id="loan-Wrapper" > </div> 如何在css中引用每个h3之后的div，这样我就可以设置一个样式，以便应用于页面中任何h3之后的所有第一个div？

浏览 0提问于2012-11-05得票数 0

回答已采纳

1回答

我已经写了下面的脚本来打印页面。 <font class="productnamecolorSMALL colors_productname"><b>Related Items</b></font><p>Click the button to print the current page.</p> <button onclick="myFunction()">Print this page</but

浏览 0提问于2017-03-29得票数 0

回答已采纳

3回答

CSS无同级选择器

、、

class="iwant" /></div> <div class="iwant" />我感兴趣的是一个选择器

浏览 1提问于2011-10-23得票数 37

回答已采纳

1回答

如何避免`<style>`标记被我的CSS选择器捕获？

、、、

我使用CSS对一些现有文档进行样式化，并使用许多相邻的同级选择器(例如item1 + item2)在元素之间应用间距等等。然而，许多文档还包括页面顶部的<style>标记，或者分散在应用自定义样式的地方。定制样式本身很好，但不幸的是，<style>标记本身干扰了我的CSS选择器。使用类似:not(style) + item的东西是我的第一个想法，但是如果页面中间有任何<

浏览 2提问于2021-04-30得票数 5

回答已采纳

3回答

只有ids和类的CSS -这是正确的方式吗？

、

我认为我几乎可以通过使用ids和类来编写我所有的CSS样式。没有复杂的选择器。没有复杂的规则。关于CSS3选择器的一个可悲的事实是，如果您关心页面性能，就根本不应该使用它们。用类和ids装饰您的标记，并在这些类和ids上进行匹配，同时避免使用同级、后代和子选择器，这实际上将使页面在所有浏览器中的性能显著提高。我关心的是页面表现..。

浏览 1提问于2011-02-16得票数 0

回答已采纳

3回答

完成事件后更改父级的css

/> </div> 我想要创建一个事件:如果单击了input[type=radio]，则更改父级的cssp/s:我也不想使用javascript或jquery来做这件事。

浏览 1提问于2016-05-07得票数 0

回答已采纳

1回答

使用DIVs包装时，选中基于复选框的标签样式。

、

my-check"><div class="form-item"></div> 在所有CSS世界中，是否有任何方法可以根据是否选中复选框来对该标签进行样式设置？

浏览 1提问于2015-09-26得票数 1

回答已采纳

4回答

第一种类型&之前或之后

、

我基本上有一个菜单，如下所示，在HTML代码中，我想在菜单中的每一个"li“之前添加”AC.26“，以给它一个外观(Home About the联系人)。但是，所有的东西都在工作，但是，我在菜单中的每个"ul“中删除第一个"li”时，都遇到了一个问题。currnt：content: "|";} 我尝试给它一个“先”类，然后使用li.first {contnet: no }，但没有希望

浏览 0提问于2013-10-08得票数 4

回答已采纳

2回答

嵌套表中的CSS优先级

、

因此，我为三个级别设置了一个样式，如果递归更深(级别% 3)，我会重复它们。

浏览 0提问于2017-04-05得票数 0

回答已采纳

2回答

在鸟巢的两个元素上盘旋

、、、

通过使用纯CSS (无JavaScript)，如何使仅当在 .a和.b，都是 .a和.b时才会变红？(这可以解释为“当我将.b悬停时，.a会变红”)<div class="a">AAAAA<div class="b">BBBBB</div></div>.b

浏览 10提问于2013-09-21得票数 0

回答已采纳

1回答

在嵌套结构中使用CSS同胞选择器(+)和SCSS父选择器(&)

、、、

我经常尝试在嵌套结构中使用SCSS对元素的下一个同级进行样式，如下所示： <div class="parent"> .grand__parent .parent .parent__child-1 + .grand__parent .parent .parent__child-2 {/* Expected

浏览 3提问于2022-04-06得票数 0

2回答

在父SASS上设置样式

、

在这种情况下，它有一个按钮来切换错误消息，但是在现实生活中，这将是动态的。Error </md-card-content>现在，我试图将md卡的边框颜色设置为红色，当错误可见时，这等于.infoMessages类在md-card中可见

浏览 4提问于2018-01-11得票数 0

回答已采纳

2回答

将#a悬停在样式#one上，其中#one是#b的子元素，#b是#a的兄弟元素

、

body> <div id="one"><div> </div> 这是我的css代码(我试图在鼠标悬停和我想要设置样式的元素之间放置"~，+，>“，但这些似乎都不起作用！)

浏览 0提问于2018-05-28得票数 0

2回答

td单元中垂直对齐的奇怪行为

、、

这部分html呈现为我希望它看起来()：<style media="screen" type="text/css"> text

浏览 5提问于2014-08-13得票数 0

回答已采纳

2回答

CSS选择器:如何选择非元素兄弟节点？

、

根据这里的规范： <div><label>Some text here</label> Non-element text</div>

浏览 6提问于2012-11-20得票数 13

回答已采纳

1回答

CSS悬停选择器不工作

我希望当我在.area类中悬停时，.button类会改变，但是它不能工作。我能做什么?

浏览 0提问于2013-10-31得票数 0

回答已采纳

1回答

我可以不按顺序选择CSS同级吗？

、

我正在尝试编写css，以便根据页面上的元素自动设置列的样式。我想使用CSS (最好不要使用任何javascript)来设置article的宽度。我一直在尝试CSS兄弟，但我不太能让它工作。问题是我总是想样式化article，即使它不是DOM中那个部分的最后一个。对最后两个布局分别使用选择器article~.right和.left~.article~.right可以找到正确的布局组合(即，先是article，然后是as

浏览 0提问于2012-11-22得票数 1

回答已采纳

1回答

React中的选择器本机用于选择所有组件

在使用HTML时，是否有CSS选择器或React本机支持的指示符来选择CSS中的所有组件(如主体选择器)？我们不选择组件来对它们进行样式化，这与html不同；我们选择要被样式化的html元素，例如，从css工作表中选择标签名。相反，在react中，样式名称被放入组件中，即标记中。

浏览 3提问于2015-09-01得票数 9

回答已采纳

1回答