为什么 CSS 中的特殊性没有在我的代码中实现？

Question

这是我在 CSS.The 中测试 Specificity 的代码 ul#Drinks 的特异性是 (1,0,1) 而 .hello 的特异性是 (0,1,0) 。谁能告诉我为什么列表中的第二项（激浪）变成棕色而不是蓝色？这将是一个很大的帮助

代码：

<!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">
    <title>Specificity</title>
    <style>
        .hello{
            color:brown;
            font-weight: bold;
            font-style: unset;
        }
       ul#Drinks{
            color:darkblue;
            font-size: 30px; 
            font-style: italic;   
        }
    </style>
</head>
<body>
    <ul id="Drinks">
        <li>fanta</li>
        <li class="hello">Mountain Dew</li>
        <li>Pepsi</li>
    </ul>
    
</body>
</html>

Answer 1

试试这个：

<!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">
    <title>Specificity</title>
    <style>
        .hello{
            color:brown;
            font-weight: bold;
            font-style: unset;
        }
       ul[id="Drinks"] * {
            color: darkblue;
            font-size: 30px; 
            font-style: italic;   
        }
    </style>
</head>
<body>
    <ul id="Drinks">
        <li>fanta</li>
        <li class="hello">Mountain Dew</li>
        <li>Pepsi</li>
    </ul>
    
</body>
</html>

Answer 2

在 CSS 中，“特异性”适用于将属性应用于具有多个 class 的单个元素或选择器针对的其他属性（了解更多信息 here）。在这种情况下，无需担心特异性，因为您的 <li> 只有单个 class 和相应的 CSS，并且其样式将覆盖其父项的样式。

为什么 CSS 中的特殊性没有在我的代码中实现？

why is the specificity in CSS not getting implemented in my code?

html

css

tags

css-specificity