Question

有人为我编写了此CSS代码，并将其应用于我网站上的某个网页。它工作正常。但是，我想将其应用于另一个页面，如下所示。我需要在显示ltlitems的同时应用此CSS。我猜测它是否将它应用于周围的div？抱歉，我只是在学习。我不确定这部分的工作方式。.h1:first-child + p + div > div:first-child

<div class="pageContent">

    <asp:Label ID="lblMsg" runat="server" Text="" Visible="false"></asp:Label>
    <h1>Welcome</h1>
    <p>Bla Bla Bla</p>

    <iframe width="90%" height="315" src="https://www.youtube.com/embed/v10" frameborder="0" allowfullscreen></iframe>
    <h2>How To Sell</h2>
    <p>Selling couldn't be easier..</p>
    <asp:Image ID="HowToSell" alt="How To Sell" runat="server" class="screenfit" ImageUrl="~/files/images/howTo.png" />
    <h2>Featured Boxes</h2>

    <p>Below are some of our featured items</p>

    <div style="margin:auto; text-align:center;">
        <asp:Literal ID="ltlItems" runat="server"> </asp:Literal>
    </div>
</div>


.pageContent > h1:first-child + p + div > div:first-child {
   display: -webkit-box; 
   display: -webkit-flex; 
   display: -moz-box; 
   display: -ms-flexbox; 
   display: flex; 
   -webkit-flex-wrap: wrap; 
   -ms-flex-wrap: wrap; 
   flex-wrap: wrap; 
   -webkit-box-pack: center; 
   -webkit-justify-content: center; 
   -moz-box-pack: center; 
   -ms-flex-pack: center; 
   justify-content: center; 
}

Answer 1

h1:first-child + p + div > div:first-child

找到第一个<h1>标签。。

在其正下方带有<p>标签

紧随其后的<div>

在该div中，应该有一个或多个div

但是仅选择第一个div并在此处应用样式

first-child的意思是：仅第一个适用

+的意思是：同一级别的下一个元素（不在内部/下方）

>的意思是：内部/内部

但是，看看问题上的CSS代码，如果它是如何在您的网站上编写的，就会出现一个明显的问题。

CSS包含在这样的页面上时，应位于<style>标记之间，因此：

<style>
.pageContent > h1:first-child + p + div > div:first-child {
   display: -webkit-box; 
   display: -webkit-flex; 
   display: -moz-box; 
   display: -ms-flexbox; 
   display: flex; 
   -webkit-flex-wrap: wrap; 
   -ms-flex-wrap: wrap; 
   flex-wrap: wrap; 
   -webkit-box-pack: center; 
   -webkit-justify-content: center; 
   -moz-box-pack: center; 
   -ms-flex-pack: center; 
   justify-content: center; 
}
</style>

此外，可能不再需要-webkit，-ms，-moz前缀。在更新不同的浏览器以包含新功能的同时，仅需要几年的时间。因此，例如：

   -webkit-box-pack: center; 
   -webkit-justify-content: center; 
   -moz-box-pack: center; 
   -ms-flex-pack: center; 
   justify-content: center;

可以被替换为：

   justify-content: center;

实际上，整个事情可能可以简化为：

<style>
.pageContent > h1:first-child + p + div > div:first-child {
   display: flex; 
   flex-wrap: wrap; 
   justify-content: center; 
}
</style>

使用子级/父级技术应用CSS

1 个答案: