我在选择以下html标记的第一个和最后一个div时遇到问题:
<div class="layout__side"> <div class="portlet-dropzone"> <div id="id1"> <span></span> <div class="portlet-body"> <div class="portlet-borderless-container"> <div class="portlet-body"> <article id="id2"> <div class="inner"> <header>yoyoyoyoyoyoy</header> </div> </article> </div> </div> </div> </div><!--end id1 div--> <div id="id3"> <span></span> <div class="portlet-body"> <div class="portlet-borderless-container"> <div class="portlet-body"> <article id="id4"> <div class="inner"> <header>yoyoyoyoyoyoy</header> </div> </article> </div> </div> </div> </div><!--end id3 div--> <div id="id5"> <span></span> <div class="portlet-body"> <div class="portlet-borderless-container"> <div class="portlet-body"> <article id="id6"> <div class="inner"> <header>yoyoyoyoyoyoy</header> </div> </article> </div> </div> </div> </div><!--end id5 div--> <div id="id7"> <span></span> <div class="portlet-body"> <div class="portlet-borderless-container"> <div class="portlet-body"> <article id="id8"> <div class="inner"> <header>yoyoyoyoyoyoy</header> </div> </article> </div> </div> </div> </div><!--end id7 div--> <div id="id9"> <span></span> <div class="portlet-body"> <div class="portlet-borderless-container"> <div class="portlet-body"> <article id="id10"> <div class="inner"> <header>yoyoyoyoyoyoy</header> </div> </article> </div> </div> </div> </div><!--end id9 div--> <div id="id11"> <span></span> <div class="portlet-body"> <div class="portlet-borderless-container"> <div class="portlet-body"> <article id="id12"> <div class="inner"> <header>yoyoyoyoyoyoy</header> </div> </article> </div> </div> </div> </div><!--end id11 div--> </div><!--end portlet-dropzone--> </div><!--end layout__side-->
我试图只选择和样式id1 div标头,而不使用div id明确选择它.我尝试使用div:first-child选择器,但所有的div都被选中了!这就是我尝试过的,以及使用nth-child(1)
.layout__side .portlet-dropzone div:first-child header{ padding: 10px; border: 1px solid red; }
解决方法
问题是你选择了第一个孩子的所有div后代元素.
换句话说,选择了后代div元素.portlet-borderless-container,.portlet-body和.inner(因为它们是.portlet-dropzone的后代,它们是相对于其父元素的第一个子元素).由于选择了所有div元素,因此选择和设置每个标题元素.
您需要选择直接子div元素(使用direct child combinator,>
).这样做时,如果它是第一个子节点,则只选择作为.portlet-dropzone的直接子节点的div元素.
.layout__side .portlet-dropzone > div:first-child header { padding: 10px; border: 1px solid red; }
.layout__side .portlet-dropzone > div:first-child header,.layout__side .portlet-dropzone > div:last-child header { padding: 10px; border: 1px solid red; }
值得指出的是,:first-of-type
和:last-of-type
伪类将按类型选择第一个/最后一个元素(不像:first-child /:last-child,它将仅根据索引而不是类型进行选择).
.layout__side .portlet-dropzone > div:first-of-type header,.layout__side .portlet-dropzone > div:last-of-type header { padding: 10px; border: 1px solid red; }
如果存在不同类型的元素并且您只想定位div元素,这可能很有用.例如,如果在第一个div之前有一个随机的h1元素,就像上面的例子一样,仍然会选择第一个div.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。