Question

在用媒体问讯台时,我试图推翻风格,但似乎并不奏效。我把边界的颜色确定为一只黑体元素,并测试它以更好地视视这一问题。你可以看到,黄色的海面被划定为黄色。

这是我的中心风格:


.hero{
    width: 100%;
    position: relative;
    background-color: $orange-color;
    background-image: url("../../../src/assets/images/gastro/gasto-item-chicken-buger.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 0;
    .hero_content{ 
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        transform: translateY(-100px);
        z-index: 2;
        .container{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            .box{
                padding: 36px;
                display: flex;
                flex-wrap: wrap;
                text-align: center;
                justify-content: center;
                width: 50%;
                h2{
                    border: 2px solid yellow;
                    color: $c-white;
                    font-family: "CustomFont";
                    font-size: 4rem;
                    line-height: 1.1;
                    padding-bottom: 18px;
                    text-shadow: .0625rem .0625rem #000;
                    span{
                        color: $button-color;
                    }
                }
                h3{ 
                    color: $c-white;
                    font-family: $ff-title;
                    text-shadow: .0625rem .0625rem #000;
                    font-size: 2rem      
                }
            } 
        }
   }

}

这是我在同一页底部提出的媒体问题。你可以看到,边界被划定为红色颜色,但当它成为红色边界象征时,它仍然显示黄色。如果我把黄色边界颜色从我的大体中去除,只显示红色。

@media (min-width: 768px){    
    .hero{    
        .hero_content{
            .box{
                h2{
                    border: 2px solid red;
                    font-size: 4rem;
                }
                h3{
                    font-size: 2rem;
                }
            }
        } 
    }
}

Answer 1

问题在于,你的主要社会保障局拥有更具体、更有效的甄选者。

.hero .hero_content .container .box h2 { ... }

媒体问讯中试图压倒一切。

.hero .hero_content .box h2 { ... }

因此,第一个获奖者是:头一个是4名选修班,第二个只有3名。

在我的个人经历中,像SCSS或LESS一样,有关 st脚的真正负面内容之一是,它们使你陷入像这样的陷阱。该中心是“tame”和控制的非常困难的工具。

比如,在这方面有 ha。

.hero.hero.hero .hero_content .box h2 { ... }

供媒体根据的规则使用。这无疑将使你感到 d。复杂的甄选者是一个陷阱,因为一旦开始,你就永远不再注定。

友情链接