Question

我目前正在使用带有主题的Wordpress。

我正在尝试修改徽标的移动视图，但是当您开始向下滚动页面时，导航栏的尺寸会减小甚至更多，而且我在进行其他更改时遇到问题。在那个州。

<header id="site-header" class="" role="banner">
        <div id="header-wrapper">
            <div id="header-container" class="clearfix">
                <div id="site-logo">

当导航栏缩小到较小尺寸时，第一行变为

<header id="site-header" class="header-sticked" role="banner">

只有在＆＃39; header-sticked＆＃39; 存在时，是否可以修改网站标题？我知道我可以编辑主题，为网站徽标添加一个类，但我很想知道这是否只有CSS才有可能。

例如（psuedo）类似

.header-sticked#header-wrapper#header-container#site-logo {
//blah
}

Answer 1

我很确定你正在寻找

#site-header.header-sticked #site-logo {
  // blah
}

因此，只有当徽标嵌套在网站标题中类.header-sticked

时，才会对徽标进行样式设置

Answer 2

您的问题不是很清楚，但如果您想要解决一个既有site-header又有header-sticked的元素，那么

#site-header.header-sticked {
  /* blah */
}

会做的。

但是，如果您要在其中处理ID site-logo，则需要此

#site-header.header-sticked #site-logo {
  /* blah */
}

请注意#site-logo之前的空格，以及您不需要任何中间ID的事实。

Answer 3

我不确定我理解你的问题，但如果你有： <header id="site-header" class="header-sticked" role="banner">

然后以下css将应用于元素

#site-header.header-sticked{
width: 100px;
height: 100px;
background: black;
}

在几个子元素中选择一个id

3 个答案: