Question

所以我在网站上工作，在使用网页时我注意到了一些事情。两个元素具有相同的类别，但颜色的阴影是不同的。有谁知道会导致类似的东西？

修改这是一些代码：

班级：

.summer{
background-color: #0077be;
/*background-image: -ms-linear-gradient(top, #0077be  0%, #fff 100%);

background-image: -moz-linear-gradient(top, #0077be  0%, #fff 100%);

background-image: -o-linear-gradient(top, #0077be  0%, #fff 100%);

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0077be ), color-stop(100, #fff));

background-image: -webkit-linear-gradient(top, #0077be  0%, #fff 100%);

background-image: linear-gradient(to bottom, #0077be  0%, #fff 100%);*/
}

HTML：

<button onclick="prnt();">Print</button>
<div class="recipe" id="0">
    <div class="tabs">
        <a class="tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
    </div>
    <div class="page">
        <p>The recipes you'll find here are ones you can use to impress guests at your next get together</p>
    </div>
</div> <!--recipe card end-->
<div class="recipe" id="1">
    <div class="tabs">
        <a class="tab">Chicken Clubhouse Sandwiches</a>
    </div>
    <div class="page">
        <h1>Chicken Clubhouse Sandwiches</h1>
        <div class="head">
            <b>From: </b> <a href="#">Source</a><br>
            <b>Makes: </b> 2 Sandwiches<br>
            <button onclick="makeLink(1);">Share Link</button><br>
        </div>

        <div class="card">
            <div class="pic">
                <img src="/uploads/1/0/4/0/104012940/custom_themes/406340590114946394/files/images/lunch2.jpg">
            </div>
            <div class="ing">
                <b>Ingredients</b>
                <ul>
                    <li>6 slices of bread</li>
                    <li>6 Slices of bacon</li>
                    <li>Cooked chicken breast, cut into chunks</li>
                    <li>Shredded Lettuce</li>
                    <li>Sliced Tomato</li>
                    <li>Mayonnaise</li>
                    <li>Heinz Chili Sauce</li>
                </ul>
            </div>
            <div class="pro">
                <b>How to Make</b>
                <ol>
                    <li>Toast the bread and cook the bacon</li>
                    <li>Assemble in the following order:
                        <ul>
                            <li>Toast</li>
                            <li>Mayo</li>
                            <li>Lettuce</li>
                            <li>Tomato</li>
                            <li>Toast</li>
                            <li>Chicken</li>
                            <li>Bacon</li>
                            <li>Chili Sauce</li>
                            <li>Toast</li>
                        </ul>
                    </li>
                </ol>
            </div>          
        </div>
    </div>
</div> <!--recipe card end-->

分配班级：

function button(season){
switch(season){
  case 1:
        Array.from(document.querySelectorAll('button')).map(function(button) {
        button.className+="spring";
    });
        break;
  case 2:
        Array.from(document.querySelectorAll('button')).map(function(button) {
        button.className += "summer";
    });
        break;
  case 3:
        Array.from(document.querySelectorAll('button')).map(function(button) {
        button.className+="fall";
    });
        break;
  case 4:
        Array.from(document.querySelectorAll('button')).map(function(button) {
        button.className+="winter";
    });
        break;
  default:
        Array.from(document.querySelectorAll('button')).map(function(button) {
               button.style.backgroundColor="#FFF";
    });
        break;
  }  
}

Answer 1

检查这些可能性：

元素的ID

元素的类别

-style属性被添加到HTML

中的元素中

Answer 2

你可以尝试这样的事情

.container {
    width: 300px; 
    height: 50px;
    margin: 10px;
    border: 1px solid gray;
}
.container:nth-of-type(3) {
    border-color: red;
}
.container:nth-of-type(2) {
    border-color: blue;
}

<div class="container">Content</div>
<div class="container">Content</div>
<div class="container">Content</div>

否则你可以使用div id's

.container {
    width: 300px; 
    height: 50px;
    margin: 10px;
    border: 1px solid gray;
}
#divtwo.container {
    border-color: red;
    color:#fff;
    background-color:#006678;
}
#divthree.container {
    border-color: blue;
    background-color:#009966;
}

<div id="divone" class="container">Content</div>
<div id="divtwo" class="container">Content</div>
<div id="divthree" class="container">Content</div>

网页上的颜色根据位置在阴影中变化

2 个答案: