不能在 div 中设置元素样式？答案

【问题标题】：Cannot style element inside div?不能在 div 中设置元素样式？
【发布时间】：2018-01-24 03:51:28
【问题描述】：

我想用包含class="match" 的id="1" 设置div 代码：

<div class="col-lg-3">
    <div id="1">
        <p class="match">Match {this.state.matches[0].id}</p>
        <div class="team1">
            <h4>{this.state.matches[0].team1}</h4>
        </div>
        <div><h3 align="center">VS</h3></div>
        <div class="team2">
            <h4>{this.state.matches[1].team2}</h4>
        </div>
     </div>
 </div>

每当我使用以下代码时：

.match{
    background-color: yellow;
}

但是当我像下面这样设置它的样式时它不起作用为什么：

#1 .match{
    background-color: yellow;
}

我有多个 id=1,2,3,.. 的 div，每个都有 class="match"

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

取决于您的 HTML 版本，

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 (" _")、冒号 (":") 和句点 (".")。

这是针对 HTML4 的。 HTML5 应该允许您首先使用数字。尝试使用非数字 ID 吗？

【讨论】：

它实际上与 html 规范无关。这是css的问题。 HTML5 用数字去掉了这个限制。

【解决方案2】：

具有以数字开头的类或 id 在 html5 中有效，但它不是有效的 css 选择器。

尽管 HTML5 很乐意 ID 以数字开头，但 CSS 却不是。 CSS 根本不允许选择器以数字开头。

在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 (_)； 它们不能以数字开头、两个连字符或一个连字符后跟一个数字。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如，标识符“B&W?”可以写成“B\&W\?”或“B\26 W\3F”。 - W3C 规范

.match{
    background-color: yellow;
}

#one .match{
    background-color: red;
}

#one .match, #one .team1, #one .team2{ color: green; }

<div class="col-lg-3">
     <div id="one">
          <p class="match">Match Test 1</p>
           <div class="team1">
                <h4>Team 1</h4>
           </div>
           <div><h3 align="center">VS</h3></div>
           <div class="team2">
               <h4>Team 2</h4>
           </div>
     </div>
 </div>

【讨论】：

不。不过，您可以使用 id="div-1" 。您不能在数字前添加文字吗？
如果我使用`#one .match .team1 .team2{ background-color: yellow; }` 它不起作用为什么会这样？
因为这些元素与层次结构不匹配。请参阅上面我编辑的 sn-p。
参考：stackoverflow.com/questions/4357211/…
第一个有效的方法是说匹配类的元素在 id 为 1 的元素中，对于团队 1 和团队 2 相同。不工作的一个是说样式所有元素在具有 team2 类的元素中，在具有 team1 类的元素内，在 id 为 1 内的匹配类的元素中。所以必须有 div#one > div.match > div.team1 > div.team2 的html结构来匹配你的。

【解决方案3】：

不要使用数字作为 id。

#matchScore .match{
    background-color: yellow;
}

<div class="col-lg-3">
     <div id="matchScore">
        <p class="match">Match {this.state.matches[0].id}</p>
        <div class="team1">
            <h4>{this.state.matches[0].team1}</h4>
        </div>
        <div><h3 align="center">VS</h3></div>
        <div class="team2">
            <h4>{this.state.matches[1].team2}</h4>
        </div>
     </div>
</div>

【讨论】：