Question

我知道这可能有很多问题，但我只是在为学校作业起草。

脚本：

  a.button4;{
    text-align; center;
    padding: 14px 16px;
    text-decoration; none;
    font-size; 17px;
    font-family;'Roboto',sans-serifZ
    color:"white";
}
a.button4;hover{
 border-color; rgba(255,255,255,1);
}
</script>

分区：

<div style='float: right;'>
     <a href="" class="button4" style="background-color:#f14e4e"></a>
     <a href="" class="button4" style="background-color:#f1bb4e"></a>
     <a href="" class="button4" style="background-color:#84f14e"></a>
     <a href="" class="button4" style="background-color:#4ef18f"></a>
     <a href="" class="button4" style="background-color:#4e9af1"></a>
     <a href="" class="button4" style="background-color:#9a4ef1"></a>
     <a href="" class="button4" style="background-color:#f14ebd"></a>
      </div>

感谢阅读！

Answer 1

/* CSS rules is `property-name: value;` and in when you start css class name dosen't end with `;` */
a.button4 {
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Roboto',sans-serifZ;
    color: white;
}
a.button4:hover{
    background-color : rgba(255,255,255,1);
}

<!-- Here I use Display flex instant of float right -->
<div style="display:flex;">
     <a href="" class="button4" style="background-color:#f14e4e"></a>
     <a href="" class="button4" style="background-color:#f1bb4e"></a>
     <a href="" class="button4" style="background-color:#84f14e"></a>
     <a href="" class="button4" style="background-color:#4ef18f"></a>
     <a href="" class="button4" style="background-color:#4e9af1"></a>
     <a href="" class="button4" style="background-color:#9a4ef1"></a>
     <a href="" class="button4" style="background-color:#f14ebd"></a>
</div>

Answer 2

样式属性比您在样式表中使用的选择器具有很多更高的特异性。

还要仔细检查您在何处使用 ; 与 :。在您的第一条规则中，选择器不需要以 ; 结尾。

在您的 CSS 规则中，它应该是 property-name: value;。对于伪元素和伪类，您应该使用 : 例如a.button4:hover。

当我第一次开始使用 CSS 时，batificity 指南帮助我更好地理解了特殊性。

Answer 3

好的，这里有一些对您的代码的修复，首先将您的样式放在 style 标签下而不是 script 标签中，其他问题与冒号和分号有关，我将在下面提供代码：

<style>
a.button4{
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-family:'Roboto',sans-serifZ
color:"white";
}
a.button4:hover{
border-color; rgba(255,255,255,1);
}
</style>

Answer 4

我编写了一个简单的 HTML 代码，并使用了您的颜色。

<!DOCTYPE html>
<html>
    <style>
    a.button4{ background-color:#f14e4e; }
    a.button5{ background-color:#f1bb4e; }
    a.button6{ background-color:#84f14e; }
    a.button7{ background-color:#4ef18f; }
    a.button8{ background-color:#4e9af1; }
    #test{ background-color:#9a4ef1; }
    #btn1{ background-color:#f14ebd }
    </style>
    <head>
        <!--you can add your css here, or you can write your css in style as I wrote above-->
        <link rel="stylesheet" href="mystyle.css">
    </head>
    <body>
        <div style='float: right;'>
             <a href="" class="button4">Link 1</a>
             <a href="" class="button5">Link 2</a>
             <a href="" class="button6">Link 3</a>
             <a href="" class="button7">Link 4</a>
             <a href="" class="button8">Link 5</a>
        </div>
        <br />
        <!--you also can make a buttons-->
         <div style='float: right;'>
            <input type="button" name="test" id="test" class="button" value="My button">
             <button type="button" name="btn1" id="btn1">Button 2</button>
         </div>
    </body>
</html>

使背景颜色更改按钮起作用

4 个答案: