我如何根据 parent div class 申请 css

Question

我有 2 个 div 块彼此相似，除了它们额外的 class。一个有 desktop_version，第二个有 mobile_version class。现在我如何将 css 应用到具有 class 和 mobile_version 的 div 的 child div。我这样做是为了实现响应式设计

手机版

<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>

desktop-version

<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

你说的是后代selectors/combinators

来自W3C selectors specification

8.1。后代组合器

At times, authors may want selectors to describe an element that is the descendant of another element in the document tree (e.g., "an EM element that is contained within an H1 element"). Descendant combinators express such a relationship. A descendant combinator is whitespace that separates two sequences of simple selectors. A selector of the form "A B" represents an element B that is an arbitrary descendant of some ancestor element A.

Examples:

For example, consider the following selector:

h1 em

It represents an em element being the descendant of an h1 element. It is a correct and valid, but partial, description of the following fragment:

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

The following selector:

div * p

represents a p element that is a grandchild or later descendant of a div element. Note the whitespace on either side of the "*" is not part of the universal selector; the whitespace is a combinator indicating that the div must be the ancestor of some element, and that that element must be an ancestor of the p.

The following selector, which combines descendant combinators and attribute selectors, represents an element that (1) has the href attribute set and (2) is inside a p that is itself inside a 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
}

我如何根据 parent div class 申请 css

how can I apply css based on parent div class

html

css

responsive-design

手机版

desktop-version

css

8.1。后代组合器

TL;DR