0

我正在尝试设置导航栏标签的样式。我有两段代码可以工作，但我需要对各个选项卡进行更多控制，但不知道该怎么做。

这些选项卡位于标题下方和最右侧。而且我正在尝试仅将第一个选项卡的左下角舍入。下面的两个代码片段都围绕导航栏中每个选项卡的左下角。

我想找出正确的代码，让我可以控制每个选项卡并允许我单独设置每个选项卡的样式。下面的 2 个片段让我走到了一半，只是不确定哪个更好改进或添加什么。

.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;}

谢谢你的帮助

4

2 回答 2

0

因为我通常有一个生成 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 上

于 2011-01-18T13:36:25.173 回答
0

您可能在这里过度设计 - 您是否考虑过使用 CSS:first-child 伪类？做不到这一点，如何舍入左下角<ul>而不是第一个<li>？根据您的解释，这两种方法都可以在不编写任何 PHP 代码的情况下达到您想要的结果。

于 2011-01-18T16:35:40.917 回答