html - 如何限制单个元素的边框？

Question

我有一个使用 li 作为导航栏的列表。我在我的背景上设置了一个边界半径，以便它是圆形的。现在我只需要删除border-lefthome 元素的。以下是代码片段：

HTML：

<li class="home">
    <a href="<?php echo url('/'); ?>">home</a>
</li>

CSS：

li.home {
    border-left:0px;
}

我希望这是足够的上下文来帮助回答我的问题。如果不是，请告诉我。

Answer 1

试试 li.home { border-left:0px !important; }

Answer 2

如果您不想要左边框，请不要提及它..即不要写border:1px solid;或boder-left:1px;..仅提及您需要的边框喜欢border-right或border-top使用圆角边缘border-top-right-radius:10px;

示例 ::小提琴

Answer 3

如果你想要看起来像这样的东西：*（为清楚起见添加了颜色）

使用这个CSS

li.home {
    background-color: red;
    border: 2px solid green;

    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-border-left: 0px;
       -moz-border-left: 0px;
            border-left: 0px;
}

如果在定义边框颜色时将此 css 放在任何 css 之后，则不需要使用!important 。

jsFiddle