Web前端学习—基础篇(11)_CSS的选择器有哪些、怎么区分、用法都是什么

前端学习基础篇

四、CSS学习

4.3、选择器

选择器之基础选择器

4.3.1、通配符选择器 *

单独使用，表示匹配所有元素

4.3.2、标签选择器——元素选择器

用标签名作为选择器

结构中：<标签名></标签名>
样式中：标签名{ 声明语句 }

4.3.3、class选择器——类选择器

使用class名称作为选择器

结构中：
    <标签名 class="classname"></标签名>
    <标签名 class="classname1     classname2"></标签名>
样式中：
    .classname{ 声明语句 }
    .classname1{ 声明语句 }
    .classname2{ 声明语句 }

注意：

​ 多个标签可以使用同一个class名称；

​ 一个标签可以有多个class名称（词列表），名称之间用空格隔开，写在一个class属性中.

4.3.4、id选择器

使用id名称作为选择器

结构中：<标签名   id="idname"></标签名>
样式中：#idname{ 声明语句 }

注意：id名称具有唯一性，在本页面中只能出现一次

选择器命名规范

• 名称尽量有含义
• 名称建议用英文字母开头，包含字母、数字、连字符（- _）
• 除了-和_之外的特殊符号都不能使用
• 不能用中文，不能用纯数字，不能以数字开头
• 类名会区分大小写

基础选择器的优先级

• 选择器的优先级与权值相关
• 权值越大，优先级越高；权值相同，后写的会覆盖先写的内容
• 基础选择器的权值：通配符选择器（0）、标签选择器（1）、class选择器（10）、id选择器（100）
• 行间样式（1000）优于id选择器

选择器之进阶

4.3.5、后代选择器——选择器之间用空格隔开

选择器1 选择器2{ 属性: 属性值; }
选择器1范围内的所有的选择器2都具有属性

4.3.6、群组选择器——选择器之间用逗号隔开

选择器1, 选择器2{ 属性: 属性值; }
选择器1和选择器2都具有属性

4.3.7、子代选择器——选择器之间用>分隔

父选择器>子选择器{ 属性: 属性值; }
父选择器中的第一级子元素具有属性

4.3.8、交集选择器

由两个及以上的选择器组成

结构中：<div class="box"></div>
样式中：div .box{ 属性: 属性值; }

4.3.9、伪类选择器

语法

选择器:伪类{ }

用于设置超链接不同状态

a:link{ 链接的默认样式 }
a:visited{ 链接访问过后的样式 }
a:hover{ 鼠标悬停到a上的样式 }
a:active{ 鼠标按下(访问中)的样式 }

四个伪类状态都有效：L-v-H-a

:hover不仅可以用于超链接，而且其他标签同样适用

• 鼠标悬停到元素上，让元素本身发生样式的改变

.box{
    width: 200px;
    height: 200px;
    background: red;
}
.box:hover{
    background: pink;
}

• 鼠标悬停到父元素上，让子元素发生样式的改变

<div class="box2">
    <div></div>
</div>
.box2{
    width: 500px;
    height: 300px;
    background: #ff0;
}
.box2 div{
    width: 100px;
    height: 100px;
    background: blue;
}
.box2:hover div{
    background: tomato;
}