CSS选择器

目录

• CSS选择器
  • 标签选择器
  • 类选择器
    • 语法
    • 使用方法
  • ID选择器
    • 语法
    • 使用方法
  • 类和ID选择器的区别
  • 子选择器
    • 语法
  • 包含（后代）选择器
    • 语法
    • 包含（后代）选择器与子选择器的区别
  • 通用选择器
    • 语法
    • 使用方法
  • 伪类选择符
    • 语法
    • 使用方法
  • 分组选择符
    • 语法
    • 使用方法

CSS选择器

标签选择器

html代码中的标签

类选择器

语法

.类选择器名称{CSS样式代码;}

使用方法

1. 使用合适的标签把要修饰的内容标记起来
2. 使用class="类选择器名称"为标签设置一个类
3. 设置类选择器CSS样式

ID选择器

语法

#ID选择器名称{CSS样式代码;}

使用方法

1. 使用合适的标签把要修饰的内容标记起来
2. 使用id="ID选择器名称"为标签设置一个类
3. 设置ID选择器CSS样式

类和ID选择器的区别

1. ID选择器只能在文档中使用一次，类选择器可在文档中使用多次
2. 可以使用类选择器词列表方法为一个元素同时设置多个样式

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

子选择器

语法

用(>)选择指定标签元素的第一代子元素

.food > li{CSS样式代码;}

包含（后代）选择器

语法

用空格选择指定标签元素的所有后代元素

包含（后代）选择器与子选择器的区别

(>) 作用于元素的第一代后代，空格作用于元素的所有后代。

通用选择器

语法

*{CSS样式代码;}

使用方法

匹配html中所有标签元素

伪类选择符

语法

a:hover{CSS样式代码;}

使用方法

给a 标签鼠标滑过状态

分组选择符

语法

选择符,选择符{CSS样式代码;}

使用方法

给html多个标签设置同样的样式