为什么 CSS 不适用于我的按钮元素？答案

【问题标题】：Why does the CSS not work with my button element?为什么 CSS 不适用于我的按钮元素？
【发布时间】：2021-03-05 04:04:55
【问题描述】：

如下例所示，我的按钮 CSS 不起作用，而我的音频按钮具有标准 CSS。我曾尝试在外部 css 文件中使用 #div-1 和 .div-1 ，以及弄乱 div。

我在 html 方面没有太多经验，因此欢迎对我的代码提供任何额外帮助！

感谢您的帮助:)

var x = document.getElementById("audio"); 

function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
  x.pause(); 
}

#title {
    Font-size:70px;
    font-style:italic;
    font-family:sans-serif;
    font-weight:bold;
    text-align:center;
    color: #008eb0;
}

#p {
    Font-size:13px;
    font-style:italic;
    font-weight:bold;
    color: #008eb0;
    text-align:center;
    top:1000px
}

body {
    background-color:white;
}

.div-1{
    border-radius: 3px;
    color:rgb(0, 0, 0);
    font-style: italic;
    text-align: center;
    position: relative;
    padding:5px;
    top:100px;
}

.div-2 {
    border-radius: 10px;
    color:rgba(0, 0, 0, 0.555);
    text-align: center;
    position: relative;
    }


}

#div1 {
    font-style: bold;
}

<!DOCTYPE html>
<html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel = "stylesheet"
type = "text/css"
href = "style.css">
<div id = "title">
    <h>Title</h>  
</div>
</head>

<body>
    <div id = "p">
        <p>subheading</p>
    </div>
 </body>



<audio id="audio">
  <source src="not sure yet" type="audio/ogg">
  <source src="not sure yet" type="audio/mpeg">
</audio>
    <div class="div-1">
        <button onclick="playAudio()" type="button">Play</button>
    </div>
    <div class="div-2">
        <button onclick="pauseAudio()" type="button">Pause</button> 
    </div>

<div1>
    <marquee behavior="scroll" direction="left" scrollamount="25">_________________________________________________________________________________________________________________________________________________________________________________________________</marquee>
    <marquee behavior="scroll" direction="right" scrollamount="25">________________________________________________________________________________________________________________________________________________________________________________________________</marquee>
</div1>



</html>

【问题讨论】：

不推荐使用标签。它可能会破坏东西

标签： html css button audio static

【解决方案1】：

按钮的 CSS 不起作用有几个原因：

1.你的 HTML 结构有点夸张。

通常，关于您的页面的信息（出现在浏览器选项卡中的标题、元数据、指向 JS 和/或 CSS 文件的链接等）位于 HEAD 元素中；并且页面的内容进入 BODY 元素。（更多：MDN Intro to HTML）

2。您的 CSS 选择器实际上都没有以 BUTTON 元素为目标。

我假设您希望将这些 CSS 规则应用于 div-1 和 div-2 一侧的按钮元素：

.div-1 {
    border-radius: 3px;
    color: rgb(0, 0, 0);
    font-style: italic;
    text-align: center;
    position: relative;
    padding: 5px;
    top:100px;
}

.div-2 {
    border-radius: 10px;
    color: rgba(0, 0, 0, 0.555);
    text-align: center;
    position: relative;
}

这些规则仅适用于带有这些类的 DIV。您可能想要更改这些选择器以包含按钮：

// Either add the buttons to the existing CSS...
.div-1 button {}
.div-2 button {}

//....or add classes to the buttons in the HTML and change the selectors in your CSS
.button-1 {}
.button-2 {}

哦，差点忘了……

看起来您的代码 sn-p 中的 .div-1 CSS 声明之后可能有一个额外的右大括号。（如果这不仅仅是在这里输入代码 sn-p 的错字......）

希望这是有道理的。祝你好运！

【讨论】：

感谢您的详细解答！现在更有意义了。我也一定会更改格式，谢谢您的提示！
不客气。我忘了添加一个链接，但我将你的代码（减去 HEAD 和外部 BODY html 标签）拉到 Codepen 中，如果你想查看我在说什么的更多细节：codepen.io/code-and-pixels/pen/LYbBdJK?editors=1100

