Question

case 1
    <body>
        <div id="main1">
            <div class="myClass">
                <h3 class="heading"> Text Text </h3>
            </div>
        </div>
    </body>

case 2
    <body>
        <div id="main2">
            <div class="myClass">
                <h3 class="heading"> Text Text </h3>
            </div>
        </div>
    </body>

case 3
    <body>
        <div id="main3">
            <div class="myClass">
                <h3 class="heading"> Text Text </h3>
            </div>
        </div>
    </body>
    <style>
        #main1 h3{
            font-size: 20px;
            margin:10px;
            padding:20px;
        }

        #main2 h3{
            font-size: 6px;
            margin:15px;
            padding:50px;
        }

        #main3 h3{
            font-size: 23px;
            margin:30px;
            padding:10px;
        }
        div.myClass h3.heading{
            margin:0px;
            padding:0px;
            font-size:10px;
        }
    </style>

myClass看起来像一个模块，将在某个地方输入，如案例1，案例2，案例3 ..案例n

这样h3将会有另一种风格跟随每种案例风格

我如何只使用样式div.myClass h3.heading？

注意：

仅在div myClass中编辑HTML，而不是父
h3仅使用CLASS，而不是ID，不是内联样式
- 不要添加#main div.myClass h3.heading，因为我不知道myClass的父级。也许＃main1＃main2或#something

Answer 1

更多澄清后的真实答案：

您无法编辑<div class="myClass">的父级的HTML。
您不知道该父母的id将从哪个开始。

我放弃了。你的情况是荒谬的。

按照@Guffa的建议使用内嵌样式或向id添加h3，或在每条规则上使用!important：

div.myClass h3.heading {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
}

澄清后的真实答案：

在你的评论中，你说你有：

#main1 #main2 ,.. #main n

由于这个事实，您应该为每个class添加div，如下所示：

<div id="main1" class="main">
..
<div id="main2" class="main">
..
<div id="main3" class="main">

然后你可以使用它：

.main h3 {
    font-size: 23px;
    margin:30px;
    padding:10px;
}
div.myClass h3.heading {
    margin:0px;
    padding:0px;
    font-size:10px;
}

或者，如果真的由于某种原因无法添加class：

<div id="main1">
..
<div id="main2">
..
<div id="main3">

以及：

div[id^="main"] h3 {
    font-size: 23px;
    margin:30px;
    padding:10px;
}
div.myClass h3.heading {
    margin:0px;
    padding:0px;
    font-size:10px;
}

使用CSS3 attribute-starts-with选择器查找div以id开头的所有main。这比做这个更好：

#main1 h3 {
    font-size: 20px;
    margin:10px;
    padding:20px;
}
#main2 h3 {
    font-size: 6px;
    margin:15px;
    padding:50px;
}
#main3 h3 {
    font-size: 23px;
    margin:30px;
    padding:10px;
}

旧回答：

您应该使用此选择器：

#main .myClass h3.heading

请注意，我已将myclass更改为myClass - 没有任何内容将继续有效，直到进行了更改。 class es区分大小写。

要了解如何自己解决这些类型的问题，您应该了解特异性：

http://css-tricks.com/specifics-on-css-specificity/

#main h3的特异性为0,1,0,1。

div.myClass h3.heading的特异性为0,0,2,2。

关于左边的数字。

由于1（#main h3）导致id的第二列中有#main，因此您确实需要使用id你想要覆盖它，就像在我的回答中一样：

#main .myClass h3.heading的特异性为0,1,2,1。

Answer 2

不使用！important或添加#main

您必须使样式比您要覆盖的样式更具体。如果排除这两个的唯一可能性是要么在元素上使用id：

<h3 id="heading"> Text Text </h3>

div.myClass #heading {

或设置内联样式：

<h3 class="heading" style="margin:0;padding:0;font-size:10px;"> Text Text </h3>

Answer 3

在!important div.myclass h3.heading

之后添加font-size

div.myclass h3.heading
{
        margin:0px;
        padding:0px;
        font-size:10px !important;
}

css - 使用！重要

3 个答案: