Question

两天前我刚开始使用HTML / CSS ..请放轻松我。我正在建立一个网站。出于某种原因，我无法使用CSS获取HTML类/ id。为了使它工作，我必须为每个列表创建一个类。我如何使它成为整体的类？（当我取出<li class="name_here>时，所有样式都不再起作用了）

HTML

<div>
    <ul class="navi">
        <li class="navi"><a href="http://www.bestfoodservice.us/product"><img src="../images/bestfoodservicesweb_07.jpg" width="104" height="67" /></a>
            <a href="http://www.bestfoodservice.us/company"><img src="../images/bestfoodservicesweb_09.jpg" width="105" height="67" /></a>
            <a href="http://www.bestfoodservice.us/facility"><img src="../images/bestfoodservicesweb_11.jpg" width="110" height="67" /></a>
            <a href="http://www.bestfoodservice.us/careers"><img src="../images/bestfoodservicesweb_13.jpg" width="105" height="66" /></a></li>
    </ul>
</div>

<div>
    <div>
        <ul class="lastbit">
            <li><img src="../images/bestfoodservicesweb_34.jpg" width="85" height="29"/></li>
            <li><a href="#"><img src="../images/bestfoodservicesweb_37.jpg" width="62" height="16" /></a></li>
            <li><a href="#"><img src="../images/bestfoodservicesweb_38.jpg" width="69" height="16" /></a></li>
            <li><a href="#"><img src="../images/bestfoodservicesweb_39.jpg" width="100" height="16" /></a></li>
        </ul>
        <ul class="lang">
            <li class="lang"><a href="#"><img src="../images/bestfoodservicesweb_41.jpg" width="29" height="14" /></a></li>
            <li class="lang"><a href="#"><img src="../images/bestfoodservicesweb_43.jpg" width="39" height="17" /></a></li>
        </ul>
        <ul class="social">
            <li class="social"><a href="http://facebook.com"><img src="../images/bestfoodservicesweb_27.jpg" width="30" height="29" /></a></li>
            <li class="social"><a href="http://twitter.com"><img src="../images/bestfoodservicesweb_29.jpg" width="30" height="29" /></a></li>
            <li class="social"><a href="http://linkedin.com"><img src="../images/bestfoodservicesweb_31.jpg" width="30" height="29" /></a></li>
        </ul>
    </div>
</div>

CSS

.navi {
    list-style: none;
    display: inline;
    margin-left: 5px;
    position: relative;
    top: 5px;
}
.lastbit {
    list-style: none;
    display: inline-block;
}
.lang {
    list-style: none;
    display: inline;
}
.social {
    list-style: none;
    display: inline;
}

Answer 1

不完全确定你要做什么，但你可能会尝试这样的事情。

.lastbit li {
    list-style: none;
    display: inline-block;
}

您的标记可以是：

<ul class="lastbit">
  <li></li>
  ...
</ul>

这会将样式应用于您使用该样式标记的ul的所有li元素。

Answer 2

您应该阅读有关CSS中选择器的更多信息。简而言之，你在做什么：

.social {
    list-style: none;
    display: inline;
}

表示类social的所有内容都会应用给定的样式。

当您在每个li元素上拥有该类时，它会根据您的需要应用。但是，当您将该课程放在ul时，它会将样式应用于ul而不是li。要解决此问题，您需要通过稍微更改选择器来指定您想要li上的样式：

.social li {
    list-style: none;
    display: inline;
}

上面说过，所有具有类social的项目的后代的li元素应该具有您想要的样式。

Answer 3

要设置所有列表的样式，请使用：

ul{
    /* styles here */
}

要设置列表中的所有项目的样式，请使用

li{
    /* styles here */
}

要设置列表中所有项目中的所有锚点的样式，请使用

li a{
    /* styles here */
}

此外，您知道，您的第一个ul的班级名称为“navi”，列表中的项目也是如此。它也只有一个<li>，虽然你可能想要4个（因为你有4个链接）。

UL班不工作？只有李有效吗？

3 个答案: