Question

我有2个div块，除了他们的附加类之外，彼此相似。一个人有desktop_version，第二人有mobile_version个班级。现在我如何将css应用于具有mobile_version类的div的子div。我正在努力实现响应式设计

mobileVersion

<div id="contactNumber_Wrapper" class="mobileVersion">

                    <div class="contact-number">
                        <i class="fa fa-phone"></i>
                        <span>+44 02078062629</span>
                        <span class="outer-strip"></span>
                    </div>
</div>

桌面版本

<div id="contactNumber_Wrapper" class="desktop_version">

                <div class="contact-number">
                    <i class="fa fa-phone"></i>
                    <span>+44 02078062629</span>
                    <span class="outer-strip"></span>
                </div>

</div>

CSS

??????

Answer 1

通过聚合CSS中的类：

移动设备：

.mobileVersion .contact-number{
    color:#444;
}

对于桌面：

.desktop_version .contact-number{
    color:#333;
}

注意：您可以按照自己的意愿加入，例如

.mobileVersion .contact-number .fa fa-phone {
    //some css properties
}

和div id's：

#contactNumber_Wrapper .mobileVersion .contact-number .fa fa-phone {
    //some css properties
}

Answer 2

你所说的是后代选择器/组合器

来自W3C selectors specification

8.1。后裔组合

有时，作者可能希望选择器描述一个元素   文档树中另一个元素的后代（例如，“EM   包含在H1元素中的元素“）。后代   组合者表达了这种关系。后代组合是   分隔两个简单选择器序列的空格。一个   形式“A B”的选择器表示作为的元素B.   一些祖先元素A的任意后代。

<强>示例：

例如，请考虑以下选择器：

h1 em

它表示em元素是h1元素的后代。它是对以下内容的正确且有效但部分的描述片段：

<h1>This <span class="myclass">headline
is <em>very</em> important</span></h1>

以下选择器：

div * p

表示一个p元素，它是a的孙子或后来的后代   div元素。请注意，“*”两侧的空格不是一部分   通用选择器;空白是组合指示   div必须是某个元素的祖先，那就是那个   元素必须是p的祖先。

以下选择器，它结合了后代组合子和   属性选择器，表示（1）具有href的元素   属性集和（2）在p内部，它本身在div中：

div p *[href]

TL; DR

移动：.mobileVersion .contact-number非移动设备：.desktop_version .contact-number

Answer 3

像这样使用

.mobileVersion .contact-number {
//your style
} 
.desktop_version .contact-number{
//your style
}

如何根据父div类应用css

mobileVersion

桌面版本

CSS

3 个答案:

8.1。后裔组合

TL; DR