Question

我制作了4个按钮，每个按钮都链接到不同的表格。

我无法使用css单独着色每个按钮...例如，我希望第一个按钮为红色，第二个按钮为蓝色，等等。

我真的很感激帮助。感谢。

HTML：

<a class="button" data-table="1" href="#">Slifer Level</a>

<a class="button" data-table="2" href="#">Ra Level</a>

<a class="button" data-table="3" href="#">Obelisk Level</a>

<a class="button" data-table="4" href="#">Exodia Level</a>

    <table id="1">
        <thead>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Jill</td>
                <td>Smith</td>
                <td>50</td>
            </tr>
            <tr>
                <td>Eve</td>
                <td>Jackson</td>
                <td>94</td>
            </tr>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <table id="2">
        <thead>
            <tr>
                <td>Sport</td>
                <td>Gender</td>
                <td>Hair Color</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Baseball</td>
                <td>Female</td>
                <td>Blonde</td>
            </tr>
            <tr>
                <td>Curling</td>
                <td>Female</td>
                <td>Brown</td>
            </tr>
            <tr>
                <td>Hockey</td>
                <td>Male</td>
                <td>Black</td>
            </tr>
        </tbody>
    </table>
    <table id="3">
        <thead>
            <tr>
                <td>Favorite TV Show</td>
                <td>Favorite Band</td>
                <td>Favorite Food</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>How I Met Your Mother</td>
                <td>Panic At The Disco</td>
                <td>Pizza</td>
            </tr>
            <tr>
                <td>Lost</td>
                <td>Fall Out Boy</td>
                <td>Steak</td>
            </tr>
            <tr>
                <td>The Office</td>
                <td>OneRepublic</td>
                <td>Waffles</td>
            </tr>
        </tbody>
    </table>
    <table id="4">
        <thead>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
        </thead>
        <tr>
            <td>How I Met Your Mother</td>
            <td>Panic At The Disco</td>
            <td>Pizza</td>
            <td>1</td>

的CSS：

body{
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    text-align: center;
    margin-top: 1.5rem;
}

a{
    margin: 0.5rem;    
}

a.button{
    background-color: #ed8c15;
    color: white;
    padding: 0.5rem;
    border-radius: 5px;
    text-decoration: none;
    &:hover{
        background-color: darken(tomato, 10%);
        }
}

table{
    width: 80%;
    margin: 2em auto;
    border: 2px solid black;
}

tr:nth-child(even){

    background-color: #F7F7F7;
}

thead{
    background-color: darkgrey;
}

th{
    padding: 0.75em 0;
}

td{
    padding: 0.7em 1em;
}

的java：

(function () {
    var tables = $("table");
    //Grabs all the tables
    tables.hide().first().show();
    //Hides all the tables except first
    $("a.button").on("click", function () {
        //Adds eventListner to buttons
        tables.hide();
        //Hides all the tables
        var tableTarget = $(this).data("table");
        //Gets data# of button
        $("table#" + tableTarget).show();
        //Shows the table with an id equal to data attr of the button
    })
})();

Answer 1

给每个＆＃39;按钮类＆＃39;同班同学如下：

<a class="button red" data-table="1" href="#">Slifer Level</a>

<a class="button blue" data-table="2" href="#">Ra Level</a>

<a class="button green" data-table="3" href="#">Obelisk Level</a>

<a class="button yellow" data-table="4" href="#">Exodia Level</a>

然后，为您定义的每个新类提供CSS

 .red { color: red; }
 .blue { color: blue; }
 .green { color: green; }
 .yellow { color: yellow; }

Answer 2

在您的css中使用nth:child()选择器

a.button:nth-child(2){
     background-color: #4679BD;
}

http://jsfiddle.net/LpLhP/17/

Answer 3

有几种方法可以做到这一点，最简单的方法是制作一个额外的课程

<button class="button red"></button>

.red{
    background-color:red;
}

button:nth-of-type(1) <--- First Button Styling

Answer 4

    <style>
 #red{
 background-color: red;    
     }
 #blue{
 background-color: blue;   
 }
  #green{
 background-color: green;   
 }
 .button{
 color: #fff;
 padding: .5rem;
 border-radius: 5px;
 text-decoration: none;
 }
     </style>   

        <a class="button" id="red" data-table="2" href="#">button2</a>
        <a class="button" id="blue" data-table="2" href="#">button2</a>
        <a class="button" id="grren" data-table="2" href="#">button2</a>

Answer 5

试试这个

a.button[data-table="1"]{background-color:red ;}
a.button[data-table="2"]{background-color: blue;}
a.button[data-table="3"]{background-color: green;}
a.button[data-table="4"]{background-color: black;}

DEMO

Answer 6

为什么不添加css

a.button:nth-child(1){
    background-color:red;
}
a.button:nth-child(2){
    background-color:blue;
}

Answer 7

试试这个。

希望这有帮助。

为按钮提供个别ID。

<a class="button" id="button1" data-table="1" href="#">button1</a>

<a class="button" id="button2" data-table="2" href="#">button2</a>

<a class="button" id="button3" data-table="3" href="#">button3</a>

<a class="button" id="button4" data-table="4" href="#">button4</a>

Working Demo

Answer 8

<a class="buttona" data-table="1" href="#">button1</a>

<a class="buttonb" data-table="2" href="#">button2</a>

<a class="buttonc" data-table="3" href="#">button3</a>

<a class="buttond" data-table="4" href="#">button4</a>


   .buttona{
    background-color: #ed8c15;
    color: white;
    padding: 0.5rem;
    border-radius: 5px;
    text-decoration: none;
    &:hover{
        background-color: darken(tomato, 10%);
        }
}


.buttonb{
    background-color: blue;
    color: white;
    padding: 0.5rem;
    border-radius: 5px;
    text-decoration: none;
    &:hover{
        background-color: red;
        }
}

为每个按钮使用不同的CSS。
更改背景颜色和悬停背景颜色。

Answer 9

数据表也是一种很好的定位方式，但这可能是更广泛的网站范围。 nth类型非常适合列表和内容，但我怀疑在这种情况下你会得到更多的重用。你也不需要像a.red-button等相邻的选择器。

我选择了网站范围的按钮样式，然后阻止元素修饰符样式。

这是a fiddle too:

HTML

<a href="#" class="button">Button</a>

<button class="button">Button</button>

<input type="submit" class="button" value="button" />

CSS

.button { /* button reset - base */
  display: inline-block; /* makes sure you can use margin-top etc */
  border: 0; outline: 0; /* overrides defaults */
  margin: 0; padding: 0;
  border-radius: 0; /* overrides defaults */
  background: gray; /* overrides background image */
  font-family: inherit; /* gets parent font */
  color: inherit; /* gets parent color */
  text-align: center;
  text-decoration: none;
  -webkit-appearence: none; /* removes ios styling defaults */
  -moz-appearence: none;
  appearence: none;
  cursor: pointer;

  font-size: 1.2em;
  padding: .5em .7em
}


/* specific styles */
.light {
    background: red;
}

.dark {
    background: purple;
}

.selector {
    background: color;
}

.big-button {
    font-size: 1.6em; /* etc. */
}

现在，如果你愿意，可以将这些样式与数据表一起使用 - 我看到你正在使用sass - 所以你可以将这些“迷你主题”放到按钮，div或其他任何东西上，并重复使用常见的颜色组合

.button[data-table="1"] {
    @extend .light;
}

或

a[data-table="1"] {
    @extend .dark;
    @extend .big-button;
}

/* or make them @mixins and @include them if that suits you better */

按钮着色

9 个答案:

HTML

CSS