css - CSS apply border to if it has an tag inside

Answer 1

如果您无法编辑 HTML，那么纯粹使用 CSS 是不可能的。它涉及到下级联，到a，然后备份到样式li，这是 CSS 不能做的（还）。您需要使用 javascript/jquery 来获得“上升”功能。

或者，制作a100% 的宽度和高度li，然后将边框应用于a

Answer 2

尝试这样的事情：

li > a {
    border: 1px solid red;
    display: block;
    height: 100%;
    width: 100%;
}

演示：

更新： CSS 选择器从右到左进行评估。所以，当浏览器在寻找li它时，它不会看它的孩子，而是看它的父母。为什么我们没有父选择器。

Answer 3

在它自己/您自己的 CSS 类中：

.hasLink{
    border-radius: 3px;
}

引用你的 html 上的类（假设我们称之为 main.css）：

<link href="/Content/styles/main.css" rel="stylesheet" type="text/css" />

然后每当你有一个<li>with <a>：

<li class="hasLink">

  <a href="http://google.pt">Google</a>

</li>

这有帮助吗？我不确定你是否想要比这更聪明的东西...

Answer 4

你可以使用这个：

.someClass{ border: 1px solid #anycolor;}

还有你的 html

<li class="someClass">
   <a href="#">Something</a>
</li>

<li>
   <h3>other</h3>
</li>