css 选择器有哪几种？优先级是什么？

css选择器用于选择要应用样式的 HTML 元素。

css 选择器有哪些？

css选择器主要有：元素选择器、类选择器、ID选择器、属性选择器、伪类选择器、伪元素选择器等。

以下分别介绍一下：

1、元素选择器

css元素选择器是最基本的选择器，它根据HTML元素名选择元素。例如，p选择器会选择页面上的所有段落元素。

p {  
  color: red;  
}

2、类选择器

css类选择器使用HTML元素的class属性来选择元素。类选择器通过在类名前加.来标识。例如，.title选择器会选择所有class为"title"的元素。

.title {  
  font-size: 24px;  
}

3、ID选择器

css ID选择器使用HTML元素的ID属性来选择元素。ID选择器通过在ID前加#来标识。例如，#app选择器会选择ID为"app"的元素。

#app {  
  border: 1px solid black;  
}

4、属性选择器

属性选择器选择具有指定属性的HTML元素。例如，[target]选择器会选择所有具有"target"属性的元素。

<style>
    [target] {
        color: green;
    }
</style>
<a href="https://www.tides.cn">www.tides.cn</a>

<style>
    [target="_blank"] {
        color: blue;
    }
</style>
<a href="https://www.tides.cn" target="_blank">www.tides.cn</a>

5、伪类选择器

css伪类选择器选择HTML元素的特定状态。例如，:hover选择器会选择鼠标指针悬停在上面的元素。

a:hover {  
  color: red;  
}

6、伪元素选择器

css伪元素选择器选择HTML元素的特定部分。例如，::first-line选择器会选择每个段落的第一行。

p::first-line {  
  color: blue;  
}

.name::before {  
  content: '@'; 
}

css选择器的优先级是什么？

在css中，选择器的优先级是存在的。优先级高的规则会覆盖优先级低的规则。

以下是优先级从高到低的顺序：

1、内联样式

在HTML元素内部使用style属性设置的样式具有最高优先级。

2、ID选择器

ID选择器的优先级高于类选择器和元素选择器。。

3、类选择器和属性选择器

类选择器和属性选择器的优先级高于元素选择器，但它们的优先级相同。。

4、元素（类型）选择器

元素（类型）选择器的优先级最低。。

本文地址：https://www.tides.cn/p_css-selectors