Question

我刚刚开始学习CSS。我假设一个类是一种分组样式信息的方法。

我试图理解CSS分页。在示例中，它是写的

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li { display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

pagination是一个班级。当他们写ul.pagination li时，它是什么意思 ul.pagination li a？

ul.pagination li a具有float left;样式。这将实现什么目标？

Answer 1

在HTML文档中包含以下代码块时：

<ul class="pagination">
    <li>
        <a href="#"></a>
    </li>
    <li>
        <a href="#"></a>
    </li>
    <li>
        <a href="#"></a>
    </li>
</ul>

你想要这个列表的样式，列出项目和链接。

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

上面的CSS块会影响您的列表（<ul></ul>）。

ul.pagination li { 
   display: inline;
}

这个会影响列表中的每个列表项（<li></li>）。

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

，最后一个会影响列表项中的每个链接（<a></a>）。

float: left用于拥有水平列表（例如菜单）。您可以从以下链接中了解详情：http://www.w3schools.com/cssref/pr_class_float.asp

最后，我还建议您阅读CSS选择器以了解逻辑：http://www.w3schools.com/cssref/css_selectors.asp

Answer 2

我建议您阅读CSS选择器的权威来源：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

注意术语＆＃34;选择器＆＃34;是指规则的选择器（{之前的所有内容），也指选择器的各个组件，因此h1.foo p.bar是一个选择器，只有h1.foo和{{ 1}}，例如）。

直接回答您的问题：

撰写p.bar和ul.pagination li后，这是什么意思？

当两个选择器之间出现空格字符时（例如，在ul.pagination li a和ul.pagination之间，它表示＆＃34; descendant＆＃34;，所以任何显示在li下方的<li>元素将被匹配，无论它有多深（与<ul class="pagination">选择器相对，如>中仅选择{ul.pagination > li 1}} <li>的直系子元素。

CSS规则仅匹配并应用于规则中最深的元素，因此<ul class="pagination">仅将样式规则应用于ul li，但<li>仅将样式规则应用于{{ 1}}元素。

ul li a具有<a>样式。这将实现什么目标？

这意味着每个ul.pagination li a元素是float left;的后代，而<a>的后代又是<li>的后代，它将应用属性<ul class="pagination">

理解css中的类

2 个答案: