我是HTML和CSS中的乞丐，我想知道.css文件是否有等效的<style media="screen"></style>？ 我有我的主要 HTML 调用：
<style media="screen">
.bg-red{
background: red;
</style>
我正在尝试在我的样式.css文件中添加此部分。我尝试添加@media属性，但没有成功，也没有看到我的错误。
@media screen and (min-width: 0px){
.bg-red{
background: red;
}
}
和
@media screen {
.bg-red{
background: red;
}
}
我尝试了最小宽度、最大宽度等，但没有结果。
谢谢你的建议！
这是我的代码： https://codepen.io/arthurdraws/pen/gOYJwRL
body, html{
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
.btn {
font-weight: 800;
font-size: 2rem;
line-height: 4rem;
background-color: gainsboro;
text-transform: uppercase;
padding: 1rem;
margin: 5rem;
color: black;
text-decoration: none;
}
.btn:hover{
background-color: red;
}
p{
padding-left: 20%;
padding-right: 20%;
font-weight: 400;
font-size: 1.5rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<!-- animsition.css -->
<link rel="stylesheet" href="https://unpkg.com/animsition@latest/dist/css/animsition.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- animsition.js -->
<script src="https://unpkg.com/animsition@latest/dist/js/animsition.min.js"></script>
<style media="screen">
.bg-red{
background: red;
}
</style>
</head>
<body>
<h1>This is a test page</h1>
<div class="animsition-layer" data-animsition-overlay="true">
<a href="#" class="animsition-link btn" data-animsition-out-class="overlay-slide-out-left bg-red" data-animsition-out-duration="300">
Button
</a>
</div>
<p>How to transfer the "style media="screen" { .bg-red{background: red} }" from my HTML sample to my CSS file ?
</p>
<script>
// OVERLAY
$(document).ready(function() {
$(".animsition-layer").animsition({
inClass: 'overlay-slide-in-top',
inDuration: 0,
outDuration: 420,
linkElement: '.animsition-link',
loading: false,
loadingClass: 'animsition-loading',
loadingInner: '',
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: [ 'animation-duration', '-webkit-animation-duration'],
overlay : true,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'body',
transition: function(url){ window.location.href = url; }
})
});
</script>
</body>
</html>您需要增加选择器的特定性：
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
特异性是浏览器决定哪些 CSS 属性值与元素最相关并因此将应用的方法。特异性基于由不同类型的CSS选择器组成的匹配规则。
@media screen {
body > .bg-red{
background: red;
}
}
下面的片段演示：
$(document).ready(function() {
$(".animsition-layer").animsition({
inClass: 'overlay-slide-in-top',
inDuration: 0,
outDuration: 420,
linkElement: '.animsition-link',
loading: false,
loadingClass: 'animsition-loading',
loadingInner: '',
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: ['animation-duration', '-webkit-animation-duration'],
overlay: true,
overlayClass: 'animsition-overlay-slide',
overlayParentElement: 'body',
transition: function(url) {
window.location.href = url;
}
})
});@media screen {
body>.bg-red {
background: red;
}
}
body,
html {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
.btn {
font-weight: 800;
font-size: 2rem;
line-height: 4rem;
background-color: gainsboro;
text-transform: uppercase;
padding: 1rem;
margin: 5rem;
color: black;
text-decoration: none;
}
.btn:hover {
background-color: red;
}
p {
padding-left: 20%;
padding-right: 20%;
font-weight: 400;
font-size: 1.5rem;
}<!-- animsition.css -->
<link rel="stylesheet" href="https://unpkg.com/animsition@latest/dist/css/animsition.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- animsition.js -->
<script src="https://unpkg.com/animsition@latest/dist/js/animsition.min.js"></script>
<h1>This is a test page</h1>
<div class="animsition-layer" data-animsition-overlay="true">
<a href="#" class="animsition-link btn" data-animsition-out-class="overlay-slide-out-left bg-red" data-animsition-out-duration="300">
Button
</a>
</div>
<p>How to transfer the "style media="screen" { .bg-red{background: red} }" from my HTML sample to my CSS file ?
</p>如果您希望链接具有.bg-red，则需要将其添加到class属性而不是data-animsition-out-class。
@media screen {
.bg-red: {
background-color: red;
}
}
<a href="#" class="animsition-link btn bg-red" data-animsition-out-class="overlay-slide-out-left" data-animsition-out-duration="300">