我有这个LESS设置:
.wrapper {
.parent {
height: 100px;
.children {
//some style;
&:hover {
.parent & {
height: 150px;
}
}
}
}
}
Run Code Online (Sandbox Code Playgroud)
我需要通过将鼠标悬停在其中的某个子节点来更改父元素的某个高度.这段代码不起作用,有没有可能做到这一点?很多请求帮助.
在以下示例中:
<div class="section">
<div class="row">...</div>
<div class="row"> <- bottom margin here needs to be 0 ->
<div class="section">
<div class="row">...</div>
<div class="row">...</div>
</div>
</div>
</div>
.row {
margin-bottom:10px;
}
Run Code Online (Sandbox Code Playgroud)
如果div .row是div .section的父级,则将下边距重置为0。
我可以用jquery做到这一点,但是有没有办法在CSS中做到这一点?
有没有办法在CSS Selector中找到父元素?我使用下面的代码,但我没有得到父元素.
WebElement we=dr.findElement(By.cssSelector("div[id='gf-BIG']:parent"));
Run Code Online (Sandbox Code Playgroud)
我知道在XPath中有一种方法,但请让我知道我们如何在CSS Selector中找到parent.
我想在选中复选框时向我的复选框容器添加边框。
目前,我有这个:
<label
htmlFor="choose-me"
className=
'flex w-fit items-center justify-evely p-3 border-2 border-grey-4 text-grey-8
peer-checked:bg-light-indigo peer-checked:text-medium-indigo peer-checked:border-medium-indigo'>
<input type="checkbox" id="choose-me" className="peer mr-3 " />
Check me
</label>
Run Code Online (Sandbox Code Playgroud)
我想要类似下面的东西:

但是,当我将输入放入标签中时,我无法更改标签样式。
我有这样的HTML结构:
<svg>
<path/>
</svg>
<img/>
Run Code Online (Sandbox Code Playgroud)
有没有办法做"display:block;"之类的事情.到<img />时<path />悬停,仅限CSS?
~ 适用于以下兄弟选择器.
怎么可以选择.content引用该类的类.select?
HTML
<ul>
<li> <a>content</a> </li>
<li> <a class="select">selected li</a> </li>
<li> <a>content</a> </li>
</ul>
<div class="content">
selected content
<div>
Run Code Online (Sandbox Code Playgroud)
CSS(不工作)
ul > li > a.select ~ .content {
/* something */
}
Run Code Online (Sandbox Code Playgroud) 我的HTML代码看起来像那样
<div class="div1">
<span class="sp1"></span>
<span class="sp2"></span>
<img class="img1" src="sss.png">
<a class="a1" href="test.aspx">aaaa</a>
</img>
</div>
Run Code Online (Sandbox Code Playgroud)
代码还包含几个没有图像的框,css可以填充包含img标记的框
就像在这个CSS
.div1 > img {
padding: 1px 0px 5px 0 !important;
margin: 0;
}
Run Code Online (Sandbox Code Playgroud)
但是这个css填充了图像,我想填充div
假设您对我的帖子感到恼火,并想隐藏Stack Overflow的所有评论.我知道如何创建自定义CSS来隐藏我的用户名:
a[href$="what"] {
display:none !important;
}
Run Code Online (Sandbox Code Playgroud)
不幸的是CSS不允许我引用父元素,因此这将留下注释的文本.
如何将父级或前级兄弟隐藏到该链接标记?
我不是要求CSS选择器!我知道它不存在.请在结束前阅读问题(并在提供答案之前告诉我在我的问题中已经提到的内容).
我问你如何在没有相关CSS选择器的情况下选择DOM元素.我相信有JS解决方案,但我无法使用它们.也许还有其他选择,因此我不是特别要求JS.如果你告诉我如何使用PHP解析页面并通过另一个域显示它,那对我来说完全没问题.
Greasemonkey可能会这样做的提示根本没有帮助.解释如何做到这一点.让它在您的机器上工作并发布详细说明.我无法使用任何可用的脚本.
有没有办法用CSS选择元素的叔叔?具体来说,我正在为具有以下形式条目的页面编写一个 GreaseMonkey 脚本:
\n\n<ruby>\n <span class="under">\n <span class="wk_K">\xe6\xb1\xba</span>\n </span>\n <rt>\xe3\x81\x8d</rt>\n</ruby>\n<ruby>\n <span class="under">\xe6\xb1\xba</span>\n <rt>\xe3\x81\x8d</rt>\n</ruby>\nRun Code Online (Sandbox Code Playgroud)\n\n我想隐藏rt出现在字段旁边的每个字段wk_K(除非我将鼠标悬停在后者上),即上面rt示例中的第一个字段应该隐藏,但第二个字段不应该隐藏。
有时<span class="under">不存在,然后相邻的同级选择器就可以正常工作:
ruby .wk_K + rt {visibility:hidden;}\nruby .wk_K:hover + rt {visibility:visible;}\nRun Code Online (Sandbox Code Playgroud)\n\nwk_K当字段嵌套在 a 中时<span class="under">,即如果我想选择“相邻叔叔”,如何才能达到相同的效果?
我有许多嵌套元素,我试图只选择前 N 个级别。下面显示了一个工作示例,其中我选择了前 7 个级别并为其设置样式。这正是我想要的,但是,我希望有一种简化的方法来选择这些元素。
在我的实际用例中,我不知道嵌套元素的总数,并且我试图选择前 50 个级别,因此使用上述方法会非常混乱。不幸的是,我无法更改应用程序中的 HTML,因此它需要是一个仅限 CSS 的方法。谢谢。
.container > div,
.container > div > div,
.container > div > div > div,
.container > div > div > div > div,
.container > div > div > div > div > div,
.container > div > div > div > div > div > div,
.container > div > div > div > div > div > div > div {
border-left: 1px solid;
padding-left: 15px; …Run Code Online (Sandbox Code Playgroud)css ×9
html ×2
parent ×2
client-side ×1
css3 ×1
greasemonkey ×1
hover ×1
javascript ×1
less ×1
nested ×1
parent-child ×1
reactjs ×1
selenium ×1
tailwind-css ×1
webdriver ×1
xpath ×1