html - 选择第一个 DIV 以删除其双边框

标签 html css

您好,我正在尝试找到一种方法来跳过 (div class="MyList") 类中动态生成的第一个元素 (div class="Title")。我试过 :first-child:first-of-type 但没有成功。基本上,我试图删除第一个 Title 元素的双边框。非常感谢您的帮助!

HTML

<div class="MyList">   
   <div class="Title">
      <h3></h3> 
   </div>
   <div class="List"></div>
   <div class="List"></div>
   <div class="List"></div>
   <div class="List"></div>
   <div class="Title">
      <h3></h3> 
   </div>
   <div class="List"></div>
   <div class="List"></div>
</div>

CSS

.MyList > :first-child{
   border-top:none;
}

.Title {
    text-align: center; 
    border-left-width:15px; 
    border-bottom-width:5px;
    border-top: 3px solid black;
    padding-top: 1px;
}

.Title:before {
    content: '';
    border-top: 1px solid black;
    display: block;
    width: 100%;
}
.Title  h3 { padding: 20px;}

最佳答案

看看这个 fiddle :http://jsfiddle.net/j2QLY/

您还需要覆盖应用于 Title 元素的 :before 代码:

.MyList > :first-child {
   border-top:none;
}

.MyList > :first-child:before {
    border-top: none;
}

关于html - 选择第一个 DIV 以删除其双边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25144961/

相关文章:

Python:将 ANSI 颜色代码转换为 HTML

html - 为什么 flex 元素不缩小过去的内容大小?

javascript - 上传和删除图像

javascript - 使多个 contenteditables 表现得像一个文档

javascript - 如何动态替换元素中的文本?

html - 如何在 CSS 中实现标签的 float

html - Bootstrap Affix 不起作用

CSS 显示内联 block 和 z-index

html - css flexbox布局模块中的表格设计

jQuery 列表独占函数