我已经为2021构建了一个媒体查询，使移动菜单出现在宽度高达1023px的屏幕上。（下面是我的CSS供感兴趣的人使用，我认为它应该是非常通用的。）
由于主页的设计，我不得不从该查询中排除主页。我怎么能做这样的事？
@media only screen and (max-width: 1023px) and (not(.primary-navigation-home)) {
主页已经为主导航进行了自定义，可以通过类轻松识别
<nav class="primary-navigation-home"> 而不是
.primary-navigation 对于所有其他页面。
我相信这是覆盖标准TT1 mobile所需的最低css；汉堡包“；菜单断点。（欢迎评论）
/* ================== STYLE ADJUSTMENTS -- UP TO 1024PX ================== */
/* ----- HAMBURGER on sizes up to 1023px ----- */
@media only screen and (max-width: 1023px) {
.site-header {
padding-top: calc(0.75 * var(--global--spacing-vertical)) !important;
padding-bottom: calc(0.75 * var(--global--spacing-vertical)) !important;
}
.primary-navigation {
position: absolute;
}
.primary-navigation-open .primary-navigation > .primary-menu-container {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
border: 2px solid transparent;
}
.primary-navigation > div > .menu-wrapper {
padding-bottom: 100px;
padding-left: 0;
}
.primary-navigation-open .primary-navigation {
width: 100%;
position: fixed;
z-index: 2;
}
.menu-button-container {
display: block;
}
.primary-navigation > .primary-menu-container {
height: 100vh;
z-index: 499;
overflow-x: hidden;
overflow-y: auto;
border: 2px solid transparent;
visibility: hidden;
opacity: 0;
position: fixed;
padding-top: 71px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 25px;
transition: all 0.15s ease-in-out;
transform: translateX(0) translateY(0);
background-color: var(--global--color-background);
}
.primary-navigation > div > .menu-wrapper li {
display: block;
position: relative;
width: 100%;
}
.primary-navigation > div > .menu-wrapper .sub-menu-toggle {
display: none;
}
body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu {
padding-left: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px);
padding-right: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px);
margin-right: calc(0px - var(--global--spacing-horizontal) * 0.6);
}
.has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
position: fixed;
transform: translateY(0) translateX(100%);
}
body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container {
position: relative;
padding-top: 0;
margin-top: calc(0px - var(--button--padding-vertical)) + 0.25 * var(--global--spacing-unit);
}
body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .primary-navigation {
position: relative;
top: 0;
}
.primary-navigation-open .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
transform: translateX(0) translateY(0);
}
.primary-navigation-open .menu-button-container {
width: auto;
}
.admin-bar .primary-navigation {
top:32px;
}
/* To get submenus to display properly */
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
margin: var(--primary-nav--padding);
position: relative !important;
top: auto;
padding-top: unset;
}
.primary-navigation .primary-menu-container > ul > .menu-item {
display: block;
}
.menu-wrapper > li > .sub-menu::before, .primary-navigation > div > .menu-wrapper > li > .sub-menu::after {
content: none !important;
}
.primary-navigation > .primary-menu-container ul > li .sub-menu-toggle ~ ul {
display: block !important;
}
/* TEC listing page has huge space at top, even for mobile */
.tribe-events .tribe-events-l-container {
padding-top: 0px;
}
}
/* ----- /HAMBURGER up to width 1023px ----- */
最合适的回答,由SO网友:Jacob Peattie 整理而成
媒体查询没有这样的问题。您需要在CSS选择器中包含排除项，如下所示：
body:not(.home) .site-header {
// etc.
}
或者，如果这是特定文件中唯一的CSS，您可以不在主页上将其排队：
add_action(
\'wp_enqueue_scripts\',
function() {
if ( ! is_front_page() ) {
wp_enqueue_style( \'my-stylesheet\', \'/url/to/stylesheet.css\' );
}
}
);
