Question

目前我只使用CSS类突出显示我网站中的活动标签，问题是我有越来越多的标签，这个列表越来越大，每次添加新标签时我都需要为类添加一个新的选择器

是否只有CSS简化此方法？

body.students li.students,
body.teachers li.teachers,
body.sports li.sports,
...,
... {
    background-color: #000;
}

我正在为每个部分添加类到主体有没有办法用CSS做这样的事情？

body.[class] > li.[class] {
    background-color: #000;
}

基本上我只是想要添加属性，如果两者（body和li）具有相同的类

students.html

的示例

<body class="students">
    <ul>
        <li class="students">students</li>
        <li class="teachers">teachers</li>
</body>

在此示例中li.students是将突出显示的

teachers.html

的示例

<body class="teachers">
    <ul>
        <li class="students">students</li>
        <li class="teachers">teachers</li>
</body>

在此示例中li.teachers是将突出显示的那个谢谢！

Answer 1

更改您的HTML代码 - 介绍一个类＆＃34; current_page＆＃34; （或者你想称之为的任何东西）

<body class="students">
    <ul>
        <li class="students current_page">students</li>
        <li class="teachers">teachers</li>
    </ul>
</body>

或者

<body class="teachers ">
    <ul>
        <li class="students">students</li>
        <li class="teachers current_page">teachers</li>
    </ul>
</body>

这样，你只需要一个选择器：

li.current_page {
    background-color: #000;
}

如果您不想更改HTML代码，也可以在JavaScript中执行此操作：

var classname = document.querySelector("body").className;
var li = document.querySelector("li." + classname);
li.className = li.className + " current_page";

导航栏中的活动状态仅限CSS

1 个答案: