6.14--CSS

目录

选择器

基本选择器（重点）

标签选择器

Class 选择器

ID 选择器

 通配符选择器

 伪类选择器(重点)

链接伪类选择器

---

选择器

基本选择器（重点）

标签选择器

p {
font-size: 16px;
color: red;
}

 选择页面中 class 属性值中包含 box 类名的所有元素，给它们设置字体大小和颜色。

Class 选择器

.box {
font-size: 20px;
color: green;
}

ID 选择器

#nav {
font-size: 24px;
color: blue;
}

选择页面中 id 属性值是 nav 的元素，给它设置字体大小和颜色

id选择器和类选择器区别:

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜
id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。

 通配符选择器

* {
font-size: 24px;
color: blue;
}

 伪类选择器(重点)

 伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。

为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就
是 冒号 比如 :link{}

链接伪类选择器

:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */

提示：
在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！
a:active 必须位于 a:hover 之后，这样才能生效！

a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}

基本选择器：
标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议使用）