php - 如何在 CSS 中单独定位此 HTML 代码？

Question

我有两组文本需要彼此内联，但目前其中一组的位置高于另一组。两组文本共享相同的 CSS 代码，所以当我编辑它时，两者都会受到影响。但是，我只想针对其中一个文本；有没有办法做到这一点？

这是HTML和CSS：

<div id="mi-slider" class="mi-slider">
<?

$result = $mysqli->query("SELECT * FROM stock");
while($obj = $result->fetch_object())
{
    if($obj->id&1)
    echo "<ul>";

?>
<li class="<?=$obj->orientation=='landscape'?'landscape':'portrait'?>" id="list">
    <a href="#"><img src="./img/<?=$obj->description=='unframed'?$obj->poster_no:$obj->poster_no.'_frame'?>.jpg" alt=""></a>
    <h4><?= $obj->description=="unframed"?"Unframed Poster - 750mm x 500mm":"Framed Poster - 790mm x 540mm"?><br />&pound;<?=$obj->price?> each</h4>
</li>

CSS 代码：

.mi-slider ul li h4 {
display: inline-block;
font-family: HelveticaNeueRegular;
font-weight: 100;
font-size: 12px;
color: #a34235;
padding: 0 0 0;
text-align: left;
margin-top: 20px;
margin-left: 10px;
float: left;
}

Answer 1

您可以为每个特殊元素使用唯一 ID，然后通过“#”选择器指定您的 CSS。

如果需要将特殊 CSS 应用于第一个元素，请考虑使用 ':first-child' 选择器。它的清洁剂。但是，如果您想定位第二个元素（或更高版本），请考虑旧版浏览器（如 IE8）不支持“nth-child”选择器

Answer 2

If you want to target the second list items H4, you can use the nth-child selector, as below:

.mi-slider ul li:nth-child(2) h4
{ your css }

Answer 3

用这个：

li:first-child h4
{
    your custum css
}

这样，CSS 规则仅适用于h4标签 firstli而不是 all li。