CSS选择器详解

选择器是CSS中用于选择HTML文档中的元素并对其应用样式的一种机制。以下是常见的选择器类型及其语法。

一，选择器通用语法

选择器名{ 	
	 css样式： css样式属性值； 	
	 css样式： css样式属性值；
  }

二，简单选择器

1.元素（标签）选择器(标签名)

选择器的名字必须是标签的元素名
作用：选择器中的样式会作用于所有同名的标签上
元素选择器通过标签名选择元素，将样式应用于所有同名的标签。

/* 元素选择器示例 */
p {
    color: blue;
}

2.id选择器(#)

选择器的名字前面需要加上#
作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）

/* ID选择器示例 */
#header {
    font-size: 24px;
}

3.类选择器(.)

选择器的名字前面需要加上.
作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个

/* 类选择器示例 */
.highlight {
    background-color: yellow;
}

可以指定只有特定的 HTML 元素会受类的影响。
HTML 元素也可以引用多个类。

CSS 通用选择器(*)

通用选择器#选择页面上的所有的 HTML 元素。

/* 通用选择器示例 */
* {
    margin: 0;
    padding: 0;
}

CSS 分组选择器(,)

分组选择器选取所有具有相同样式定义的 HTML 元素。
最好对选择器进行分组，以最大程度地缩减代码。

/* 分组选择器示例 */
h1, h2, h3 {
    font-family: Arial, sans-serif;
}

优先级

内联样式（最高）、ID选择器、类选择器和元素选择器的顺序来决定。

三，组合选择器

根据它们之间的特定关系来选取元素。

后代选择器 (空格)

后代选择器匹配属于指定元素后代的所有元素。（所有子）

div p {
    color: blue;
}

子选择器 (>)

选择器只会选择指定元素的直接子元素。（直接子）

ul > li {
    list-style-type: square;
}

相邻兄弟选择器 (+)

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。（同一父元素下后面第一个兄弟）
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

h2 + p {
    font-style: italic;
}

通用兄弟选择器 (~)

用于选择在同一父元素下的指定元素后面的所有兄弟元素。（同一父元素下后面的所有兄弟元素。）

h1 ~ p {
    font-weight: bold;
}

四，伪类选择器（:）

根据特定状态选取元素

什么是伪类？

伪类用于定义元素的特殊状态。

用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

语法

伪类选择器使用冒号 `:`来表示。
a:hover {
    color: red;
}

五，伪元素选择器(:: 修改文本内容)

选取元素的一部分并设置其样式

什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

::first-line 伪元素：

::first-line 伪元素用于向文本的首行添加特殊样式。
注意：::first-line 伪元素只能应用于块级元素。

p::first-line {
    font-weight: bold;
}

::first-letter 伪元素

::first-letter 伪元素用于向文本的首字母添加特殊样式。
注意：::first-letter 伪元素只适用于块级元素。

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

六，属性选择器

根据属性或属性值来选取元素
CSS [attribute] 选择器
[attribute] 选择器用于选取带有指定属性的元素。

input[type="text"] {
    width: 200px;
}