我创建了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
列将在其周围拥有完整的边界。
我是否会将每个类重命名为唯一名称以实现此效果?
答案 0 :(得分:0)
你可以:first-child
选择器 - DEMO
#container .first div.column:first-child,
#container .middle div.column:first-child {
border-width: 1px 0;
color: #c00;
}