html - "nested"类和 CSS

Question

我是 CSS 行业的新手，我想做一些我什至不知道这样做是否正确的事情。

我想为一个带有预览的网站做一个“主题选择器”，当你点击时，新的主题就会被应用。

这是我想要的东西:

$(document).on('click', '#theme-selector p', function(e) {
    var $target = $(e.target).closest('li');
    if($target.length) {
        var className = $target.attr('class');
        if(className.length) {
            $('#main').removeClass().addClass(className); 
        }
    }
});

#theme-selector li {
    cursor: pointer;
}

/* Blue */

.theme-blue p {
	color: rgba(0, 75, 179, 1);
}

/* Green */

.theme-green p {
	color: rgba(0, 154, 51, 1);
}

/* Orange */

.theme-orange p {
	color: rgba(233, 122, 70, 1);
}

/* Red */

.theme-red p {
	color: rgba(192, 65, 53, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main" class="theme-blue">
    
    <p>Actual design</p>
    
    <h2>Change your theme</h2>
    
    <ul id="theme-selector">
        <li class="theme-blue">
            <p>Preview design - Blue</p>
        </li>  
        <li class="theme-green">
            <p>Preview design - Green</p>
        </li>
        <li class="theme-orange">
            <p>Preview design - Orange</p>
        </li> 
        <li class="theme-red">
            <p>Preview design - Red</p>
        </li> 
    </ul>
    
</div>

问题是当我应用一个新主题时，它也适用于预览(尝试在 jsfiddle 上应用红色主题，你会看到问题)

请告诉我是否有更好的方法或如何更正此问题？

谢谢!

Answer 1

您应该重用您的 id #theme-selector 以避免您的 .theme-xxx p 覆盖其样式。

$(document).on('click', '#theme-selector p', function(e) {
    var $target = $(e.target).closest('li');
    if($target.length) {
        var className = $target.attr('class');
        if(className.length) {
            $('#main').removeClass().addClass(className); 
        }
    }
});

#theme-selector li {
    cursor: pointer;
}

/* Blue */

.theme-blue p,
#theme-selector .theme-blue p {
	color: rgba(0, 75, 179, 1);
}

/* Green */

.theme-green p,
#theme-selector .theme-green p {
	color: rgba(0, 154, 51, 1);
}

/* Orange */

.theme-orange p,
#theme-selector .theme-orange p {
	color: rgba(233, 122, 70, 1);
}

/* Red */

.theme-red p,
#theme-selector .theme-red p {
	color: rgba(192, 65, 53, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main" class="theme-blue">
    
    <p>Actual design</p>
    
    <h2>Change your theme</h2>
    
    <ul id="theme-selector">
        <li class="theme-blue">
            <p>Preview design - Blue</p>
        </li>  
        <li class="theme-green">
            <p>Preview design - Green</p>
        </li>
        <li class="theme-orange">
            <p>Preview design - Orange</p>
        </li> 
        <li class="theme-red">
            <p>Preview design - Red</p>
        </li> 
    </ul>
    
</div>