CSS（层叠样式表）是一种表示样式表语言，用于描述HTML（超文本标记语言），XML（可扩展标记语言）文档和SVG元素的外观和格式，包括（但不限于）颜色，布局，字体和动画。它还描述了元素应如何在屏幕上，纸上，语音或其他媒体上呈现。
在我的网站上，我有一个复选框，该复选框在默认的灯主题和黑暗主题之间切换。如果该页面设置为“暗模式”并刷新，则将主题切换回光模式。有办法
。 背景色：Lightgray； 边界：无； 填充：10px; 边界拉迪乌斯：5px; 光标：指针； } .gaming-btn { </desc> <question vote="-1"><code><head> <style> .is-toggled { background-color: lightgray; border: none; padding: 10px; border-radius: 5px; cursor: pointer; } .gaming-btn { background-color: black; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer; } </style> </head> <body> <button class="gaming-btn" onclick=" const btn = document.querySelector('.gaming-btn'); if(btn.classList.contains('is-toggled')) { btn.classList.remove('is-toggled') } else { btn.classList.add('is-toggled'); } ">Gaming</button> </body> </code><pre> </pre>单击按钮时添加类（.is-toggled），但是单击时的按钮的样式未应用...<p> </p> </question> <answer tick="false" vote="0">感谢如果有人提供帮助，但是我想知道答案，我只是放错了班级的样式tag<p> </p> </answer> <answer tick="false" vote="0">您可以使用<p><code>classList.toggle</code><pre>切换类名。定义类</pre><code>.is-toggled</code><pre>之后</pre><code>.gaming-bth</code><pre>可以覆盖样式。 </pre></p><p> </p> <div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"><code>const btn = document.querySelector('.gaming-btn') btn.addEventListener('click', () => { btn.classList.toggle('is-toggled') });</code><div> <pre><code>.gaming-btn { background-color: black; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer; } .is-toggled { background-color: lightgray; border: none; padding: 10px; border-radius: 5px; cursor: pointer; }</code></pre> <pre><code><button class="gaming-btn">Gaming</button></code></pre> <pre> </pre> </div></div> <p> </p></answer>
试图了解该规则的工作方式。 我有一个例子：
I'm wondering how to make infinite animation on jQuery with a plugin "background position animation" I tried to implement
，例如，我有2个表： 表1 行1 -colum1 r ... ，例如，我有2个表： <p>Table 1</p> <table width="100%"> <tbody> <tr> <td> <p>row 1 - colum 1</p> </td> <td> <p>row 1 - colum 2</p> </td> </tr> <tr> <td> <p>row 2 - colum 1</p> </td> <td> <p>row 2 - colum 2</p> </td> </tr> </tbody> </table> <p>Table 2</p> <table width="100%"> <tbody> <tr> <td> <p>row 1 - colum 1</p> </td> <td> <p>row 1 - colum 2</p> </td> <td> <p>row 1 - colum 3</p> </td> <td> <p>row 1 - colum 4</p> </td> <td> <p>row 1 - colum 5</p> </td> <td> <p>row 1 - colum 6</p> </td> <td> <p>row 1 - colum 6</p> </td> <td> <p>row 1 - colum 7</p> </td> </tr> <tr> <td> <p>row 2 - colum 1</p> </td> <td> <p>row 2 - colum 2</p> </td> <td> <p>row 2 - colum 3</p> </td> <td> <p>row 2 - colum 4</p> </td> <td> <p>row 2 - colum 5</p> </td> <td> <p>row 2 - colum 6</p> </td> <td> <p>row 2 - colum 6</p> </td> <td> <p>row 2 - colum 7</p> </td> </tr> </tbody> </table> 案例1。显示：表 table { display: table; width: 100%; overflow: auto; } 回流：表1与整个容器一样宽，但表2溢出了容器。 https：//i.sstatic.net/cwhredxg.png 案例2。显示：块 table { display: block; width: 100%`;` overflow: auto; } 撤退：表2显示了水平滑块，但表1最小化 https：//i.sstatic.net/2fzas21m.png 据我所知，溢出只能与Display：block一起使用：block，但block width =“ 100％”工作不正确。 如何使表1始终具有整个容器的宽度（例如情况1），表2总是具有滑块（例如情况2）？ thanks！ 在DIV内仅包含溢出的表2：自动；在保持显示时：表；对于两个表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Table Overflow Example</title> <style> table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; text-align: left; } /* Wrap Table 2 inside a div with overflow */ .table-container { width: 100%; overflow: auto; /* Enables horizontal scrolling if needed */ } </style> </head> <body> <p>Table 1</p> <table> <tbody> <tr> <td>row 1 - column 1</td> <td>row 1 - column 2</td> </tr> <tr> <td>row 2 - column 1</td> <td>row 2 - column 2</td> </tr> </tbody> </table> <p>Table 2</p> <div class="table-container"> <table> <tbody> <tr> <td>row 1 - column 1</td> <td>row 1 - column 2</td> <td>row 1 - column 3</td> <td>row 1 - column 4</td> <td>row 1 - column 5</td> <td>row 1 - column 6</td> <td>row 1 - column 7</td> </tr> <tr> <td>row 2 - column 1</td> <td>row 2 - column 2</td> <td>row 2 - column 3</td> <td>row 2 - column 4</td> <td>row 2 - column 5</td> <td>row 2 - column 6</td> <td>row 2 - column 7</td> </tr> </tbody> </table> </div> </body> </html> 表1不受影响，保持全宽。 表2如果溢出，则获得水平滚动条。 不需要使用显示：块；它会破坏宽度：100％。
我想用虚线的边框创建DIV，一旦用户徘徊在它上面，它破坏了边界，以相同的方式移动 /循环，他们只是在边缘绕着边缘移动，而不会离开他们的边缘
我想将Flexbox与Justify-content一起使用，将两个垂直居中在我的标题内。但是，由于它混乱的口号“ hitbox”这不再起作用，因为它以主标题和20px高slogun