Question

我有一个CSS文件，我在一个网站上找到它，但我对此感到困惑。代码是：

ul li a {
background-color: FFFFFF;
border: 1px solid 86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
direction:rtl;
}

那么，我在这里造型的是什么？据我所知，它应该是（（a））标签，所以如果我添加

display:inline-block;

到（（ul））标签样式我在这里找到（（UL display: block））它应该有用，但不幸的是我没能成功。

也许我稍后会再提出一个问题，但是为了时间安排，我想了解代码并更正我的信息。

提前致以最诚挚的问候和谢意，

加里卜

编辑：我想同时使用inline-block和block，这是我的完整代码：

ul.ablock {
display: block;
}
ul.aninline {
display: inline-block;
float: right;
width: 50%;
}
a {
background-color: FFFFFF;
border: 1px solid 86B3E6;
color: 2F62AC;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
direction:rtl;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
a:active, a:hover {
background-color:2F62AC;
color:FFFFFF;
}

和html类似：

<ul class="ablock">
<li><a href="#" onclick="mSearch($('#SearchText').val());"><div align="center">Find</div></a></li>
</ul>
<ul class="aninline">
<li><a href="#"><div align="center">Back</div></a></li>
<li><a href="#"><div align="center">Next</div></a></li>
</ul>

Answer 1

上面的选择器将定位嵌套在a下的所有li元素，这些元素进一步嵌套在ul下，这是一个通用元素选择器，它将定位所有a落入该模式的元素。最好具体一点，而不是使用class，比如

ul.class_name li a {
   /* Styles goes here */
}

上述选择器仅定位嵌套在a下的li元素，这些元素进一步嵌套在ul元素下，class称为.class_name < / p>

正如您所评论的那样，您似乎想要定位ul元素，而不是使用类似

的内容

ul {
   /* Styles goes here */
}

将样式应用于所有ul元素，而不是具体，将class分配给ul元素并使用选择器

ul.class_name {
   /* Styles goes here */
}

或者您也可以使用嵌套选择器，如

div.wrapper_div ul {
   /* Styles goes here */
}

此处，在上面的选择器中，我们选择嵌套在ul下的所有.wrapper_div。

只是旁注，你好像很困惑，所以不要混淆你更多，所以不要读这个，你可以简单地忽略，但如果你想学习，只要确保，如果你是目标ul，请确保使用>选择器选择直接子项，因为用户倾向于在ul下嵌套li元素，例如下拉菜单，这是常见的，所以最好使用像

这样的选择器

div.class_name > ul { /* Selects first level ul elements */
   /* Styles goes here */
}

ul > li > ul { /* Selects nested level ul elements */
   /* Styles goes here */
}

Answer 2

您在此处定位<a>元素。 ul和li的原因是，您定位的是a的特定嵌套。也就是说，您定位的<a>是<li>的后代，而后者又是<ul>的后代。

如果您要向所有dispay: inline-block个元素添加<ul>，请在您要添加的ul li a规则上方添加：

ul { display: inline-block; }

我在这里造型（ul，li或a）

2 个答案: