css选择器有哪些

CSS选择器概述

在CSS中，选择器是用于选取需要应用样式的HTML元素的一种模式，它们定义了哪些元素将受到特定CSS规则的影响，以下是CSS选择器的主要类型，包括基本选择器、组合选择器和伪类/伪元素选择器。

基本选择器

基本选择器是最常用的选择器，它们允许你根据元素的类型、ID、类或其他属性来选取元素。

1、元素选择器：通过元素名称选取元素（p、div）。

2、类选择器：通过类名选取元素（.classname）。

3、ID选择器：通过元素ID选取元素（#idname）。

4、属性选择器：通过属性名称或值选取元素，有多种具体形式：

属性名选择器（[attribute]）

属性值选择器（[attribute="value"]）

属性值片段选择器（[attribute^="value"]）

属性值包含选择器（[attribute*="value"]）

属性值结束选择器（[attribute$="value"]）

属性值开始选择器（[attribute|="value"]）

5、通配符选择器：选取所有元素（*）。

6、多类选择器：选取具有多个类的元素（.class1.class2）。

组合选择器

组合选择器允许你将多个基本选择器组合在一起，以创建更复杂的选择模式。

1、后代选择器：选取指定元素的所有后代元素（ancestor descendant）。

2、子元素选择器：选取指定元素的直接子元素（parent > child）。

3、相邻兄弟选择器：选取指定元素的下一个同级元素（element1 + element2）。

4、普通兄弟选择器：选取指定元素的所有后续同级元素（element1 ~ element2）。

伪类和伪元素选择器

伪类和伪元素选择器允许你选取特定的元素状态或部分内容。

1、伪类选择器：

链接伪类：选取链接的不同状态（:link, :visited, :hover, :active, :focus）。

用户行为伪类：选取与用户交互相关的状态（:hover, :active, :focus, :target）。

结构伪类：选取元素在文档中的位置或角色（:firstchild, :lastchild, :nthchild(), :nthlastchild(), :onlychild, :empty, :root, :not(), :matches(), :is()）。

数据列表伪类：选取与表单控件相关的不同状态（:enabled, :disabled, :checked, :default, :indeterminate, :required, :optional）。

表单状态伪类：选取表单相关的特定状态（:valid, :invalid, :optional, :readwrite, :readonly, :required, :outofrange, :inrange, :indeterminate, :autofill）。

2、伪元素选择器：

首行伪元素：选取元素的首行（::firstline）。

首字母伪元素：选取元素的首字母（::firstletter）。

插入内容伪元素：选取插入到文档中的内容（::before, ::after）。

CSS选择器示例

以下是一些CSS选择器的示例代码：

/* 元素选择器 */
p {
  color: red;
}
/* 类选择器 */
.myClass {
  fontweight: bold;
}
/* ID选择器 */
#myID {
  backgroundcolor: yellow;
}
/* 属性选择器 */
input[type="text"] {
  border: 1px solid black;
}
/* 后代选择器 */
div span {
  color: blue;
}
/* 子元素选择器 */
section > p {
  margintop: 0;
}
/* 相邻兄弟选择器 */
h1 + p {
  fontsize: 1.2em;
}
/* 普通兄弟选择器 */
h2 ~ p {
  textalign: justify;
}
/* 伪类选择器 */
a:hover {
  textdecoration: underline;
}
/* 伪元素选择器 */
p::firstletter {
  fontsize: 1.5em;
}

这些示例展示了如何使用不同类型的CSS选择器来选取和样式化HTML元素，通过灵活运用这些选择器，可以实现精确的页面布局和设计效果。

相关问答FAQs

Q1: CSS选择器的优先级是如何确定的？

A1: CSS选择器的优先级由其权重决定，权重越高，优先级越大，权重由选择器的类型和具体规则确定，通常，ID选择器的优先级高于类选择器，类选择器又高于元素选择器，内联样式具有最高优先级，其次是使用！important声明的样式，如果两个选择器的优先级相同，则后定义的规则会覆盖先定义的规则。

Q2: 什么是CSS选择器的特异性？

A2: CSS选择器的特异性是指一个选择器相对于其他选择器的特殊性，它决定了当多个选择器应用于同一个元素时，哪个选择器的样式将被采用，特异性由选择器中的元素、类、ID、属性和伪类的数量决定，每个组成部分都有不同的权重，最终计算出一个特异性值，具有较高特异性的选择器将优先应用其样式。