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元素，通过灵活运用这些选择器，可以实现精确的页面布局和设计效果。