我创建了 3 组不同的列,但我希望能够为每列设置不同的样式。
<div id="container">
<div class="first">
<div class="column">Featured Work</div>
<div class="column">info</div>
<div class="column">info</div>
</div>
<div class="middle">
<div class="column">News</div>
<div class="column">middle column</div>
<div class="column">right column</div>
</div>
<div class="footer">
<div class="column">body copy 1</div>
<div class="column">body copy 2</div>
<div class="column">body copy 3</div>
</div>
这是我当前的代码:http://jsfiddle.net/TroyAlford/Cj6dj/2/
我想为 featured work
和 news
列设置顶部和底部边框的样式,并设置字体的样式。两个 Info
列以及 middle
和 Right
列将有完整的边框。
我是否可以将每个类重命名为一个唯一的名称来实现这种效果?
最佳答案
你可以使用 :first-child
选择器 - DEMO
#container .first div.column:first-child,
#container .middle div.column:first-child {
border-width: 1px 0;
color: #c00;
}
关于html - 我可以为列创建特定规则吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13665336/