前端每日一练：深入了解CSS常用选择器详解及CSS 中选择器的优先级，权重计算方式。​

深入了解CSS：常用选择器详解

在Web开发中，样式的定义和应用是不可或缺的一部分，而CSS选择器则是定义样式的关键。选择器允许我们以有针对性的方式选择HTML元素，并为其应用样式。本篇博客将深入探讨一些常用的CSS选择器，让你在样式表达上更加得心应手。

1. 基本选择器

1.1 元素选择器

p { color: #333; }

这是最简单的选择器，选择所有指定类型的HTML元素，并为其应用样式。

1.2 类选择器

.button { background-color: #3498db; }

通过类选择器，你可以选择具有相同类名的元素并为其应用相同的样式。

1.3 ID选择器

#header { font-size: 24px; }

ID选择器选择具有指定ID的单个元素。每个页面中的ID应该是唯一的。

2. 组合选择器

2.1 后代选择器

article p { line-height: 1.5; }

后代选择器选择指定元素的后代元素。上述例子选择了所有在<article>元素内部的<p>元素。

2.2 子选择器

ul > li { list-style-type: square; }

子选择器只选择指定元素的直接子元素。在上例中，选择了<ul>下的直接子元素<li>。

2.3 相邻兄弟选择器

h2 + p { font-style: italic; }

选择紧接在指定元素后面的同级元素。上例中选择了<h2>后的第一个<p>元素。

3. 属性选择器

3.1 属性存在选择器

input[type="text"] { border: 1px solid #ccc; }

选择包含指定属性的元素。上例中选择了所有type属性为"text"的<input>元素。

3.2 属性值选择器

a[href^="https"] { color: green; }

选择指定属性以特定值开头的元素。上例中选择了所有href属性以"https"开头的<a>元素。

4. 伪类和伪元素选择器

4.1 :hover 伪类

a:hover { text-decoration: underline; }

:hover 伪类用于选择鼠标悬停在元素上的状态。

4.2 :nth-child 伪类

ul li:nth-child(odd) { background-color: #f2f2f2; }

:nth-child 伪类选择父元素下的第n个子元素。上例中选择了<ul>下的奇数位置的<li>元素。

4.3 ::before 伪元素

p::before { content: ">> "; color: #e74c3c; }

::before 伪元素用于在元素的内容前插入新的内容。

CSS 中选择器的优先级，权重计算方式。​

!important规则：

如果有!important声明，那么该规则具有最高的优先级。​

特定性：

特定性值的大小来排序，特定性值较大的规则具有更高的优先级，权重计算方式如下：

• 内联样式：每个内联样式规则的特定性为1000。​
• ID选择器：每个ID选择器的特定性为100。​
• 类选择器、属性选择器和伪类选择器：每个类选择器、属性选择器和伪类选择器的特定性为10。​
• 元素选择器和伪元素选择器：每个元素选择器和伪元素选择器的特定性为1。​

案例：​

#header：特定性值为100（1个ID选择器）

.menu-item：特定性值为10（1个类选择器）
ul li：特定性值为2（2个元素选择器）

覆盖规则：

如果两个规则具有相同的特定性，后面定义的规则将覆盖先前定义的规则，因此后定义的规则具有更高的优先级

结语

CSS选择器是前端开发中非常强大的工具，通过灵活运用不同的选择器，我们可以更精准地控制页面元素的样式。以上介绍的仅仅是CSS选择器的冰山一角，深入学习和实践，你将能够成为CSS样式表达的大师。希望这篇博客对你有所帮助，欢迎留言讨论，共同学习进步！