我需要一个元素成为其他元素的子元素而不继承某些属性

Question

<span id="priority-dot-open-menu">
                    <span id="priority-menu">
                        <span class="tooltip-top"></span>
                        <span id="priority-dot-blue"></span>
                        <span id="priority-dot-yellow"></span>
                        <span id="priority-dot-red"></span>
                    </span>
                </span>

/* The popup menu - hidden by default */
#priority-menu {      
    display: none;
    position: absolute;
    top: 150%;
    left: -50%;    
    border: 3px solid #f1f1f1;
    z-index: 9;    
    max-width: 300px;    
    padding: 10px;
    background-color: white;          
}

#priority-dot-open-menu { 
    position: relative;   
    height: 25px;
    width: 25px;
    background-color: blue;
    border-radius: 50%;    
    display: inline-block;
    opacity: 0.8;
    cursor: pointer;    
}

#priority-dot-open-menu:hover {
    opacity: 1;
}

我的＃priority-menu（带有3个点的列）是上面的点（＃priority-dot-open-menu）的子级。我需要这样，以便可以使用绝对定位。但是，它也继承了某些属性/值，例如我不想要的不透明度和悬停。什么是理想的解决方案？ https://jsfiddle.net/moq2bwLj/（菜单在js小提琴上无法打开，仅用于代码查看目的。谢谢！

Answer 1

CSS中的

子元素自动继承适用于其父元素的规则；您无法采取任何措施来防止这种情况。您可以执行的操作是通过制定针对儿童的规则，将其更改为 initial 覆盖此行为>值：

#priority-menu {
  cursor: initial;
  opacity: initial;
}