【发布时间】：2021-03-06 15:06:09
【问题描述】：
我正在努力寻找/整合我在网上找到的任何解决方案，以帮助为每个 div 生成一个独特的类。例如，如果将 div 称为“gallery-div”并将 1 添加到每个 div 上，例如 gallery-div1、gallery-div2、gallery-div3 等，那就没问题了。
这是我目前拥有的（还没有设置独特的类）：
.headstone-category-container {
max-width: 100%;
margin: 0 auto;
} /* Sets headstone category divs to take up 100% of the available width within its container */
.grid-row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
} /* Sets the way the headstone category divs are displayed (horizontally)
and allows for them to wrap round each other when screen adjusting */
.grid-item2 {
height: 100%;
flex-basis: 20%;
-ms-flex: auto;
width: 100%;
position: relative;
padding: 0.75%;
box-sizing: border-box;
} /* Sets padding between headstone category divs, sets sizing and sets for row to be 5 divs */
.grid-item3 {
height: 100%;
flex-basis: 20%;
-ms-flex: auto;
width: 100%;
position: relative;
padding: 0.75%;
box-sizing: border-box;
} /* Sets padding between headstone category divs, sets sizing and sets for row to be 5 divs */
.wrapping-link {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 2;
color: currentColor;
} /* Allows the user to be able to click anywhere within the headstone category div to access the href link */
.grid-item-wrapper {
padding: 4px;
-webkit-box-sizing: initial;
-moz-box-sizing: initial;
box-sizing: initial;
background-image: linear-gradient(to right, rgb(223, 219, 219) , rgb(252, 252, 250));
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
-webkit-transition: padding 0.15s cubic-bezier(0.4,0,0.9,1), margin 0.15s cubic-bezier(0.4,0,0.9,1), box-shadow 0.15s cubic-bezier(0.4,0,0.9,1);
transition: padding 0.15s cubic-bezier(0.4,0,0.9,1), margin 0.15s cubic-bezier(0.4,0,0.9,1), box-shadow 0.15s cubic-bezier(0.4,0,0.9,1);
position: relative;
border-radius: 12px;
border: 1px solid black;
} /* Adds styling, sets sizing and sets transition speed of the headstone category div */
.grid-item-container {
height: 100%;
width: 100%;
position: relative;
background-image: linear-gradient(
to right,
rgb(223, 219, 219),
rgb(252, 252, 250)
);
cursor: pointer;
} /* Allows content to use full width and height of the headstone category div. Also styles the div. */
.grid-item-container2 {
height: 100%;
width: 100%;
position: relative;
} /* Allows content to use full width and height of the headstone category div. Also styles the div. */
.grid-image-top2 {
min-height: 375px;
max-height: 575px;
max-width: 100%;
background-size: contain;
background-repeat: no-repeat;
position: relative;
background-position: 50% 50%;
border-radius: 12px;
margin: 5%;
mix-blend-mode: multiply;
cursor: pointer;
} /* Sets sizing and positioning of the images within the headstone category divs.
This also removes the white background of each image (mix-blend-mode: multiply;) */
.grid-image-top2.lawn-memorials {
background-image: url("https://www.kayparkmemorials.com/memorials/heartmemorials/images/heart2.jpg");
} /* Adds image to headstone category div for the lawn memorials */
.grid-image-top2.lawn-memorials2 {
background-image: url("https://www.kayparkmemorials.com/memorials/heartmemorials/images/heart2.jpg");
} /* I WANT TO BE ABLE TO DISPLAY THE DIFFERENT IMAGES LIKE THIS */
.grid-image-top2.lawn-memorials3 {
background-image: url("https://www.kayparkmemorials.com/memorials/heartmemorials/images/heart2.jpg");
} /* I WANT TO BE ABLE TO DISPLAY THE DIFFERENT IMAGES LIKE THIS */
.headstone-desc-box {
padding: 5px;
text-align: center;
border-radius: 12px;
background-color: linear-gradient(to right, rgb(223, 219, 219) , rgb(252, 252, 250));
}
.grid-item3:hover .grid-item-wrapper {
padding: 1.5% 1.5%;
margin: -1.5% -1.5%;
background-color: linear-gradient(to right, rgb(223, 219, 219) , rgb(252, 252, 250));
} /* Adds the padding for when users hover over the headstone category div.
Also adds gradient to the small extra space added within the padding */
.grid-item-content {
padding: 0 20px 20px 20px;
} /* Adds padding to the text within the headstone category divs */<!-- Portfolio Gallery Grid transform: scaleX(-1);-->
<div class="row">
<div class="grid-row"> <!-- Start of div -->
<div class="grid-item3 show"> <!-- Start of div -->
<a class="wrapping-link" href="#"></a> <!-- Takes user to the designated link when user's click on the headstone category div -->
<div class="grid-item-wrapper"> <!-- Start of div -->
<div class="grid-item-container2 column lawn"> <!-- Start of div -->
<div class="grid-image-top2 lawn-memorials content"> <!-- Start of div -->
</div> <!-- End of div -->
</div> <!-- End of div -->
<div class="headstone-desc-box">
<p><strong>TXC10 (LM)</strong><br><br>A gracefully sculpted Angel with prominent polished granite wings shown in Lavender Blue and Blue Pearl.</p>
</div>
</div> <!-- End of div -->
</div> <!-- End of div -->
<div class="grid-item3 show"> <!-- Start of div -->
<a class="wrapping-link" href="#"></a> <!-- Takes user to the designated link when user's click on the headstone category div -->
<div class="grid-item-wrapper"> <!-- Start of div -->
<div class="grid-item-container2 column lawn"> <!-- Start of div -->
<div class="grid-image-top2 lawn-memorials content"> <!-- Start of div -->
</div> <!-- End of div -->
</div> <!-- End of div -->
<div class="headstone-desc-box">
<p><strong>TXC10 (LM)</strong><br><br>A gracefully sculpted Angel with prominent polished granite wings shown in Lavender Blue and Blue Pearl.</p>
</div>
</div> <!-- End of div -->
</div> <!-- End of div -->
<div class="grid-item3 show"> <!-- Start of div -->
<a class="wrapping-link" href="#"></a> <!-- Takes user to the designated link when user's click on the headstone category div -->
<div class="grid-item-wrapper"> <!-- Start of div -->
<div class="grid-item-container2 column lawn"> <!-- Start of div -->
<div class="grid-image-top2 lawn-memorials content"> <!-- Start of div -->
</div> <!-- End of div -->
</div> <!-- End of div -->
<div class="headstone-desc-box">
<p><strong>TXC10 (LM)</strong><br><br>A gracefully sculpted Angel with prominent polished granite wings shown in Lavender Blue and Blue Pearl.</p>
</div>
</div> <!-- End of div -->
</div> <!-- End of div -->
</div> <!-- End of grid-row div-->
</div> <!-- End of row div -->我不只是更改当前 div 类的原因是因为我将 div 放在一个单独的文件中，该文件会被反复使用，如下所示：
<?php
include 'grid-items/top-lawn.php';
?> <!-- This sets alls the divs for the grid items -->
<p><strong>TXC10 (LM)</strong><br><br>A gracefully sculpted Angel with prominent polished granite wings shown in Lavender Blue and Blue Pearl.</p>
<?php
include 'grid-items/bottom-lawn.php';
?> <!-- This sets alls the divs for the grid items -->
【问题讨论】：