css,选择上一个锚点

发布于 2024-09-26 09:30:02 字数 576 浏览 4 评论 0原文

<ul class="list">
    <li><a href="">Text 1</a></li>
    <li><a href="">Text 2</a></li>
    <li><a href="" class="selected">Text 3</a></li>
</ul>

如何在不添加额外类的情况下选择 Text 2 的锚点? (并且没有 JavaScript)

<style type="text/css">
    ul.list li a.selected ******{background-color:#000}
</style>

输出:

<li><a href="" style="background-color:#000;">Text 2</a></li>
<ul class="list">
    <li><a href="">Text 1</a></li>
    <li><a href="">Text 2</a></li>
    <li><a href="" class="selected">Text 3</a></li>
</ul>

how do I select the anchor for Text 2 without adding an extra class? (and no javascript)

<style type="text/css">
    ul.list li a.selected ******{background-color:#000}
</style>

output:

<li><a href="" style="background-color:#000;">Text 2</a></li>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

痴情换悲伤 2024-10-03 09:30:02

如果没有 javascript,您的结果将无法在每个浏览器上始终有效。通过 sitepoint 检查此链接,

这是使用 CSS3 完成的方式,这 pesudo- Internet Explorer 目前不支持该类。

<style type="text/css">
ul.list li:nth-child(2) a { background:#000 }
</style>

Without javascript your results will not always work across each browser. Check this link by sitepoint

This is the way it would be done using CSS3, This pesudo-class is currently not supported in Internet Explorer.

<style type="text/css">
ul.list li:nth-child(2) a { background:#000 }
</style>
温柔戏命师 2024-10-03 09:30:02

第 n 个子选择器可以做到这一点。浏览器支持各不相同。

尝试:

ul.list li:nth-child(2) a {background:#000;参考

http://reference.sitepoint.com/css/pseudoclass-nthchild< /a>

the nth child selector can do this. browser support varies.

try:

ul.list li:nth-child(2) a { background:#000; }

Ref: http://reference.sitepoint.com/css/pseudoclass-nthchild

余生共白头 2024-10-03 09:30:02

您似乎正在寻找以前的同级选择器,但遗憾的是该选择器不存在。请参阅这篇文章,了解有关可能性的有用链接。

It seems like you're looking for a previous sibling selector, which unfortunately doesn't exist. See this post for useful links on what is possible.

荒人说梦 2024-10-03 09:30:02

我认为没有任何方法可以简单地选择 *th 子元素。 (firstChild 元素除外,它允许您指定第一个子元素。)但是,您也可以一致地将编号的 ID 分配给 li 元素,例如

<li id="1"><a href="">Text 1</a></li>
<li id="2"><a href="">Text 2</a></li>
<li id="3"><a href="">Text 3</a></li>

,然后您可以使用 id 属性中的值来指定 *th li 元素。所以你的CSS应该是

ul.list li[id="2"] a { background-color: #000; }

I don't think there's any way to simply select *th child element. (Except firstChild element, which let you specify the first child element.) But alternatively you can consistently assign numbered ID's to li element, for example

<li id="1"><a href="">Text 1</a></li>
<li id="2"><a href="">Text 2</a></li>
<li id="3"><a href="">Text 3</a></li>

Then you can use that to specify *th li element using the value in id attribute. So your css should be

ul.list li[id="2"] a { background-color: #000; }
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文