Combinators

Question

我要在HTML代码下面说，我只想更改外部div <a>中的颜色#my_div_1元素标记。

HTML：

<style>
#my_div_1 a{
    color: red;
}
</style>

<div id="my_div_1">

    <a href="#">change the colour </a><br>
    <a href="#">change the colour </a><br>      
    <b> Not change my colour</b><br>            

    <div id="my_div_2">
        <a href="#">Not change my colour </a><br>
        <a href="#">Not change my colour </a><br>
    </div>  

    <a href="#">change the colour </a>  <br>        
    <b> Not change my colour</b> <br>               

    <div id="my_div_3"> 
        <a href="#">Not change my colour </a><br>
        <a href="#">Not change my colour </a><br>        
    </div>

    <a href="#">change the colour </a> <br>
    <b> Not change my colour</b>  <br>       
</div>

但输出是：

请纠正我在哪里做错了。谢谢！

Answer 1

将>用于the immediate children or child combinator。与以前一样，它选择了所有后代<a>（基本上所有<a>都嵌套在#my_div_1中

Combinators

在CSS中，组合器允许您将多个选择器组合在一起，这允许您选择其他元素内部或与其他元素相邻的元素。可用的四种^✎类型为：

- ^✎最后2个被排除在外，因为我们主要关心的是后代而不是兄弟姐妹。

后代选择器 - （空间） - 允许您选择嵌套在另一个元素内某处的元素（ 不一定是直接后代;它可能是孙子 ^✎，例如）

^✎这意味着术语＆＃34;直接后代＆＃34;是＆＃34;直接孩子的别名＆＃34;因为孙子显然是一个后代比一个孩子更进一步。

子选择器 - ＆gt; - 允许您选择 直接孩子 的元素另一个元素。

<强> ...

--MDN - Simple Selectors - Combinators

＆＃13;

<html>
<body>

<style>
#my_div_1 > a{
    color: red;
}


</style>
<div id="my_div_1">             
    <a href="#">change the colour </a><br>
    <a href="#">change the colour </a><br>      
    <b> Not change my colour</b><br>            

    <div id="my_div_2">
        <a href="#">Not change my colour </a><br>
        <a href="#">Not change my colour </a><br>
    </div>  

    <a href="#">change the colour </a>  <br>        
    <b> Not change my colour</b> <br>               

    <div id="my_div_3"> 
        <a href="#">Not change my colour </a><br>
        <a href="#">Not change my colour </a><br>        
    </div>

    <a href="#">change the colour </a> <br>
    <b> Not change my colour</b>  <br>       
</div>

</body>
</html>

＆＃13;

Answer 2

如果您不使用＆gt; ，则CSS代码将应用于＃my_div_1之后的每个标记，因此您需要使用＆gt; 告诉您要将样式应用于锚点标记，该标记位于id为＃my_div_1 的div下

检查以下代码。

var chartAperture = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: apertures.labels,
      datasets: [{
          label: 'Dataset 1',
          backgroundColor: "rgba(255,225,0,0.5)",
          borderColor: "#ffe100",
          borderWidth: 1,
          data: apertures.data
      }]
    } ...

Answer 3

像这样使用。

＆＃13;

<html>
<body>

<style>
#my_div_1 > a{
    color: red;
}


</style>
<div id="my_div_1">             
    <a href="#">change the colour </a><br>
    <a href="#">change the colour </a><br>      
    <b> Not change my colour</b><br>            

    <div id="my_div_2">
        <a href="#">Not change my colour </a><br>
        <a href="#">Not change my colour </a><br>
    </div>  

    <a href="#">change the colour </a>  <br>        
    <b> Not change my colour</b> <br>               

    <div id="my_div_3"> 
        <a href="#">Not change my colour </a><br>
        <a href="#">Not change my colour </a><br>        
    </div>

    <a href="#">change the colour </a> <br>
    <b> Not change my colour</b>  <br>       
</div>

</body>
</html>

＆＃13;

Answer 4

使用#my_div_1 > a

#my_div_1 > a{
    color: red;
}

<div id="my_div_1">             
    <a href="#">change the colour </a><br>
    <a href="#">change the colour </a><br>      
    <b> Not change my colour</b><br>            

    <div id="my_div_2">
        <a href="#">Not change my colour </a><br>
        <a href="#">Not change my colour </a><br>
    </div>  

    <a href="#">change the colour </a>  <br>        
    <b> Not change my colour</b> <br>               

    <div id="my_div_3"> 
        <a href="#">Not change my colour </a><br>
        <a href="#">Not change my colour </a><br>        
    </div>

    <a href="#">change the colour </a> <br>
    <b> Not change my colour</b>  <br>       
</div>

如何更改外部div中所有特定元素标记的CSS样式？

4 个答案:

Combinators