如何将相邻选择器与:before一起使用？
相邻选择器与:before伪元素可以一起使用来为相邻元素添加样式。
相邻选择器（Adjacent Sibling Selector）用于选择紧接在另一个元素后的元素。它使用"+"符号表示，例如：element1 + element2。这个选择器可以选择在element1后面紧跟的element2元素。
而:before伪元素用于在元素的内容前面插入一个虚拟的元素，并可以为其添加样式。它使用::before表示。
将相邻选择器与:before一起使用的方式是，在相邻选择器的前面加上:before伪元素。例如：
element1 + element2::before {
/* 样式属性 */
}这样就可以为紧跟在element1后面的element2的内容前面插入一个虚拟的元素，并为其添加样式。
应用场景：
- 在列表中，为相邻的列表项添加特殊的标记或样式。
- 在导航栏中，为相邻的导航项添加箭头或图标等装饰性元素。
- 在表格中，为相邻的单元格添加特定的样式或标记。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性、可靠的云服务器实例，满足各种计算需求。产品介绍链接
- 腾讯云云函数（SCF）：无需管理服务器，按需运行代码的事件驱动型计算服务。产品介绍链接
- 腾讯云内容分发网络（CDN）：加速内容分发，提升用户访问体验。产品介绍链接
- 腾讯云人工智能（AI）：提供丰富的人工智能服务和解决方案，助力业务创新。产品介绍链接
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。
相关·内容
我有一个联系人列表，它是作为一个无序列表生成的，其中为每个列表项分配了HTML5 data属性。data属性值是用于字母排序的单个字母。我无法控制生成的标记，但是我需要在每个字母的第一个条目之前插入一个节标题。我希望用:before伪元素来实现这一点。没什么不寻常的。我选择的CSS选择器有很大的自由度，因为这个项目只支持IE9+。
示例标记：
<ul>
<li data-name="a"> ... </li>
<li data-name="a"> ... </li>
<li
浏览 4提问于2013-09-25得票数 4
回答已采纳
1回答
我有以下代码，我正在使用纯HTML和CSS来显示翻转。当您将鼠标悬停在文本上时，它会更改左侧和右侧图像。
除了Safari4之外，我测试的所有浏览器都运行得很好。据我所知，Safari4支持div:hover和通用兄弟(~)。我知道它有点老了，但是谁能告诉我为什么它在Safari4中不起作用？如果我能修好它，我很乐意。
<div id="rollover-wrapper">
<div class="rollover-text" id="rollover-top1">Availability</div>
浏览 1提问于2012-08-24得票数 0
回答已采纳
2回答
我正在尝试对表单上的自定义复选框设置样式；我的HTML如下所示：
<form id="contact">
<input type="checkbox" id="option1" />
<label for="option1">Option</label>
</form>
我的CSS看起来像这样：
form input[type="checkbox"] {
position: absolute;
left: 0;
top: 0;
op
浏览 3提问于2016-01-20得票数 2
1回答
<body>
<div class="ccm-page">
<div class="ads-top">
<div class="adsbygoogle"></div>
</div>
</div>
<div class="ttb-panel"><div>
</body>
如何将CSS分配给ttb-panel div
浏览 0提问于2015-04-07得票数 0
如何将一些css应用于h2：：之后也有h2：：之前？
.region-sidebar-second .block > h2::after, .region-content .block > h2:after {
content: "";
display: block;
width: 30px;
margin-bottom: 1.25rem;
margin-top: 0.75rem;
border: 0.5px solid #252525;
position: relative;
}
#block-block-51 h2::before{
浏览 0提问于2019-12-20得票数 2
2回答
所以我找到了一个很酷的css3复选框示例
现在，我试图将它应用到我的HTML中，但是什么也没有发生。这是我第一次尝试格式化复选框，我发现这是一个真正的挑战。
这是。
<div class="fb-checkbox">
<label id="item21_0_label"><input id="item21_0_checkbox" class="css-checkbox" name="Project_type[]" type="checkbox" data-h
浏览 1提问于2014-03-20得票数 3
回答已采纳
1回答
我想关闭div行-动作的Woocommerce div只在Wordpress。用下面的代码做了一次，但没有joy。如何将相邻的div对准Wooccomerce (包装在强标记中)
#the-list > tr.inactive > td.plugin-title.column-primary strong[title="WooCommerce"] > .row-actions visible {
display:none;
}
浏览 4提问于2017-02-03得票数 1
回答已采纳
我有一些自定义单选按钮，这些按钮在单击时没有显示。实际隐藏的单选按钮确实会被选中，但是由于某种原因，当我选择新的按钮时，样式的颜色不会出现。有人能解释一下为什么吗？
JSFiddle：
CSS：
/* /
/ CSS for A Place to Begin Section of Form /
/ */
#apbContainer {
position :relative;
浏览 1提问于2014-12-10得票数 0
回答已采纳
我在应用:last-of-type和:before时遇到了问题。
我有以下几点：
.stepwizard-row:before {
position: absolute;
top: 0px;
content: " ";
width: 1px;
height: 100%;
background-color: #97D3FD;
}
.stepwizard-row:before:last-of-type {
position: absolute;
top: 0px;
content: " ";
}
然而，:before:last-o
浏览 1提问于2016-06-21得票数 0
回答已采纳
我有一个纯css的手风琴，可以在chrome桌面和safari手机上使用，但不能在chrome移动浏览器上使用。css和jsfiddle链接如下所示。我遗漏了什么？
.transition, .p-accordion, .ul-accordion .li-accordion i:before, .ul-
accordion .li-accordion i:after {
}
.flipIn, .h1-accordion, .ul-accordion .li-accordion {
}
.no-select, .h2-accordion {
-webkit-tap-highlight
浏览 4提问于2015-10-10得票数 0
1回答
我下载了一个CSS文件，如下所示(前几行)
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-family: Flaticon;
font-size: 20px;
font-style: normal;
margin-left: 20px;
}
.flaticon-3dm-file-format:befor
浏览 0提问于2016-10-26得票数 0
4回答
HTML如下所示：
<div id="content_wide">
<div class="photo-center borderless"><img src="http://example.com/travel-path-map.png" alt="" title="" /></div>
...but由于某种原因，我似乎不能像这样定位照片中心div：
#content_wide + .photo-center { margin-top:10px }
有趣的是，一个更
浏览 0提问于2011-06-27得票数 0
回答已采纳
4回答
当<a>处于悬停状态时，我尝试对它之后的所有节点设置样式。
HTML代码是
<a href="#">test</a>
<p>Is styles</p>
<p>Is not styled</p>
<p>Is not styled</p>
<p>Is not styled</p>
<p>Is not styled</p>
CSS代码是
a:hover + p {
background: #ffbbff;
}
这是一个。问
浏览 4提问于2013-04-22得票数 1
回答已采纳
1回答
如何将下拉菜单更改为在悬停时打开？
<div class="tab-content">
<div class="tab-pane fade in active" id="Eventos">
<div class="col-md-12">
<p>
<div class="btn-group">
<button type="button" class="btn btn-warni
浏览 1提问于2013-10-04得票数 1
1回答
CSS :：使用calc减少数字
、、、、
这个css脚本运行得很好：
table
{
counter-reset:rowNumber;
}
table tr
{
counter-increment:rowNumber;
}
table tr td:first-child::before
{
content:counter(rowNumber);
min-width:1em;
margin-right:0.5em;
}
但问题是，我想从rowNumber中减少-1 (或者其他选项将计数器重置为-1)
我试过这个：
content:counter(calc(rowNumber-1));
但它似乎
浏览 0提问于2017-03-26得票数 1
2回答
伙计们，这些天我一直在努力理解切换代码，我在谷歌上发现了这一点，我正试图理解这些代码来增强我的css技能，请帮助我，并提前感谢你。
1.为什么这个人在切换开关没有它的情况下可以工作时将转换声明放在这里?
2.为什么我们应该使用相邻的组合器而不是其他的组合子呢？我尝试了后代组合器，但它不起作用，我想知道为什么？
这是代码
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link
浏览 0提问于2018-12-18得票数 0
回答已采纳
2回答
通用选择器*会影响伪元素如:before和:after吗？
让我举一个例子：
当这样做时：
* { box-sizing: border-box; }
.上面的声明不也自动包含/影响伪元素(如:before和:after )吗？
或者，为了影响像:before和:after这样的伪元素，必须声明这一点吗？
*, *:before, *:after { box-sizing: border-box; }
这有道理吗？
我一直只使用* { box-sizing: border-box; }，从来没有遇到过任何伪元素的问题。但是我看到很多教程在做*, *:before, *:after，但它们从未
浏览 4提问于2014-07-17得票数 26
回答已采纳
我已经创建了一个只使用css的多级下拉菜单。它在有子元素的li元素旁边有一个下拉图标。
假设当我单击Featured 时，我想要更改菜单- when .menu图标。
我知道可以使用input element ::checked属性来完成它，但不知怎么的，我做不到。
这是我的密码
HTML：
<ul class="cd-accordion-menu animated">
<li class="has-children">
<input type="checkbox" name ="group-1
浏览 4提问于2018-05-29得票数 1
1回答
如何将下面的CSS插入HTML？
下面是我想要转换为HTML的CSS：
.group .circular-progress::before {
...
content: "10%";
...
}
下面是我尝试做的事情：
<div class="group">
<div class="circular-progress" style="content: '10%'"></div>
</div>
让我感到困惑的是::before元素，或者单引号不起作用
浏览 0提问于2019-02-12得票数 0
2回答
我有这个html代码：
<div id="main">
<section id="content">
<div id="catalogue">
<div class="coffee"><a href="coffees.html"><img src="img/kafesmenu.jpg"alt="coffees" width="250" heigh
浏览 0提问于2012-07-22得票数 1
你好，我正在一个shopify网站上工作，这是链接，我想要的帮助是显示只有在产品图像悬停时才会出现的产品标题，可以请一些人来指导我。
<style>
span#tit_pro {
display: none;
}
.ProductItem__LabelList:hover + span#tit_pro {
display: block;
color: red;
}
</style>
<span id="tit_pro">MYSHA FUCHSIA SCHIFFLI-ORGANZA
浏览 3提问于2022-01-20得票数 -2
我有以下CSS：
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td
{
浏览 4提问于2011-05-21得票数 0
回答已采纳
2回答
我使用了以下HTML和CSS代码：
p.head-1 {
font-size:250%;
color:#696969;
}
p.head-2 {
font-size:100%;
}
p.head-1+p.head-2 {
text-align:center;
display:block;
}
<div id="header">
<p class="head-1">
This is main heading
</p>
<p class="
浏览 4提问于2014-12-15得票数 0
回答已采纳
2回答
我正在寻找一种方法来给H1更多的边际-底部(或H2更多的边际-顶部)，以防h1和h2直接跟随彼此。因此，在第一种情况下，正常的边距应该适用，但在第二种情况下，我喜欢稍微改变一下边距(以便在H1和H2之间提供更多的“空白”)。尝试使用h1 h2 {margin...}和h1>h2 {margin...}，但到目前为止都没有成功。
案例#1
<h1>heading 1</h1>
<p>text</p>
<h2>heading 2</h2>
<p>text</p>
案例#2
<h1>he
浏览 0提问于2012-11-02得票数 2
我正在寻找一个css选择器，它可以选择一个类的元素(如果有)，不是有这个类吗？
所以让我说我有一个div：
<div>
<span id="1" class="myClass1">
<span id="2">
<span id="3" class="myClass1">
<span id="4" class="myClass1">
<span id="5">
浏览 1提问于2018-11-30得票数 0
2回答
HTML
...
<input id ="nav-toggle" type="checkbox">
<label id ="nav-toggle-label" for="nav-toggle">
<img src="ic_view_list_white_18px.svg">
</label>
...
CSS
...
header #nav-toggle {
display: none;
}
header #nav-toggle-label {
浏览 2提问于2016-04-30得票数 2
回答已采纳
4回答
在下面摘自的CSS中，与号(&)字符是什么意思？
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}
浏览 1提问于2012-11-28得票数 86
回答已采纳
我有这样一个嵌套列表：
<ul class="list">
<li class="list_item_type_1">
<ul class="list">
<li class="list_item_type_2">Unnested item</li>
</ul>
</li>
<li class="list_item_type_2">Unn
浏览 0提问于2009-09-04得票数 1
回答已采纳
2回答
我试图对以下几个方面产生影响：
悬停图像>更改下面的链接的颜色
但我不能让它正常工作。只有当我针对整个第一个容器.clearfix时，我才能使这种效果发挥作用，但是如何使其工作，只有当我悬停img而不是整个.clearfix元素时，才会改变链接的颜色？
.clearfix:hover > b a {
color:red;
}
<li class="clearfix">
<div class="zitem"><a href="#"><img class="re
浏览 3提问于2015-11-15得票数 0
回答已采纳
假设我有这样的代码来生成新的pod req := &api.Pod{
TypeMeta: unversioned.TypeMeta{
Kind: "Pod",
APIVersion: "v1",
},
ObjectMeta: api.ObjectMeta{
GenerateName: "name-, // need to get that name, before creating an object
浏览 11提问于2020-10-06得票数 1
回答已采纳
3回答
示例：
<div class="one">
</div>
<div class="two">
</div>
假设我想改变.two的背景颜色，当我在.one上使用:hover时，可以进行这种选择吗？
浏览 4提问于2013-05-04得票数 3
回答已采纳
我使用Jquery来呈现来自隐藏<span>的工具提示。我所做的就是将每个<span>值存储在javascript变量中，然后将这些变量添加到我的工具提示中，如下面的AppendTo tooltip(var1+var2+var3+etc..)
我的问题是，我需要在显示的一些内容之间留出一个段落空间(填充)。有时，我的工具提示只显示var1和var2 (var3和var4为空)。
对于间距，我实际上是在var2上使用css padding-bottom。所以如果var3不是空的，那么就需要空间，但是如果var3是空的，我就会得到一个不想要的空间。
我试图弄清楚，只有当我确
浏览 2提问于2013-08-01得票数 0
回答已采纳
2回答
我有一个列表，我希望在元素之后选择所有“相似”项(即具有相同类)：
<ul>
<li class="x">foo</li>
<li class="y" id="b">foo</li> <!-- From this... -->
<li class="y">foo</li> <!-- ...can I select this?... -->
<li class="y">
浏览 3提问于2017-01-18得票数 2
回答已采纳
HTML：
<ul>
<li attribute_name='a'>Test</li>
<li attribute_name='a'>Test</li>
<li attribute_name='b'>Test</li>
<li attribute_name='b'>Test</li>
</ul>
在这个例子中，我只想选择第三个<li>。属性名是固定的，但它的值是动态的，事先不知道。&l
浏览 2提问于2014-08-04得票数 0
回答已采纳
我试图在鼠标悬停时打开一个侧边的下拉菜单，但到目前为止，除了将包含的div缩短为仅text.length之外，我没有任何其他效果。我做错了什么？此外，我想使用尽可能少的脚本，可能只使用HTML和CSS。
代码来了。
<html>
<head>
<title>Thyra Kristin Lang</title>
<style>
body {
font-family: "Lato", sans-serif;
}
h1 {
font-size: xxx-large; text-align: center; tex
浏览 2提问于2021-05-05得票数 0
如何实现这种菜单：
关于|隐私|联系人|站点地图
..。菜单由竖线分隔，但第一个和最后一个项目的左右两侧没有竖线(如示例所示)？
菜单项是动态生成的(在wordpress中使用)，而不是手动生成。
谢谢。
浏览 1提问于2011-05-09得票数 8
回答已采纳
1回答
我创建了一份SSRS报告，我的报告中很少有如下记录：
ID | Currency | Amount
----------------------
1 | USD | 100.00
2 | USD | 80.00
3 | USD | 110.00
4 | EUR | 30.00
5 | EUR | 50.00
我可以将总额分为以下几个类别：
ID | Currency | Amount
----------------------
1 | USD | 100.00
2 | USD
浏览 3提问于2013-12-03得票数 0
回答已采纳
我不知道为什么我觉得这很难..。我试图做到这一点，所以当您在RBA 和 RDA上悬停时，它也会在末尾对“喷雾器”下划线。
我的目标不对吗？
HTML/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700italic,700,500italic,400italic,300italic,300);
#heroLinks-Wrap {
width: 692px;
height: 31px;
position: absolute;
margin: 20px 0px;
font-fami
浏览 1提问于2016-02-08得票数 1
回答已采纳
1回答
在这个中，MDN谈到了使用相邻兄弟组合器，也谈到了组合器，但他们从来没有把由相邻组合器组合的两个选择器称为选择器。人们通常将相邻组合子的结果称为相邻选择器，这是该术语的非正式用法吗？
浏览 6提问于2021-02-05得票数 0
只有当第一个孩子有类.hovered时，我才能针对：：prever.child-ccc？
以下是HTML输出：
<div class="parent">
<div class="child hovered">
<div class="child-aaa"></div>
<div class="child-aaa"></div>
</div>
<div class="child&
浏览 2提问于2021-12-20得票数 4
回答已采纳
2回答
Sass回巢问题
、、
我正在努力弄清楚如何具体地将nest备份到我所在的css嵌套的父节点。这意味着，我当前的设置是一个父类，以一个span到一个前缀。我需要根据父级上的修饰符更改伪的样式。如果我这么做：
.parent {
span {
&:before {
// styles
.modifier & {
// Other styles
}
}
}
}
输出是.modifier .parent span:before，我需要的是.parent.modifier span
浏览 2提问于2017-01-13得票数 1
回答已采纳
2回答
实际上，我被困得很厉害，弄不清楚。每当有人在链接的第一层上盘旋。当前悬停菜单的第二个子菜单/子菜单应该显示出来。下面是更多的信息。我已经经历过这类问题，但经过40分钟的研究和尝试，我现在还有点不需要思考。
HTML :
<ul id="header_topbar_ul">
<?php
global $db;
$db->SELECT("SELECT * FROM modules WHERE modules_status='1' AND modules_show_in_menu='1' AND
浏览 2提问于2013-12-24得票数 1
回答已采纳
1回答
是否有可能由另一个元素影响一个元素？当我单击链接.box时，我想移动a.link元素。
我试过了，但没能成功。我应该在link:active写些什么？
<html>
<head>
<style>
.box
{
height:100px;
width:200px;
border:solid red 5px;
}
.link:hover
{
color:red;
}
.link:active
{
color:grey;
}
</style>
</head>
<body>
浏览 0提问于2014-02-24得票数 0
回答已采纳
我不确定这是不是可能。我现在正在处理CSS3动画，我需要将鼠标悬停在一个链接上，该链接将影响页面上的其他div元素(非子元素)。我不确定周围有没有工作。
<style type="text/css">
#header {
background-color:red;
}
#header:hover .element {
background-color:blue;
}
.element {
background-color:green;
}
</style>
-
<header id="header">
浏览 1提问于2010-12-30得票数 25
我在使用jQuery中的一个简单的兄弟选择器时遇到了一些麻烦。
问题不会生成错误消息，当然，它只是无法正确选择。在一个文档(Ready)函数()中，我有以下简单的代码，首先隐藏所有弹出窗口，然后等待用户单击将显示兄弟弹出窗口的图像：
//hide all the charm pop ups
$(".charm_pop").hide();
$(".charm > img").click(function() {
$("this + .charm_pop").show();
})
我的超文本标记语言是由Django for循环生成的，所
浏览 1提问于2013-04-09得票数 0
回答已采纳
1回答
我试图直接为<label>设计样式，但基于值“黑色”。
html是由Wordpress插件输出的，<label>有一个在选择之前的#，我想把它作为改变和图标颜色的目标。但是，我希望根据无线电值多次更改图标颜色。在value=“黑色”的情况下，我希望将图标更改为黑色。
谁能给我指明正确的方向？
<div class="mspc-text-wrapper">
<strong class="mspc-attribute-title">Black</strong>
<div class=
浏览 1提问于2020-05-15得票数 0
回答已采纳
当链接悬停时，我正在尝试触发从display:none;到display:block;的div。我试图通过相邻的兄弟选择器来实现该反应，但目标div不会从none更改为block。我想这是因为我没有定义正确的层次结构，但我不知道还可以尝试什么。
<div id="home_bar">
<div id="welcome_left">
I’m <a href="#" id="name">Anthony</a>.
</div>
<
浏览 1提问于2014-03-10得票数 2
这是我正在处理的页面：
我在用。我正在试图弄清楚如何将非当前幻灯片放在当前幻灯片后面。
正如你在默认实现中看到的，幻灯片周围有一个空白处，我希望它们重叠。我尝试了使用负边距，它可以使它们重叠，但下一张幻灯片仍然在当前幻灯片的前面，尽管对.current幻灯片应用了高z索引，对所有其他幻灯片应用了低z索引。
非常感谢您能提供的任何见解。
浏览 2提问于2011-11-22得票数 1
3回答
我有下面的html表单
<div>
<p>Field1</p>
<input type="text" name="fld_one" id="fld_one" value="" />
</div>
<div>
<p>Field2</p>
<input type="text" name="fld_two" id="fld_two" required val
浏览 0提问于2012-09-14得票数 4
回答已采纳
下面的代码工作正常(比如案例1)
<div>
<a href="#" id="TAMIL">TAMIL</a>
<span id="subheader1">
<a href="#" >NEWS</a>
<a href="#" >AUDIO</a>
</span>
</div>
<
浏览 3提问于2015-10-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
