选择器的作用: 选择标签

可以将选择器分成两类

1. 基础选择器

   • 标签选择器
   • 类选择器
   • id选择器
   • 通配符选择器

2. 复合选择器

1. 基础选择器 #

① 标签选择器 #

用HTML标签名作为选择器
只能一次选择同标签的所有样式，不能差异化

标签名 {
    属性1: 属性值1;
    属性2: 属性值2;
    属性3: 属性值3;
    ...
}

② 类选择器 .class #

差异化选择不同标签
样式点定义，结构类调用，一个或多个，开发最常用

.类名 {
    属性1:属性值1;
    ...
}

class="类名1 类名2"
类名自己定义, 有命名规范，可以多类名

③ id选择器 #id #

样式#定义，结构id使用，只能调用一次，别人切勿使用

#id名 {
    属性1:属性值1;
    ...
}

id="id名"

id和class的区别 #

class相当于人名，id相当于身份证号

7.4 通配符选择器 * #

选取页面所有元素（标签）
不需要调用，自动就给所有元素使用样式

* {
    属性1:属性值1;
    ...
}

7.5 总结 #

8. 复合选择器 #

8.1 后代选择器 #

又称为包含选择器，可以选择父元素里面子元素
表示选择元素1里面的所有元素2

元素1 元素2 { 样式声明 }

元素可以是任意的基础选择器

8.2 子元素选择器 > #

只能选择作为某元素的最近一级子元素(亲儿子)

元素1>元素2 { 样式声明 }

8.3 并集选择器 , #

选择多组标签，同时为他们定义相同的样式

元素1, 元素2 { 样式声明 }

8.4 伪类选择器 : #

向某些选择器添加特殊的效果

8.4.1 链接伪类选择器 #

LVHA顺序不能颠倒

a:link     /* 选择所有未被访问的链接 */
a:visited  /* 选择所有已被访问的链接 */
a:hover    /* 选择指针位于其上的链接 */
a:active   /* 选择活动链接(鼠标按下未弹起的链接) */

常用

a {
    color:gray;
}
a:hover {
    color:red;
}

8.4.2 :focus 伪类选择器 #

用于选取获得焦点(光标)的表单元素

input:focus {
    background-color:yellow;
}

8.5 总结 #

Contributors #

winter wang