🌻CSS 基本选择器

type
status
date
slug
summary
tags
category
icon
password
☀️
点击带三角形的标题可以展开收缩内容。

标签选择器

标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。
例如：p, h1, div, a, img......

类选择器

作用：查找标签，差异化设置标签的显示效果。
  • 定义类选择器 → .类名
  • 使用类选择器 → 标签添加 class="类名"
  • 一个类选择器可以供多个标签使用
  • 一个标签可以使用多个类名，类名之间用空格隔开
开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd。

id 选择器

作用：查找标签，差异化设置标签的显示效果。
  • id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式
  • 规则：同一个 id 选择器在一个页面只能使用一次。
  • 定义 id 选择器 → #id名
  • 使用 id 选择器 → 标签添加 id= "id名”

通配符选择器

作用：查找页面所有标签，设置相同样式。
*不需要调用，浏览器自动查找页面所有标签，设置相同的样式
经验：通配符选择器可以用于清除标签的默认样式，例如：标签默认的外边距、内边距。

复合选择器

后代选择器

父选择器 子选择器 { CSS 属性}

子代选择器

父选择器 > 子选择器 { CSS 属性}

并集选择器

选择器1, 选择器2, …, 选择器N { CSS 属性}

交集选择器

  • 选择器1选择器2 { CSS 属性}
  • 选中同时满足多个条件的元素
  • 选择器之间连写，没有任何符号
  • 注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面。

伪类选择器

超链接伪类：

鼠标悬停状态：选择器:hover { CSS 属性 }
伪类表示元素状态，选中元素的某个状态设置样式。
提示：如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。
经验：工作中，一个 a 标签选择器设置超链接的样式， hover状态特殊设置

结构伪类选择器

伪元素选择器

 
🌻
欢迎在下方留言讨论~
CSS 简介CSS 基本样式
Loading...
目录