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

Question

如下例所示，我的 CSS 按钮不起作用，我的音频按钮有库存 CSS。我试过在外部 css 文件中使用 #div-1 和 .div-1，同时弄乱 divs.

我在 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>

Answer 1

我想这是因为你给了两次 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;    
}

Answer 2

您的 CSS 按钮无法正常工作的原因有以下几个：

1.您的 HTML 结构有点过高。

一般来说，有关您页面的信息（出现在浏览器选项卡中的标题、元数据、JS and/or CSS 文件的链接等）位于 HEAD 元素中；并且您的页面内容位于 BODY 元素中。（更多信息：MDN Intro to HTML）

2。 None 个 CSS 选择器实际上以 BUTTON 元素为目标。

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

.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 {}

哦，差点忘了...

您的代码片段中的 .div-1 CSS 声明之后似乎有一个额外的右大括号。（如果这不仅仅是在此处输入代码片段的拼写错误...）

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

Answer 3

您需要在 button 上应用 class - 例如。 .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>

Answer 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;
}

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

Why does the CSS not work with my button element?

html

css

audio

static

button