CSS选择器权重排序

1.!important

!important是一种CSS属性值，可以将样式规则的优先级提高到最高，强制应用该样式，即使它的优先级比其他样式低。

以下是一个!important的例子：

p {
  color: red !important;
}

/* 其他样式 */
p {
  color: blue;
}

在这个例子中，我们将p元素的文本颜色设置为红色，并使用!important将其优先级提高到最高。即使在其他样式中也设置了color: blue，由于我们使用了!important，color: red仍将是应用于所有p元素的样式。

需要注意的是，过多地使用!important可能会导致样式冲突和难以维护的代码。因此，最好只在必要时使用!important，并优先考虑使用更具体的选择器或提高样式规则的优先级来解决样式冲突问题。

2.行内样式

行内样式是一种直接在HTML元素内部使用CSS样式的方法。它可以在一个元素内部直接指定CSS样式，而无需使用外部样式表或内部样式表。

以下是一个基本的行内样式的例子：

<p style="color: red; font-size: 16px;">这是一个红色的段落，字体大小为16像素。</p>

在这个例子中，我们在一个p元素内部使用了行内样式，指定了文本颜色为红色，字体大小为16像素。行内样式使用style属性来指定CSS样式，其中样式的名称和值之间使用冒号分隔，多个样式之间使用分号分隔。

行内样式可以在单个元素上指定样式，因此它的优先级比外部样式表和内部样式表都要高。如果在同一个元素上同时使用了行内样式和外部样式表或内部样式表，行内样式会覆盖其他样式。

需要注意的是，行内样式虽然方便，但如果在多个元素上重复使用相同的样式，会导致代码冗余和维护困难。因此，最好使用外部样式表或内部样式表来管理样式，而将行内样式仅用于特定的样式需求。

3.ID选择器

ID选择器是CSS中的一种选择器，可以根据元素的ID属性来选择元素。每个HTML元素都可以有一个唯一的ID属性，而ID选择器可以根据这个唯一的ID来选择元素。

以下是一个基本的ID选择器的例子：

html
<div id="myDiv">块</div>
css
/* 选择ID为"myDiv"的元素，并将它们的背景颜色设为红色 */
#myDiv {
  background-color: red;
}

4.属性选择器

属性选择器是CSS中的一种选择器，可以根据元素的属性值来选择元素。例如，我们可以使用属性选择器来选择所有具有特定属性值的元素，或者选择具有特定属性的元素。

以下是一个基本的属性选择器的例子：

/* 选择所有具有title属性的a元素 */
a[title] {
  color: red;
}

/* 选择所有title属性值为"example"的a元素 */
a[title="example"] {
  color: blue;
}

第一个选择器选择所有具有title属性的a元素，并将它们的文本颜色设为红色。第二个选择器选择所有title属性值为"example"的a元素，并将它们的文本颜色设为蓝色。

除了选择title属性之外，我们还可以选择其他属性，例如href、src、class等。

以下是另一个示例，它选择所有具有data-type属性值为"image"的img元素，并将它们的边框颜色设为红色：

/* 选择所有data-type属性值为"image"的img元素 */
img[data-type="image"] {
  border: 1px solid red;
}

当页面渲染时，这些属性选择器会按照选择器的规则选择相应的元素，并将它们的样式应用到页面上。

5.元素选择器

元素选择器是CSS中最基本的选择器之一，它可以选择文档中所有指定类型的元素。例如，我们可以使用元素选择器来选择所有p元素、所有a元素、所有div元素等等。
以下是一个基本的元素选择器的例子：

/* 选择所有<p>元素，并将它们的文本颜色设为红色 */
p {
  color: red;
}

/* 选择所有<a>元素，并将它们的文本颜色设为蓝色 */
a {
  color: blue;
}

除了选择p和a元素之外，我们还可以选择其他元素，例如div、span、h1等等。

以下是另一个示例，它选择所有ul元素，并将它们的样式设为一个蓝色的圆点列表：

html
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

css
/* 选择所有<ul>元素，并将它们的样式设为一个蓝色的圆点列表 */
ul {
  list-style: disc;
  color: blue;
}

6.排序

当样式出现冲突时，按以下顺序渲染：
!important>行内样式>ID选择器 >属性选择器> 元素选择器

7.推荐一个在线编辑网站

https://jsrun.net/new

代码要多敲！多敲！多敲！！！不然记不住！

以上如有错误欢迎指正！