Question

我想知道天气有一种方法可以在HTML中的两个代码块中添加两种不同的样式。举个例子，我有两个部分

<section>
    <header class="major">
        <h2>Section 1</h2>
    </header>
</section>

和

<section>
    <header class="major">
        <h2>Section 2</h2>
    </header>
</section>

我希望在上面的两个部分中应用两种不同的样式。

如果有办法，请告诉我。

Answer 1

我会为每个部分添加一个类或ID - 这正是他们所需要的。

/* Our base styles*/

section {
 border: dashed 1px black; 
 padding: 1em;
 margin: 1em; 
 font-weight: bold; 
 color: #900;
}


/*Can over ride styles with classes*/

section.type-a {
 background-color: #fee;
 
 border: solid 4px red; 
}

section.type-b {
background-color: #efe;
color: #060;
}

<section class="type-a">
    <header class="major">
        <h2>Section 1</h2>
    </header>
</section>
<section class="type-b">
    <header class="major">
        <h2>Section 2</h2>
    </header>
</section>

Answer 2

我希望我现在得到你的问题。那么，你可以做什么你可以在另一个div中添加你的表模板并给它一个类。现在，您可以为section和另一个section定义一个样式，该样式位于类second-template中。通过这种方式，您可以为其创建不同的样式。

现在我已经编写了一段代码示例。你可以相应地改变它。

$('.second-template').find('section').css("color", "green");

试试这样：

$('.second-template').find('section').css("color", "green");

section {
    background: red;
}

.second-template > section {
    background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
    <header class="major">
        <h2>Section 1</h2>
    </header>
</section>

<div class="second-template">
 /*Include your secoond template here */
 <section>
    <header class="major">
        <h2>Section 1</h2>
    </header>
</section>
 
</div>

Answer 3

CSS（除了scoped和contained CSS，它们几乎没有浏览器支持）和JS在文档级别应用。

要将它们限制在文档的特定区域，您必须设计CSS和JS以这种方式工作。通常，您可以使用前缀为ID selector的选择器访问所有元素（在向您正在使用的每个组中的最外层元素添加<div> <span>Manufacturer</span> <label> <input type="checkbox" name="manufacturer" value="apple">Apple</label> </div> <div> <span>Screen Size</span> <label> <input type="checkbox" value="16" name="storage">16 GB</label> </div> <button>Select</button> document.querySelector('button').addEventListener('click', function() { document.querySelector('input[name=manufacturer][value=apple]').checked = true; document.querySelector('input[name=storage][value=16]').checked = true; })属性后）和descendant combinator（在CSS规则集的选择器中或分别在id或querySelector的参数中。

Answer 4

您可以使用nth-of-type()选择器：

section:nth-of-type(index){
   //Your rules
}

希望这有帮助。

＆＃13;

section:nth-of-type(1){
   color: green;
}

section:nth-of-type(2){
    color: red;
}

＆＃13;

<section>
    <header class="major">
        <h2>Section 1</h2>
    </header>
</section>

<section>
    <header class="major">
        <h2>Section 2</h2>
    </header>
</section>

＆＃13;

Answer 5

使用CSS3：nth-child（）选择器，如下所示

section:nth-child(1) {
    //apply your changes to the first section
}

section:nth-child(2) {
    //apply your changes to the second section
}

Answer 6

如果需要访问不同的类，则需要遍历以下所示的元素。但关键是使用第n个子选择器引用第一个元素，我没有看到需要打扰脚本，下面的代码适用于我，并将不同的样式应用于不同的元素。

<style type="text/css">
    section:nth-child(1) .major{
            background:red;
            height:100px;
            color:#fff;
    }

    section:nth-child(2) .major{
            background:blue;
            height:100px;
            color:lightcyan;
    }
</style>

<section>
    <header class="major">
        <h2>Section 1</h2>
    </header>
</section>


<section>
    <header class="major">
        <h2>Section 2</h2>
    </header>
</section>

两个部分的HTML不同样式

6 个答案: