从样式"CSS“中排除项目
从样式"CSS“中排除项目
提问于 2020-11-21 22:50:32
我已经创建了一个焦点状态，它将创建一个轮廓来区分聚焦的项目，但是当我将焦点放在汉堡切换按钮上时，我想排除轮廓样式。我尝试使用:not选择器作为“:focus:not(.hamburger)”，但它什么也没做。
-导航列表的HTML块
<header>
<div class="logo">
<img src="img/pf1.jpg" alt="">
</div>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="/index.html" class="nav__link">Home</a></li>
<li class="nav__item"><a href="#services" class="nav__link">My Services</a></li>
<li class="nav__item"><a href="#about" class="nav__link">About me</a></li>
<li class="nav__item"><a href="#work" class="nav__link">My Work</a></li>
</ul>
</nav>
</header>-焦点状态的CSS
:focus {
outline: 3px solid var(--clr-accent);
outline-offset: 3px;
}回答 1
Stack Overflow用户
发布于 2020-11-21 22:56:32
:not()伪选择器需要在选择器中出现得更早，因为它限定的是元素，而不是像:focus这样的伪状态。所以：
*:not(.hamburger):focus {
outline: 3px solid var(--clr-accent);
outline-offset: 3px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64944390
复制相关文章
相似问题
腾讯云开发者
