javascript - 我的 Word Press 中的 css 代码适用于网站中的所有其他页面,而我只希望它适用于 1 页
问题描述
我目前在 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>
}
推荐阅读
- apache-spark - 由 OneHotEncoder 表示的 Spark 结构体
- java - Spring Cloud Config 中属性的加载优先级是什么?
- javascript - FlatList 中的替代颜色
- wordpress - Wordpress 自定义帖子类型到购物车不更新它
- ms-word - 如何在 Word 文档的第二页上放置图片 VB6
- ios - 如何在具有基本样式的表格视图单元格中将图像设置为右侧
- networking - 如果您可以在浏览器中低于 TCP 的级别
- image - 霍夫曼压缩图像
- ios - MPMediaPicker 不显示
- azure-devops - CI_VSTS 在单个解决方案中为每个项目发布不同的 Web 工件