Question

我正在尝试设置导航栏标签的样式。我有两段代码可以使用，但是我需要对各个标签进行更多控制，而不确定如何操作。

这些标签位于标题下方和最右侧。而我正试图围绕第一个标签的左下角。下面的两个代码段都围绕导航栏中每个选项卡的左下角。

我想弄清楚能够控制每个标签的正确代码，并允许我单独设置每个标签的样式。下面的两个片段让我到了中途，只是不确定哪个更好或者要添加什么。

.custom .menu, .custom .menu a, .custom .menu li ul {
-moz-border-radius-bottomleft:.5em; font-weight:bold;
-webkit-border-bottom-left-radius:.5em; font-weight:bold;
-moz-border-radius-bottomright:.0em;
-webkit-border-bottom-right-radius:.0em;}

或者这个：

/* Remove the border from the far left. */
ul.menu{border-left:0;}

/* Add the left border back in. If you change the color of the nav border in the WordPress admin panel, you will also have to manually change the left border color below. */
ul.menu li.tab-1 a{
    border-left:1px solid #CCC;
    -moz-border-radius-topleft:.5em;
    -webkit-border-top-left-radius:.5em;}

/* This creates the rounded borders. */
ul.menu li.tab a{
    -moz-border-radius-bottomleft:.5em; font-weight:bold;
    -webkit-border-bottom-left-radius:.5em; font-weight:bold;
    -moz-border-radius-topright:.0em;
    -webkit-border-top-right-radius:.0em;}

感谢您的帮助

Answer 1

我会做什么，因为我通常有一个生成html的某种PHP脚本，是生成html时为每个标签赋予自己的风格。

// Assume $menu_tabs contains tab names
echo "<ul>"
foreach($menu_tabs as $tab) {
    $tabclass = tabclass($tab) // Just turn it into a valid css class name
    echo "<li class='tab $tabclass'>$tab</li>"
}
echo "</ul>"

或者那种效果。

然后你可以创建一个CSS样式

.tabclassname {
    // Special CSS goes here
}

或者，如果您没有以编程方式生成选项卡。您只需手动输入每个类的名称即可。

编辑：我主要建议使用PHP，因为你提到要控制所有选项卡。如果你只想要第一个标签，那么ul：first-child是一个很好的方法，或者像Gavin所建议的那样将舍入效果放在ul上

Answer 2

您可能在这里过度工程 - 您是否考虑过使用CSS :first-child pseudoclass？如果不这样做，如何围绕<ul>而不是第一个<li>左下角？根据您的解释，这些都可以实现您想要的结果而无需编写一行PHP。

关于在css（Wordpress）中设置样式导航栏选项卡的问题

2 个答案: