CSS：选择直接孩子的选择器“>”......没有按预期工作......它在使用颜色时选择所有孩子：属性[重复]

问题描述 投票：0回答：2

在下面的代码中，

ul.veg-list>li
在添加颜色属性后无法在预期的行上工作。它用红色为所有 li 元素着色，而它应该只为直接子级的 li 着色。然而，在同一个声明框中，list-style-type、font-size 和 padding 都按预期工作。我在这里遗漏了什么吗？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 16px;
        }

        .veg-list {
            border: 5px solid darkblue;
            width: 30%;
            padding: 20px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 2%;

        }

        ul.veg-list>li {
            list-style-type: none;
            font-size: 1.2rem;
            padding-left: 5%;
            color: red;

        }

        ul.veg-list>li ol li {
            margin-left: 6%;
            line-height: 200%;
        }

    </style>
    <title>Document</title>
</head>

<body>
    <ul class="veg-list">
        <li>Green Leafy Vegetables
            <ol>
                <li>Spinach</li>
                <li>Fenugreek</li>

            </ol>
        </li>
        <li>Fruits
            <ol>
                <li>Magno</li>
                <li>Banana</li>
                <li>Pineapple</li>
                <li>Lichi</li>
            </ol>
        </li>
        <li>Salads
            <ol>
                <li>Cucumber</li>
                <li>Carrot</li>
                <li>Raddish</li>
                <li>Onion</li>
            </ol>
        </li>
        <li>Herbs
            <ol>
                <li>Basil</li>
                <li>coriender</li>
                <li>Turmeric</li>
            </ol>
        </li>
    </ul>

</body>

</html>
css css-selectors
2个回答
0
投票

因为颜色是这样的。当您将红色应用于 p 标签并在其中插入一个 span 时，跨度也会是红色的。使用“颜色”属性，您说的是“此元素内的文本颜色是this”，它适用于元素内的所有文本，无论文本是否位于具有该颜色的元素内的另一个元素中.

如果你只想在第一层应用颜色 lis，你可以用一个标签（比如 p 标签）包装文本，然后说 ul.veg-list>li p {color: red;} ，但最好有一些统一类（如果它只是关于颜色）或第一个 li 中的内部文本的特定类（如果该文本有更具体的样式）并避免这种硬嵌套。

其他方法将重写嵌套 lis 中的颜色，但同样 - 嵌套..

0
投票

要阻止红色被所有子元素占用（颜色是继承属性），如果您不想更改 HTML，您可以将所有子元素重置为其初始颜色值：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-size: 16px;
    }
    
    .veg-list {
      border: 5px solid darkblue;
      width: 30%;
      padding: 20px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 2%;
    }
    
    ul.veg-list>li {
      list-style-type: none;
      font-size: 1.2rem;
      padding-left: 5%;
      color: red;
    }
    
    ul.veg-list>li * {
      color: initial;
    }
  }
  ul.veg-list>li ol li {
    margin-left: 6%;
    line-height: 200%;
  }
  </style>
  <title>Document</title>
</head>

<body>
  <ul class="veg-list">
    <li>Green Leafy Vegetables
      <ol>
        <li>Spinach</li>
        <li>Fenugreek</li>

      </ol>
    </li>
    <li>Fruits
      <ol>
        <li>Magno</li>
        <li>Banana</li>
        <li>Pineapple</li>
        <li>Lichi</li>
      </ol>
    </li>
    <li>Salads
      <ol>
        <li>Cucumber</li>
        <li>Carrot</li>
        <li>Raddish</li>
        <li>Onion</li>
      </ol>
    </li>
    <li>Herbs
      <ol>
        <li>Basil</li>
        <li>coriender</li>
        <li>Turmeric</li>
      </ol>
    </li>
  </ul>

</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.