css - 关于在 css (Wordpress) 中设置导航栏选项卡样式的问题

Question

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

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

我想找到合适的代码来控制每个选项卡并允许我单独设置每个选项卡的样式。下面的 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;}

感谢您的帮助

Answer 1

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