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

Question

我的导航栏中有一个使用li的列表。我在背景上设置了一个border-radius，这样它就会被舍入。现在我只需要删除home元素的border-left。以下是代码片段：

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;

示例:: FIDDLE

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