【解决方案2】：

您需要在 button 上申请课程 - 例如。 .div1 button {...}

您可以点击Run Code Snippet 来申请CSS。

#title {
    Font-size:70px;
    font-style:italic;
    font-family:sans-serif;
    font-weight:bold;
    text-align:center;
    color: #008eb0;
}

#p {
    Font-size:13px;
    font-style:italic;
    font-weight:bold;
    color: #008eb0;
    text-align:center;
    top:1000px
}

body {
    background-color:white;
}

.div-1 button{
     border-radius: 3px;
    color:rgb(0, 0, 0);
    font-style: italic;
    text-align: center;
    position: relative;
    padding:5px;
    top:100px;
}

.div-2 button{
    border-radius: 10px;
    color:rgba(0, 0, 0, 0.555);
    text-align: center;
    position: relative;
  }


}

#div1 {
    font-style: bold;
}

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <div id="title">
    <h>Title</h>
  </div>
</head>

<body>
  <div id="p">
    <p>subheading</p>
  </div>


  <audio id="audio">
    <source src="not sure yet" type="audio/ogg" />
    <source src="not sure yet" type="audio/mpeg" />
  </audio>
  <div class="div-1">
    <button onclick="playAudio()" type="button">Play</button>
  </div>
  <div class="div-2">
    <button onclick="pauseAudio()" type="button">Pause</button>
  </div>

  <script>
    var x = document.getElementById("audio");

    function playAudio() {
      x.play();
    }

    function pauseAudio() {
      x.pause();
    }
  </script>
  <div>
    <marquee behavior="scroll" direction="left" scrollamount="25">_________________________________________________________________________________________________________________________________________________________________________________________________</marquee>
    <marquee behavior="scroll" direction="right" scrollamount="25">________________________________________________________________________________________________________________________________________________________________________________________________</marquee>
  </div>
</body>

【讨论】：

传奇！完美运行。

【解决方案3】：

我认为这是因为您已经给了 div1 两次以使用 .和 # 这样你就可以写了

.div-1 {
    border-radius: 3px;    
    color:rgb(0, 0, 0);    
    font-style: italic;    
    text-align: center;    
    position: relative;    
    padding:5px;    
    top:100px;    
    font-style: bold;    
}

【讨论】：

【解决方案4】：

问题是编码结构不正确。我改变了编码结构

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="title">
        <h>Title</h>
    </div>

    <div id="p">
        <p>subheading</p>
    </div>

    <audio id="audio">
        <source src="https://assets.codepen.io/3/jingle-bells.mp3" type="audio/ogg">
        <source src="https://assets.codepen.io/3/jingle-bells.mp3" type="audio/mpeg">
    </audio>
    <div class="div-1">
        <button onclick="playAudio()" type="button">Play</button>
    </div>
    <div class="div-2">
        <button onclick="pauseAudio()" type="button">Pause</button>
    </div>
    <div1>
        <marquee behavior="scroll" direction="left" scrollamount="25">
            _________________________________________________________________________________________________________________________________________________________________________________________________
        </marquee>
        <marquee behavior="scroll" direction="right" scrollamount="25">
            ________________________________________________________________________________________________________________________________________________________________________________________________
        </marquee>
    </div1>

    

    <script>
        var x = document.getElementById("audio");

        function playAudio() {
            x.play();
        }

        function pauseAudio() {
            x.pause();
        }
    </script>


</body>


</html>

这是你的 CSS

#title {
    Font-size: 70px;
    font-style: italic;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    color: #008eb0;
}

#p {
    Font-size: 13px;
    font-style: italic;
    font-weight: bold;
    color: #008eb0;
    text-align: center;
    top: 1000px
}

body {
    background-color: white;
}

.div-1 {
    border-radius: 3px;
    color: rgb(0, 0, 0);
    font-style: italic;
    text-align: center;
    position: relative;
    padding: 5px;
    top: 100px;
}

.div-2 {
    border-radius: 10px;
    color: rgba(0, 0, 0, 0.555);
    text-align: center;
    position: relative;
}

【讨论】：

嘿，我对JS一点也不熟悉，你在