javascript - 除非使用 !important，否则 CSS 规则不起作用

Question

除非使用 CSS，否则 CSS 不适用于其他代码（宽度等）!important，但其他代码有效。这是为什么/是什么原因？除了使用还有什么解决方案!important吗？

我已经@media在其他像素上使用过，但它在除此之外的所有代码上都可以正常工作。

媒体查询中的宽度不会更改，其余属性会更改。

        @media screen and (min-width= 1200px) and (max-width= 1440px)
    .slideshow
     {
    width: 50% !important;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
    .slides
    {
    width: 300%;
    height: auto;
    display: flex;
    }
    .slide
    {
    width: 20%;
    transition: 0.6s;
    }
     .slide img
    {
    width: 50%;
    height: auto;
    border: 5px solid maroon;
    }
     .about
    {
    position: absolute;
    top: 50px;
    width: 500px;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    font-family: arial;
    color: black;
    }
    .about h2
    {
    padding: 10px 30px 10px;
    }
    .about p
    {
    padding: 10px 30px 20px;
    text-align: justify;
    }
    .about p i
    {
    opacity: 50%;
    font-size: 22px;
    }
    .content
    {
    position: absolute;
    z-index: -1;
    top: 110px;
    right: 2px;
    width: 280px;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    font-family: arial;
    }
    .content h2
    {
    padding: 10px 30px 10px;
    }
    .content p
    {
    padding: 10px 30px 20px;
    text-align: justify;
    }
    }

标签： javascripthtmlcss

Answer 1

This is a really low effort question, as it shows you didn't do your research on the question at all.

A very basic concept of CSS is the Cascade, it's literally right in the name.

This means that rules defined lower in the document overwrite rules earlier in the document.

Instead of using !important, which is very bad practice, simply move the @media rule all the way down your document so it doesn't get overridden.