CSS 使用选择器来挑选HTML文档中的特定元素，并设置这些元素的属性。
又称为HTML元素/标签选择器，选择的是HTML元素或标签：
span {
background-color: yellow;
}
strong {
color: rebeccapurple;
}
em {
color: rebeccapurple;
}
类选择器以点号开头，选择文档中应用了该类的一切元素。
可以选择特定的元素+特定的类，也可以选择具有多个类的某一元素：
<html>
<head>
<title>Test css selectortitle>
<style>
.note {
border: solid;
}
.note.message {
background-color:white;
}
.note.warning {
background-color:yellow;
}
.note.danger {
background-color:red;
}
style>
head>
<body>
![[CSS] 选择器_第1张图片](http://img.e-com-net.com/image/info8/ef2ecc3a402344548b0be8fc8c207e97.png)
ID和类的不同：一个ID一个文档只能出现一次，ID选择器和类选择器的用法基本类似。
ID选择器以 # 开头，因为ID唯一，理论上#myId的写法足够，但有时可以看到类似如下p#danger的写法，这样的写法会更为具体：
<html>
<head>
<title>Test css selectortitle>
<style>
p {
border: solid;
}
#message {
background-color:white;
}
#warning {
background-color:yellow;
}
p#danger {
background-color:red;
}
style>
head>
<body>
This is a note message p>
This is a warning messagep>
This is a message about dangerp>
body>
html>
通用选择器使用 * 号，选择全部HTML元素，例如：
* {
margin: 0;
}
但是由于重置全部元素的浏览器默认属性，所以要自行全部重设全部元素属性，很麻烦，所以一般不会这样用。
一种用途例如，需要选择全部article元素的第1个子元素first-child, 可以这样写：
/* code 1 */
article :first-child {
}
但是容易与下面的写法混淆，下面的写法的含义是, 选择全部article元素，假如这个article是另一个元素的第一个子元素的话：
/* code 2 */
article:first-child {
}
两者的区别是，article后者少了一个空格，为什么会有区别，暂时不知道。所以要改成下面这样：
/* code 3 */
article *:first-child {
}
code 1 与 code 3 等价， code 2 另一种含义。此处选择器冒号前后的空格很重要，不能多加，不能少加。
HTML 有很多全局属性(global attribute)，包括，id, lang, class, style，class 是全局属性之一，是众多属性中特殊的一种。class 绝大多数情况下用于css，但是，有时也用于JavaScript.
| No. | 属性选择器 | 例子 | 含义 |
|---|---|---|---|
| 1. | tag[attr] |
p[class] |
标签有一个名为attr的属性 |
| 2. | tag[attr=value] |
a[href="https://example.com"] |
标签属性值为value，完全匹配 |
| 3. | tag[attr*=value] |
a[href*="example"] |
标签的属性值含有value就可以 |
| 4. | tag[attr$=value] |
a[href$=".com"] |
标签属性值以value结尾 |
| 5. | tag[attr^=value |
a[href^="https"] |
标签属性值以value开头 |
| 6. | tag[attr|=value] |
div[lang|="zh"] |
标签属性值为value，或者以value加连字符号开头，例如“zh-CN” |
| 7. | tag[attr~=value] |
p[class~="special"] |
标签属性值为value, 或者class属性值其中之一包含value |
例子：
<html>
<head>
<title>Test css selectortitle>
<style>
p {
border: solid;
}
p[class] {
background-color:pink;
}
p[class~="a"] {
font-size: 150%;
}
p[class*="a"] {
padding-left:5em;
}
p[class="a"] {
color: red;
}
style>
head>
<body>
This is class ab p>
This is class a bp>
This is class ap>
body>
html>
![[CSS] 选择器_第2张图片](http://img.e-com-net.com/image/info8/64bd93aeb0f4403683c693e1de275d67.jpg)
要使属性值对大小写不敏感，就在结束的中括号前加值i，例如li[class^="a" i]
伪类选择器选择处于特殊状态的元素，这些所谓的特殊状态包括 :hover, :visited, :first-child; last-child, :checked, 等，共有大约50个，
关于伪类的例子：
Test css selector
This is class ab
This is class a b
This is class a
Go to search
伪元素选择器的行为好像加了新的HTML元素一样，不会使用class。::first-line, ::after, ::before等等，供7个。
通常，伪类选择器和伪元素选择器可以组合使用。
首字母大写的例子：
Test css selector
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
melon azuki bean garlic.
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
xxx
yyy
![[CSS] 选择器_第3张图片](http://img.e-com-net.com/image/info8/8118dbd86e644ef0a80259bd181b4e2c.jpg)
组合选择器将其他选择器组合起来，指明相互之间的关系。
选择器之间加空格叫后裔选择器，例如：
body article p 只要是后裔就可以，没必要一定是直接的孩子。
![[CSS] 选择器_第4张图片](http://img.e-com-net.com/image/info8/e0efab5162cd4f3796ed3f3592d31a8b.jpg)
使用大于符号例如： article > p,
使用符号 +， 例如 p + img， 这里相邻，是指紧随其后，前面的不算。
使用符号 ~， 例如： p ~ img，后面的元素。
<html>
<head>
<title>Test css selectortitle>
<style>
p ~ div {
background-color:black;
color:white;
font-size:150%;
}
style>
head>
<body>
<article>
<p>paragraph 1p>
<div>division1div>
<div>division2div>
<div>division3div>
article>
body>
html>
![[CSS] 选择器_第5张图片](http://img.e-com-net.com/image/info8/78ff0d1248244592a533d254943b7d16.jpg)
可以使用非常具体的选择器，例如， ul > li[class="a"] { }
如果HTML由CMS生成，组合器将十分有用。