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

I have two sets of text that need to be inline with each other but at the moment one is placed higher than the other. The two sets of text share the same CSS code so when I edit it, both are affected. However, I would like to target only one of the text; Is there a way of doing this?

我有两组文本需要彼此内联,但目前一个文本放在另一个上面。这两组文本共享相同的CSS代码,因此当我编辑它时,两者都会受到影响。但是,我想只针对其中一个文本;有办法做到这一点吗?

Here is the HTML and 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>

The CSS code:

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;
}

3 个解决方案

#1

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

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

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

#2

you can use unique ID for each special element, then specify your CSS via '#' selector.

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

if the special CSS need to be applied to the first element, consider using the ':first-child' selector. its cleaner. but, if you want to target the second element (or later) consider that the 'nth-child' selector is not suported in older browser (like IE8)

如果需要将特殊CSS应用于第一个元素,请考虑使用':first-child'选择器。它更干净。但是,如果你想要定位第二个元素(或更晚),请考虑在旧版浏览器(如IE8)中不支持'nth-child'选择器

#3

Use this:

li:first-child h4
{
    your custum css
}

With this, the CSS rules only apply to the h4 tag of first li instead of all li.

有了这个,CSS规则只适用于第一个li而不是所有li的h4标签。

#1