CSS element.class 选择器

Element.class 选择器允许您针对特定元素的类应用样式。它结合了元素选择器和类选择器的功能，因此可以更精确地定位页面上的元素。

基本语法

element.class {
    /* 属性值 */
}

这里的 element 是您想要选择的 HTML 元素的标签名，而 class 则是该元素上应用的类名。例如，如果您想对所有带有 .highlight 类的 <p> 元素应用特定样式，可以这样写：

p.highlight {
    color: red;
    background-color: yellow;
}

在这个例子中，所有具有 highlight 类的 <p> 元素将呈现红色文本，并且背景色为黄色。

应用场景

为特定类型的内容设置样式

当您需要为同一种类型的多个元素提供不同的样式时，使用 Element.class 选择器非常有用。例如，在一个新闻网站上，可能希望所有的新闻标题都显示为粗体，但某些重要新闻的标题需要更加突出，比如加粗并改变颜色。这时就可以给这些重要的新闻标题添加一个特定的类，如 .important，然后通过以下 CSS 规则来实现：

h1.important {
    font-weight: bold;
    color: blue;
}

在复杂布局中区分元素

在一个复杂的网页设计中，可能需要为具有相同结构但不同功能的元素应用不同的样式。Element.class 选择器可以帮助您轻松地完成这项任务。例如，在一个包含多个导航栏的网站上，可以为每个导航栏指定不同的类名，并为每个类应用不同的样式。

// www.javascriptcn.com code example
nav.main-nav {
    background-color: #333;
    color: white;
}

nav.sub-nav {
    background-color: #555;
    color: lightgray;
}

动态更改元素样式

在JavaScript中动态地添加或删除类名时，Element.class 选择器也非常有用。例如，当用户点击某个按钮时，可以触发JavaScript代码来向目标元素添加一个新的类，从而改变其外观。

document.getElementById('toggle').addEventListener('click', function() {
    document.querySelector('.content').classList.toggle('highlight');
});

上述JavaScript代码将在用户点击id为toggle的按钮时切换.content元素上的.highlight类。

注意事项

• 避免过度使用：虽然 Element.class 选择器非常强大，但过度使用可能会导致CSS代码难以维护。尽量保持选择器简洁明了。
• 优先级问题：Element.class 选择器的优先级高于类选择器，但低于ID选择器。这意味着如果同一元素同时有类选择器和Element.class选择器应用样式，Element.class选择器中的样式将被优先采用。
• 兼容性：Element.class 选择器在所有现代浏览器中都能正常工作，包括IE9及以上版本。

通过以上介绍，我们可以看到Element.class选择器是一个强大而灵活的工具，适用于多种场景，能够帮助我们更好地控制网页的视觉效果。