css - ul 中一般规则的异常(exception)

标签 css html-lists

我有一些 ul 的通用规则。然后我想创建一个不同的 ul,只是有一些不同。我只是给它一个id,但它似乎不起作用。我不明白为什么?

这是要检查的示例:http://jsfiddle.net/n8TVY/

HTML:

<ul class="language">
    <li><a href="#">Catal&agrave;</a></li>
    <li><a href="#">Fran&ccedil;ais</a></li>
</ul>

CSS:

/* GENERAL */
a { outline:0; text-decoration: none ; color:grey }

ul {
    margin:40px auto;
    list-style-type:none;
    padding:0;
    text-align: center;
}

ul li {
    position: relative;
    padding: 7px 17px; 
    margin-right: 10px;
    border:1px solid;
    border-color:grey;
    display: inline-block;
}
ul li a {
    display:block; 
}

/* LANGUAGE */
.language ul li {
    margin:0px;
    background-color:blue; 
    border:1px solid;
    border-bottom:0px; border-top:0px; 
    border-color:#ddd;
}

最佳答案

应该是ul.language 而不是.language ul

第一个表示 ul 类为 language,第二个是一个元素类为 language 包含一个 ul

http://jsfiddle.net/n8TVY/1/

关于css - ul 中一般规则的异常(exception),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16232639/

相关文章:

html - 如何在CSS中重叠两个div?

css - 用 <li> 显示包含 <img> 的文本

html - 如何消除无序列表中每个列表项之间的差距?

html - 当我使用 CSS 动态链接单击它时,如何使菜单被选中?

css - 隐藏除单个嵌套 div 之外的所有网页元素

css - 无法获得 div 背景颜色来填充视口(viewport)的整个宽度

javascript - 如何在 Javascript/css 中的嵌套 ul 中选择最低级别 ul

html - 无序水平列表在移动设备上切换为垂直列表

javascript - JS : from RGB Blue to RGB Red

css - 如何用 component.css (Angular) 覆盖 styles.css