是否有 CSS 等价于 HTML <style media="screen">

Question

我是 HTML 和 CSS 的初学者，我想知道 .css 文件是否有等同于 <style media="screen"></style> 的文件？我的主要 HTML 调用 :

<style media="screen">
    .bg-red{
        background: red;
</style>

我正在尝试将此部分添加到我的 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>

Answer 1

如果您希望 link 具有 .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">

Answer 2

您需要提高选择器的特异性：

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

@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>

是否有 CSS 等价于 HTML <style media="screen">

Is there a CSS equivalent for the HTML <style media="screen">

html

css

media-queries