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，然后通过＆＃39;＃＆＃39;指定您的CSS选择器。

如果需要将特殊CSS应用于第一个元素，考虑使用＆＃39;：first-child＆＃39;选择。它更干净。但是，如果你想要定位第二个元素（或更晚一些），请考虑第二个元素＆＃39;选择器不支持旧版浏览器（如IE8）

Answer 2

如果要定位第二个列表项H4，可以使用第n个子选择器，如下所示：

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

Answer 3

使用此：

li:first-child h4
{
    your custum css
}

这样，CSS规则仅适用于第一个h4的{{1}}标记，而不是全部li。

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

3 个答案: