- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我目前已经在 CSS 中编写了一段代码,我想要将其用于特定页面,但不幸的是,它也适用于其他所有页面,并且它使其他页面看起来很损坏,因为它们的格式非常奇怪。
到目前为止我尝试过的解决方案是:
使用页面的唯一代码并使其类似于 - * .post-id-17 .stop {code here}但我使用这个解决方案没有得到任何结果。
这是 HTML 代码:
<!DOCTYPE html>
<html>
<head>
<title>CountDown</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>CountDown</h1>
</header>
<div class="content">
<div class="counter"></div>
<input type="number" id="seconds" placeholder="Seconds">
<div class="buttons">
<button class="btn start" id="start" value="1" onclick="check(this)">Start</button>
<button class="btn start" id="continue" value="1" onclick="check(this)">Continue</button>
<button class="btn stop" id="stop" value="0" onclick="check(this)">Stop</button>
<button class="btn start" id="ok" onclick="toSubmit()">Submit</button>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
这是 CSS 代码:
* .post-id-706 .stop {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html, body{
height: 100%;
}
body{
width: 100%;
height: 100%;
background: linear-gradient(to left top, #0045D6, #00A9f6);
}
header{
width: 100%;
height: 13vh;
background-color: #fff;
color: #0045F6;
display: flex;
justify-content: center;
align-items: center;
}
.content{
width: 100%;
height: 60vh;
font-size: 3rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.content #seconds{
width: 250px;
font-size: 2rem;
padding: 1rem;
outline: none;
background: none;
border: none;
border-bottom: 3px solid #fff;
color: #000000;
}
#seconds::placeholder{
color: #ddd;
font-size: 1.7rem;
}
.btn{
background-color: #fff;
border-radius: 4px;
border: none;
outline: none;
cursor: pointer;
padding: 0.8rem 1.7rem;
font-size: 1.2rem;
font-weight: 700;
}
.start{
color: #1f0;
}
.stop{
color: #E00;
}
#start, #stop, #continue{
display: none;
}
.counter{
color: #000000;
}
这是 JavaScript 代码:
const container = document.querySelector('.counter');
const buttonsDiv = document.querySelector('.buttons');
const secInput = document.getElementById('seconds');
var seconds;
var remseconds;
var minuts;
var toCount = false;
function toSubmit(){
display('start');
remove('seconds');
remove('ok');
seconds = Number(secInput.value);
counting();
}
function display(e){
document.getElementById(e).style.display = 'block';
}
function remove(e){
document.getElementById(e).style.display = 'none';
}
function check(stat){
if(stat.id == "start"){
display("stop");
remove("start");
toCount = true;
}
else if(stat.id == "stop"){
display("continue");
remove("stop");
toCount = false
}
else{
display("stop");
remove("continue");
toCount =true;
}
}
function count(){
if(seconds > 0){
if(toCount == true){
seconds--;
remseconds = seconds % 60;
minuts = Math.floor(seconds / 60);
if(minuts < 10){
minuts = "0" + minuts;
}
if(remseconds < 10){
remseconds = "0" + remseconds;
}
container.innerHTML = minuts + " : " + remseconds;
}
}
else{
container.innerHTML = "DONE!";
buttonsDiv.style.opacity = "0";
}
}
function counting(){
remseconds = seconds % 60;
minuts = Math.floor(seconds / 60);
if(remseconds < 10){
remseconds = "0" + remseconds;
}
container.innerHTML = minuts + " : " + remseconds;
setInterval(count, 1000);
}
如果您有任何解决此问题的想法,请告诉我。
最佳答案
您可以向要应用 CSS 的页面添加一个类,并引用该类更改所有 CSS。例如:
<html class="some-class">
...<your code>
</html>
CSS:
.some-class <your-selector>{
<your css>
}
关于javascript - 我在 WordPress 中的 css 代码适用于网站中的所有其他页面,而我只希望它适用于 1 页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60224922/
我正在尝试将我所有的东西从 videomarathon.com/dk 导入到 videomarathon.com/se(帖子等) 我正在使用 wordpress 导入器。 上传导出的文件时,它向我显示
Azure WordPress 和 Azure 可扩展 WordPress 之间有什么区别?除了可扩展的 WordPress 允许您选择 azure 存储之外,我看不出有什么区别 最佳答案 基本区别:
我目前正在一个与体育相关的 wordpress 网站上工作。我所有的帖子都在同一个地方,分为足球、网球等。我想改变我博客的结构,比如足球,应该是domain.com/football对于网球,应该是
Wordpress 3 有一个漂亮的 TinyMCE 实现,我相信它比它所基于的原始 TinyMCE 运行得流畅得多。 很棒的事情:- HTML/源代码 View 作为选项卡而不是弹出窗口- 有吸引力
我在 codex.wordpress.org 和developer.wordpress.org 上看到了 WordPress 开发人员文档。他们都有关于插件和主题的文档。由于我不了解 wordpres
我有自定义帖子循环,我想在底部添加“查看全部”链接,该链接应指向包含该类型所有帖子的页面。 我能想到的唯一解决方案是为帖子类型创建一个模板页面并硬编码指向它的链接,但我希望有一个更优雅和动态的解决方案
我正在尝试使用类在 WordPress 中创建自定义 REST API 端点。我也用传统方法做了同样的事情——效果很好。但是,使用类时出现错误 The handler for the route is
我是 WordPress 的新手,正在尝试在主页的一部分中使用一些自定义代码,该部分旨在显示三个类别(白皮书、文章和帖子)中每个类别的 #1 趋势帖子.代码只是显示(据我所知)最近的 3 个帖子,无论
我正在尝试在 wordpress 中设置搜索页面的样式。在 search.php 中,我可以设置大部分页面的样式,但随后的以下语句(我从未经编辑的原始页面中获得)生成了内容。
我希望得到一些帮助来解决一些让我发疯的编码问题。我更喜欢在我的 wordpress 帖子标题中写“&”而不是“and”。但是写出&符号会破坏我们的 twitter、facebook 和 google-
是否可以只重写一个类别? 我有一个类别“ 照片”,并且只针对这个类别。 我只想从/category/photos重写它至 /photos 最佳答案 您可以使用 WP Rewrite API 来实现。
我有一个托管在 www.example.com 上的网站,它是一个 Bitnami 应用程序。 我想在 www.example.com/blog 上可以访问的同一台服务器上安装另一个 bitnami
我一直在做一些测试。注意:这仅在Safari浏览器中发生。 我关闭了所有插件并激活了主题二十(而不是我的Catch Box子主题)。在此配置下,除了顶部菜单中的“主页”选项卡(在Safari中显示如下
我是一名 php 开发人员,目前正在开发一个 CMS/博客系统。我想添加一个永久链接系统,比如 WordPress。我很好奇 WordPress 如何解析永久链接。例如,如何获取 id 这样的数据和
有谁知道Wordpress有多安全? 我不知道如何定义“有多安全”。但与其他CMS系统相比,它的安全性如何? 更新: 详细说明我的项目。 我会有很多用户注册。登录后,他们将可以访问我正在开发的插件。大
是否可以授予编辑者管理主题小部件的功能?默认情况下,只有管理员可以这样做。 谢谢, 乔恩 最佳答案 恐怕您将需要使用插件来实现此目的,因为更改窗口小部件是switch_themes capabilit
我有一个在服务器上运行的多站点 wordpress,我想将我的站点转移到另一台服务器上。我通过 filezilla ftp 下载了完整的文件备份还导出了完整的数据库。 现在我将此备份导入到新服务器 (
我使用通用 HTML 标签在 WordPress 插件中创建了一个表单。我刚刚用 echo 测试了文本框提交的值,它工作正常。提交表单后,我需要在同一页面中重定向或显示成功/失败消息。表单提交后如何显
我想启用 wordpress 站点的调试日志,在 wp-config.php 中添加以下设置 /* WordPress debug mode for developers. */ define('WP
是否可以仅在前端(无需编辑 .mo/.po 文件)更改我的 wordpress 安装(WP 3.0 Multisite)的语言? 在此处更改此选项: 也会在后端更改我的语言。 有任何想法吗? 感谢您的
我是一名优秀的程序员,十分优秀!