＆＃34;嵌套＆＃34;类和CSS

Question

我是CSS业务的新手，我想做一些我甚至不知道这是否是正确的方法。

我想做一个＆＃34;主题选择器＆＃34;对于具有预览的网站，当您单击时，将应用新主题。

这是我想要的东西：

＆＃13;

＆＃13;

$(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); 
        }
    }
});

＆＃13;

#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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

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

谢谢！

Answer 1

您应该重复使用您的身份#theme-selector，以避免.theme-xxx p覆盖其风格。

＆＃13;

＆＃13;

$(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); 
        }
    }
});

＆＃13;

#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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您正在使用新类专门更新主题选择器，这就是他们更改的原因。

您只想更新“真实”内容而不是主题选择器。在我的示例http://jsfiddle.net/hgrnuu2x/中，我们更改了'contentContainer'的类，CSS应用于我添加的'真实'内容，我们只留下主题选择器的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) {
            $('#contentContainer').removeClass().addClass(className); 
        }
    }
});

<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>
<div>
    'Real' content below
</div>
<div id="contentContainer" class="theme-blue">
        <ul id="contentList">
        <li>
            <p>Content item 1</p>
        </li>  
        <li>
            <p>Preview design - Green</p>
        </li>
        <li>
            <p>Preview design - Orange</p>
        </li> 
        <li>
            <p>Preview design - Red</p>
        </li> 
    </ul>
</div>