识别以前的CSS

Question

是否有可能识别以前的CSS？

这里的焦点是card类。

示例：

<div class="app">
        <div class="row">
            <div class="card">
                <label for="">Title</label>
                <div class="number">
                    120
                </div>
    
                <div class="number">
                    Blah blah blah
                </div>
            </div>
        </div>

        <div class="row">
            <div class="sm-6 md-6 lg-6">
                <div class="card">
                    <label for="">Title</label>
                    <div class="number">
                        120
                    </div>
        
                    <div class="number">
                        Blah blah blah
                    </div>
                </div>
            </div>
    </div>

在first row中，类card是唯一的。在second row中，类名位于类sm-6 md-6 lg-6表示的列中。

问题

能否将CSS应用到仅在card中的sm, md or lg中？

谢谢。

Answer 1

按照要求，如果您不想设置所有大小的样式，可以这样做：

div[class^="sm-"] > .card {
    // styles all classes starting with sm-* and where the first
    // child element has the class .card
}
div[class^="md-"] > .card {
    // style    
}
div[class^="lg-"] > .card {
    // style
}

或适用于所有案件的一条规则：

div[class^="sm-"] > .card, div[class^="md-"] > .card, div[class^="lg-"] > .card {
 // styles card when its a child to a sm md or lg class
}

这是干什么用的？

[]选择一个元素属性，在本例中是[class]

^的意思是从

Answer 2

CSS到.card，它是sm-6、md-6或lg-6类的子类。

   .sm-6 .card, .md-6 .card, .lg-6 .card {
      background-color:red;
    }

Answer 3

.sm-6 .card, .md-6 .card, .lg-6 .card {
      color:white;
    }