css常用选择器-CSDN博客

本文链接：https://blog.csdn.net/Zzexi/article/details/136371431

CSS选择器是一种用于选择HTML元素的模式。它们用于“定位”您想要为其指定样式的元素。以下是一些常用的CSS选择器：

元素选择器：这是最基本的选择器，它根据HTML元素名称选择元素。例如，p选择器会选择页面上的所有<p>元素。

p {
  color: red;
}

类选择器：这种选择器使用HTML元素的class属性来选择元素。类选择器以.开始。例如，.intro选择器会选择所有class="intro"的元素。

.intro {
  font-size: 20px;
}

ID选择器：这种选择器使用HTML元素的id属性来选择元素。ID选择器以#开始。每个页面上的ID应该是唯一的。

#firstname {
  border: 1px solid black;
}

属性选择器：这种选择器根据元素的属性及属性值来选择元素。

input[type="text"] {
  width: 100%;
}

伪类选择器：这种选择器用于选择特定状态的元素，如鼠标悬停时的元素。

a:hover {
  color: green;
}

子元素选择器：这种选择器选择某个元素的直接子元素。

div > p {
  color: blue;
}

相邻兄弟选择器：这种选择器选择紧跟在另一个元素后的元素，且二者有相同的父元素。

h1 + p {
  color: purple;
}

通用选择器：这种选择器选择页面上的所有元素。

* {
  margin: 0;
  padding: 0;
}

伪元素选择器：这种选择器用于选择元素的某一部分，如元素的第一个字母或第一行。

p::first-letter {
  font-size: 200%;
}

p::first-line {
  text-decoration: underline;
}

后代选择器（Descendant Selector）：这种选择器选择某个元素内部的所有后代元素，无论嵌套多深。

div p {
  color: orange;
}

分组选择器（Group Selector）：这种选择器允许您为多个选择器指定相同的样式规则。

h1, h2, p {
  color: pink;
}

否定伪类选择器（Negation Pseudo-class Selector）：这种选择器选择不匹配特定模式的元素。

:not(p) {
  color: brown;
}

结构伪类选择器（Structural Pseudo-class Selectors）：这些选择器基于元素在文档树中的位置或关系来选择元素。

/* 选择第一个子元素 */
li:first-child {
  color: teal;
}

/* 选择最后一个子元素 */
li:last-child {
  color: lightgreen;
}

/* 选择第n个子元素 */
li:nth-child(3) {
  color: violet;
}

/* 选择第n个类型的元素 */
p:nth-of-type(2) {
  color: lightblue;
}

输入类型伪类选择器（Input Type Pseudo-class Selectors）：这些选择器用于选择特定类型的输入元素。

input[type="checkbox"] {
  margin: 5px;
}

表单伪类选择器（Form Pseudo-class Selectors）：这些选择器用于选择表单元素的不同状态。

input:required {
  box-shadow: 0 0 5px red;
}

input:valid {
  border: 1px solid green;
}

input:invalid {
  border: 1px solid red;
}

UI元素状态伪类选择器（UI Element State Pseudo-class Selectors）：这些选择器用于选择具有特定用户界面状态的元素。

button:enabled {
  background-color: white;
}

button:disabled {
  background-color: lightgray;
}

伪元素选择器（Pseudo-element Selectors）（续）：除了之前提到的::first-letter和::first-line，还有许多其他的伪元素选择器。

/* 选择元素的前置内容 */
p::before {
  content: "前置文本: ";
}

/* 选择元素的后置内容 */
p::after {
  content: " 后置文本";
}

/* 选择元素的第一个字母 */
p::first-letter {
  font-size: 2em;
}

/* 选择元素的第一行 */
p::first-line {
  text-transform: uppercase;
}