CSS学习- CSS选择器

要点

• 选择器(元素选择器、类选择器、伪类选择器) 指定要格式化的HTML元素
• 详细学习CSS选择器的工作方式

选择器是什么？

定义: 元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。

• 选择器的对象：选择器所选择的元素

h1 {
  color: blue;
  background-color: yellow;
}

p {
  color: red;
}

选择器可以以不同的方式选择元素，比如选择如h1的元素，或者根据class（类）选择例如.special

选择器列表

如果使用相同样式的CSS选择器 => 这些单独的选择器 => 组成选择器列表

举个例子:

/* 单选择器 */
h1 {
  color: blue;
}

.special {
  color: blue;
}

我们可以组合相同样式形成CSS选择器列表

h1,
.special
{
  color: blue;
}

<h1>Type selectors</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
  melon azuki bean garlic.</p>

<p>Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
  greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

<p>Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce kohlrabi amaranth water spinach avocado
  daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>

span {
        background-color: yellow;
    }

    strong,
    em {
        color: rebeccapurple;
    }

注: 选择器列表中只要一个元素定义错误，整个列表参数就会都被忽略

选择器的种类

类型、类和ID选择器

这个选择器，第一个指向了所有HTML元素<h1>

h1 { }

它也可以包含一个class的选择器:

.box {  }

亦或，一个id选择器:

#unique {}

标签属性选择器

这组选择器根据一个元素上的某个标签的属性的存在以选择元素的不同方式：

a[title] {  } /* 这是一个标签 */

或者根据一个有特定值的标签属性是否存在来选择:

a[href="https://example.com"] {}

伪类与伪元素

这组选择器包含了伪类，用来样式化一个元素的特定状态。例如:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：

a: hover {}

它还可以包含了伪元素，选择一个元素的某个部分而不是元素自己。例如，::first-line是会选择一个元素（下面的情况中是<p>）中的第一行，类似<span>包在了第一个被格式化的行外面，然后选择这个<span>。

p::first-line { }

运算符

最后一组选择器可以将其他选择器组合起来，更复杂的选择元素。下面的示例用运算符（>）选择了<article>元素的初代子元素。

article > p { }

选择器统计列表

选择器	示例	学习CSS的教程
类型选择器	h1 { }	类型选择器
通配选择器	* { }	通配选择器
类选择器	.box { }	类选择器
ID选择器	#unique { }	ID选择器
标签属性选择器	a[title] { }	标签属性选择器
伪类选择器	p:first-child { }	伪类
伪元素选择器	p::first-line { }	伪元素
后代选择器	article p	后代运算符
子代选择器	article > p	子代选择器
相邻兄弟选择器	h1 + p	相邻兄弟
通用兄弟选择器	h1 ~ p	通用兄弟