如何使字体与其他字体相同?

时间:2017-04-10 15:30:10

标签: css responsive-design navigation

我开始研究小项目并且很难设置没有类别的子菜单以具有相同的样式。见图像:

enter image description here

我试图修改CSS类:

span.menu-style

但似乎没有效果。问题是当某个类别为空时,其中一个元素都是正常的。如何使所有标题具有相同的风格(粗体和大写),不依赖于是否有某些类别?

要在实际网站上查看问题,请点击here

然后导航:所有部门> Apple配件并向下滚动到受影响的类别。感谢

4 个答案:

答案 0 :(得分:1)

编辑

.dropdown-menu > li:not(.dropdown-submenu) .menu-title { 
  font-size: 16px; 
  text-transform: uppercase; 
  font-weight: 700; 
}

答案 1 :(得分:1)

你可以做两件事。您可以定位作为列表元素a的子级的所有锚点li 拥有类.dropdown-submenu,或者您可以定位特定菜单通过添加到锚点a父列表项li的类的项目。

第一个选项,定位所有锚点。

您正在使用的WordPress主题是将.dropdown-submenu类添加到具有子菜单的所有列表项li,如果它没有,则省略它。 iPod&电视配件没有任何菜单项,所以它没有上课。因此,我们需要定位这些锚点并添加相同的样式,这些样式针对具有类a的父列表项li的锚点.dropdown-submenu。我们使用CSS pesudo class :not()执行此操作。但首先,这里是CSS选择器生成我们需要复制的样式:

.wrapper_vertical_menu .vertical-megamenu > li.revo-mega-menu > .dropdown-menu > li.dropdown-submenu > a {
    margin-bottom: 5px;
    padding: 0 0 10px;
    font-size: 16px;
    color: #222;
    text-transform: uppercase;
    font-weight: 700;
}

现在复制所有属性并将属性修改为以下内容:

.dropdown-menu > li:not( .dropdown-submenu ) > a {
    margin-bottom: 5px;
    padding: 0 0 10px;
    font-size: 16px;
    color: #222;
    text-transform: uppercase;
    font-weight: 700;
}

确保将此覆盖应用于主题CSS文件以外的其他位置,因为将来可能会在更新时覆盖它,并且您必须重做它。

第二个选项,通过自定义类定位特定菜单项。

菜单项 iPod&电视配件已将类.menu-ipod-tv-accessories应用于其列表项li

.dropdown-menu > li.menu-ipod-tv-accessories > a {
    margin-bottom: 5px;
    padding: 0 0 10px;
    font-size: 16px;
    color: #222;
    text-transform: uppercase;
    font-weight: 700;
}

然后,如果你有更多它可能看起来像这样:

.dropdown-menu > li.menu-ipod-tv-accessories > a,
.dropdown-menu > li.menu-universal-accessories > a,
.dropdown-menu > li.menu-apple-watch-accessories > a {
    margin-bottom: 5px;
    padding: 0 0 10px;
    font-size: 16px;
    color: #222;
    text-transform: uppercase;
    font-weight: 700;
}

答案 2 :(得分:0)

标题的样式:

.menu-title{
        font-size: 16px;
        color: #222;
        text-transform: uppercase;
        font-weight: 700;
        font-family: 'LoraItalic'; 
}

答案 3 :(得分:-1)

要将相同的样式应用于多个不同的类/元素,可以将所需的选择器添加到css文件中,即

li a, .class_of_your_choice, #id_of_your_choice, ... { /* css style that needs to be applied to every selector above */ }