1

我有一个 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 )) 它应该可以工作，但不幸的是我没能做到。

也许稍后我还会有一个问题，但是对于时间我想了解代码并更正我的信息。

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

加里布

编辑：我想同时使用内联块和块，这是我的完整代码：

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>
4

2 回答 2

2

上面的选择器将针对所有a嵌套在其下的元素li进一步嵌套在下面ul，这是一个通用的元素选择器，它将针对所有a属于该模式的元素。最好是具体的并使用 aclass代替，例如

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

上面的选择器将只定位a嵌套在其下的元素，li这些元素进一步嵌套在ul具有class被调用的元素下.class_name

正如您评论的那样，您现在似乎想要定位一个ul元素，而不是使用类似的东西

ul {
   /* Styles goes here */
}

将样式应用于所有ul元素，相反，具体而言，将 a 分配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 */
}
于 2013-10-24T11:53:35.923 回答
1

您在<a>此处定位元素。uland的原因li是，您的目标是a. 也就是说，您的目标是 a ，它是<a>that 的后代，<li>而它又是 a 的后代<ul>。

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

ul { display: inline-block; }
于 2013-10-24T11:51:25.693 回答