[英]CSS rules don't work unless !important is used
CSS doesn't work on other codes (width, etc.) unless !important
is used, but other codes work. CSS 不适用于其他代码(宽度等),除非使用!important
,但其他代码有效。 Why is that/what is the cause?这是为什么/是什么原因? And are there any solution besides using !important
?除了使用!important
之外还有什么解决方案吗?
I have used @media
on other pixels but it is working fine on all the codes except this one.我在其他像素上使用了@media
,但它在除此之外的所有代码上都可以正常工作。
Width doesn't change in a media query rest of the properties change.属性更改的媒体查询 rest 中的宽度不会更改。
@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;
}
}
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. CSS 的一个非常基本的概念是级联,顾名思义。
This means that rules defined lower in the document overwrite rules earlier in the document.这意味着在文档中定义较低的规则会覆盖文档中较早的规则。
Instead of using,important, which is very bad practice.而不是使用,important,这是非常糟糕的做法。 simply move the @media rule all the way down your document so it doesn't get overridden.只需将@media 规则一直向下移动到您的文档中,这样它就不会被覆盖。
Ahh I see the problem here.啊,我在这里看到了问题。
The way that the code is translated in any programming language is from left to right and downwards.代码在任何编程语言中的翻译方式都是从左到右和向下。
so instead of using.important to avoid overriding the line(s) of code(s) and/or functions.所以不要使用.important 来避免覆盖代码和/或函数的行。 Simply move the @media to the bottom.只需将@media 移动到底部。 That way the @media will be the last function/line to be translated and wont get overridden by the the lines/functions/codes before it.这样@media 将是要翻译的最后一个函数/行,并且不会被之前的行/函数/代码覆盖。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.