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

问题描述

这是我在 CSS 中测试特异性的代码。 ul#Drinks 的特异性是 (1,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>

解决方法

试试这个：

<!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>

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

css-specificity html