html - 如何使用CSS的特异性？

Question

我有一些要对齐的框。我真的不能改变 html，所以我唯一的选择是 css。使用:

@media (min-width: 768px){.entry-content a {width: 32%;}} 

用于对齐 div，至少在除了高度之外的每个方面都是如此。然而，它会影响另一个页面上的其他框，这些框无论如何都是不同的格式。

所以我尝试了以下方法来指定和区分。

@media (min-width: 768px){.box-layout >.entry-content a {width: 32%;}}

和:

@media (min-width: 768px){.box-layout.entry-content a {width: 32%;}}

没用。

任何带有 .entry-content 的内容似乎都会影响其他 div，那么我该如何指定呢？基本上我想要这里的所有框:https://adsler.co.uk/find-an-event/ 相同的大小和高度，网格中有 3 x 3。

我也试图省略 。 entry-content 完全通过使用:

@media (min-width: 768px){.event-img {
max-height: 190px;
overflow: hidden;
 }}

我也试过:

#content .entry-summary img.wp-post-image, #content 
.entry-content img { 
height: 250px;
}

.box-layout { 
width: 100%
}

这使高度对齐但间距变窄，并且它使用 entry-content 所以弄乱了我在另一页上的其他框。

还在我的 header.php 中尝试过这个

<style>
@media (min-width: 768px) {
    .entry-content a {
        width: 32%;
    }
}
</style>

没有达到我想要的效果。

这是我最接近的一次。

<style>
@media (min-width:768px) {.entry-content 
.event_listings{ display:flex; flex-wrap:wrap; }} @media 
(min-width: 768px){.entry-content .event_listings 
.event_listing{ width:20%; padding:0 20px; }} @media 
(min-width: 768px) {.entry-content .event_listings 
.event_listing .box-layout{ width:100%; float:none; 
height:100%; }} @media (min-width: 768px){.entry-content 
.event_listings .event_listing .box-layout{ display:flex; flex- 
direction:column; }} @media (min-width: 768px){.entry. 
content .event_listings .event_listing .box-layout .event. 
title{ flex-grow: 1; }}
</style>

这在我的 header.php 中有效，但框是 5 x 5 和不同的六...

这是我的 html:

<div class="line-layout" style="display: none;">
    <li class="event_listing post-6985 type-event_listing status-expired hentry" style="visibility: visible;" data-latitude="" data- longitude="">
        <div class="event-info-row-listing">
            <a href="https://adsler.co.uk/event/new-cross-and-deptford-free-film-festival/">
                <div class="row">
                    <div class="col-md-1">
                        <div class="organizer-logo">
                            <img alt="Deptford Film Festival" src="https://adsler.co.uk/wp-content/uploads/event-manager-uploads/event_banner/2019/05/2456d41f16399aed538d25b1cd32ad14.jpg">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="event-title">
                            <h4>New Cross and Deptford Free Film Festival</h4>
                            <div class="boxes-view-listing-registered-code">
                        </div>
                        <div class="event-organizer-name">
                            <normal>Deptford Film Festival
                                <normal></normal>
                            </normal>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="date" <date>2019-05- 26</date>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="event-location">
                        <i class="glyphicon glyphicon-map-marker"></I> London 
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="event ticket">#free</div>
                </div>
                <div class="col-md-3"></div>
            </div>
        </a>
    </div>
</li>

<!-- Box Layout -->
<a class="event_listing post-6985 type-event_listing status-expired hentry" href="https://adsler.co.uk/event/new-cross-and-deptford-free-film-festival/">
    <div class="box-layout">
        <div class="event-img"><img alt="Deptford Film Festival" src="https://adsler.co.uk/wp-content/uploads/event-manager-uploads/event_banner/2019/05/2456d41f16399aed538d25b1cd32ad14.jpg">
        </div>
        <div class="boxes-view-box-registered-code"></div>
        <div class="event-title">
            New Cross and Deptford Free Film Festival
        </div>
        <div class="event-start-date">2019- 05-26</div>
        <div class="event-location">
            <i class="glyphicon glyphicon-map-marker"></i> London 
        </div>
        <div class="box-footer">
            <div class="event-ticket">#free</div>
        </div>
    </div>
</a>

Answer 1

您将 CSS 代码放在哪里？粘贴整个文件代码

无论如何，如果您没有尝试，请打开 <style>在您的 HTML 文件中添加标签并将 CSS 粘贴到那里。

<style>
    @media (min-width: 768px) {
        .entry-content a {
            width: 32%;
        }
    }
</style>

这应该只会影响粘贴它的页面。