Html 为什么CSS不能与我的按钮元素一起工作？_Html_Css_Button_Audio_Static

Html 为什么CSS不能与我的按钮元素一起工作？

html css button audio

Html 为什么CSS不能与我的按钮元素一起工作？,html,css,button,audio,static,Html,Css,Button,Audio,Static,如下面的示例所示，我的按钮CSS不起作用，而我的音频按钮有库存CSS。我曾尝试在外部css文件中使用#div-1和.div-1，同时也尝试过使用div 我在html方面没有太多的经验，所以欢迎对我的代码提供任何额外的帮助谢谢你的帮助：） var x=document.getElementById（“音频”）；函数playAudio（）{ x、 play（）； } 函数pauseAudio（）{ x、暂停（）； } #标题{ 字体大小：70px；字体：斜体；字体系列：无衬线；字体

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

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

谢谢你的帮助：）

var x=document.getElementById（“音频”）；
函数playAudio（）{
x、 play（）；
} 
函数pauseAudio（）{
x、 暂停（）；
}

#标题{
字体大小：70px；
字体：斜体；
字体系列：无衬线；
字体大小：粗体；
文本对齐：居中；
颜色：#008eb0；
}
#p{
字体大小：13px；
字体：斜体；
字体大小：粗体；
颜色：#008eb0；
文本对齐：居中；
顶部：1000px
}
身体{
背景色：白色；
}
.div-1{
边界半径：3px；
颜色：rgb（0,0,0）；
字体：斜体；
文本对齐：居中；
位置：相对位置；
填充物：5px；
顶部：100px；
}
.div-2{
边界半径：10px；
颜色：rgba（0,0,0,0.555）；
文本对齐：居中；
位置：相对位置；
}
}
#第一组{
字体风格：粗体；
}


标题
副标题
玩
暂停
_________________________________________________________________________________________________________________________________________________________________________________________________
________________________________________________________________________________________________________________________________________________________________________________________________

我想这是因为你已经给了div1两次，用它来设计样式。这样你就可以写了

.div-1{
边界半径：3px；
颜色：rgb（0,0,0）；
字体：斜体；
文本对齐：居中；
位置：相对位置；
填充物：5px；
顶部：100px；
字体风格：粗体；
}

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

1。您的HTML结构有点僵硬。

通常，页面信息（出现在浏览器选项卡中的标题、元数据、指向JS和/或CSS文件的链接等）会出现在HEAD元素中；页面的内容放在BODY元素中。（更多信息请点击此处：）

2。没有一个CSS选择器真正以按钮元素为目标。

我假设您希望这些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 {}

哦，差点忘了…

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

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

您需要在

按钮

-上应用类，例如

.div1按钮{…}

您可以单击

运行代码片段

以应用

CSS

#标题{
字体大小：70px；
字体：斜体；
字体系列：无衬线；
字体大小：粗体；
文本对齐：居中；
颜色：#008eb0；
}
#p{
字体大小：13px；
字体：斜体；
字体大小：粗体；
颜色：#008eb0；
文本对齐：居中；
顶部：1000px
}
身体{
背景色：白色；
}
.div-1按钮{
边界半径：3px；
颜色：rgb（0,0,0）；
字体：斜体；
文本对齐：居中；
位置：相对位置；
填充物：5px；
顶部：100px；
}
.div-2按钮{
边界半径：10px；
颜色：rgba（0,0,0,0.555）；
文本对齐：居中；
位置：相对位置；
}
}
#第一组{
字体风格：粗体；
}


标题
副标题
玩
暂停
var x=document.getElementById（“音频”）；
函数playAudio（）{
x、 play（）；
}
函数pauseAudio（）{
x、 暂停（）；
}
_________________________________________________________________________________________________________________________________________________________________________________________________
________________________________________________________________________________________________________________________________________________________________________________________________

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

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>

该标记已弃用。它可能会破坏一切！非常好。谢谢你的详细回答！现在更有意义了。我也一定会更改格式，谢谢你的提示！不客气。我忘了添加一个链接，但我把你的代码（减去头部和身体外部的html标记）拉到了Codepen中，如果你想了解更多关于我所说内容的细节：干杯，伙计：）。嘿，我对JS一点都不熟悉，你在忽略这个想法下引用了什么

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