微网站摇一摇,发表评论的wordpress网站模板,网站开发女生适合吗,永久不收费免费的聊天软件1. 作用
匹配文档中的某些元素为其应用样式。根据不同需求把不同的标签选出来。 2. 分类
分类 基础选择器 包含 标签选择器、ID选择器、类选择器、通用选择器等 复合选择器 包含 后代选择器、子代选择器、伪类选择器等
1 标签选择器 介绍 又称为元素选择器#xff0c;根…1. 作用
匹配文档中的某些元素为其应用样式。根据不同需求把不同的标签选出来。 2. 分类
分类 基础选择器 包含 标签选择器、ID选择器、类选择器、通用选择器等 复合选择器 包含 后代选择器、子代选择器、伪类选择器等
1 标签选择器 介绍 又称为元素选择器根据标签名匹配文档中所有该元素为页面中某一类标签指定统一的CSS样式。 语法 标签名{属性1: 属性值1;属性2: 属性值2;...
}示例 说明 选择器指需设置样式的 HTML 元素。声明块包含一条或多条用分号分隔的声明。每条声明都包含一个 CSS 属性名称和一个值以冒号分隔。多条 CSS 声明用分号分隔声明块用花括号括起来。 优点 能快速为页面中同类型的标签统一设置样式。 缺点 不能设计差异化样式只能选择全部的当前标签。 2 ID选择器 介绍 根据元素的 id 属性值匹配文档中唯一的元素id具有唯一性不能重复使用。在 CSS 中 ID选择器以 # 来定义 语法 #id属性值{属性1: 属性值1;属性2: 属性值2;...}示例 注意 id属性值自定义可以由数字、字母、下划线、- 组成不能以数字开头;尽量见名知意多个单词组成时可以使用连接符下划线小驼峰表示。 口诀 样式#定义结构id调用只能调用一次
3 类选择器 介绍 想要差异化选择不同的标签单独选一个或者某几个标签可以使用类选择器。 根据元素的class属性值匹配相应的元素class属性值可以重复使用实现样式的复用简言之用于查找或选取要设置样式的 HTML元素 语法 .类名 {属性1: 属性值1;属性2: 属性值2;...
}示例 说明 长名称或词组可以使用中横线来为选择器命名。不要使用纯数字、中文等命名尽量使用英文字母来表示。命名要有意义尽量使别人一眼就知道这个类名的目的。 口诀 样式点定义结构类调用 特殊用法 类选择器与其他选择器结合使用 a.c1{ }注意标签与类选择器结合时标签在前类选择器在后 class属性值可以写多个多个类名之间必必须用 空格 分开共同应用类选择器的样式 p classc1 c2/p示例 4 通用选择器 介绍 通配符选择器使用 * 定义它表示选取页面中所有元素标签。 语法 * {属性1: 属性值1;属性2: 属性值2;...
}说明 通常在最开始对页面设置内边距与外边距的设置默认body与页面会存在边距。 *{padding: 0;margin: 0;
}示例 5 群组选择器 介绍 也称为并集选择器可以使用多个不同的选择器为一组元素统一设置样式。 语法 selector1,selector2,selector3{ 属性1: 属性值1;属性2: 属性值2;...
}示例
6 后代选择器 介绍 匹配满足选择器的所有后代元素(包含直接子元素和间接子元素) 语法 selector1 selector2{属性1 属性值1;属性2 属性值2;...
}说明 匹配selector1中所有满足selector2的后代元素selector1 与 selector2 可以是任意的基础选择器 示例 7 子代选择器 介绍 匹配满足选择器的所有直接子元素只能选择作为某元素的最近一级子元素 语法 selector1selector2{属性1 属性值1;属性2: 属性值2;...
}说明 selector2 必须是 selector1 的亲子元素 示例 8 伪类选择器 介绍 为元素的不同状态分别设置样式必须与基础选择器结合使用。 特点 用冒号:表示如:hover、:first-child、:last_child
1、链接伪类选择器 分类 :link 超链接访问前的状态
:visited 超链接访问后的状态
:hover 鼠标滑过时的状态
:active 鼠标点按不抬起时的状态(激活)示例 注意 超链接如果需要为四种状态分别设置样式则按照以下顺序【LVHA】声明 :link
:visited
:hover
:active超链接常用设置 : a{/*统一设置超链接默认样式(不分状态)*/
}a:hover{/*鼠标滑过时改样式*/
}2、焦点伪类选择器 :focus 用于选取获得焦点的表单元素。一般情况 input 类表单元素才能获取 示例 3、结构伪类选择器 作用 根据元素的结构关系查找元素 选择器 选择器说明E:first-child查找第1个E元素E:last-child查找最后一个E元素E:nth-child(N)查找第N个E元素第1个元素N值为1 :nth-child(公式) 作用根据元素的关系结构查找多个元素。 公式功能2n偶数标签2n1 2n-1奇数标签5n找到5的倍数的标签n5找到第5个以后的标签-n5找到第5个以前的标签 示例 4、伪元素选择器 作用 创建虚拟 元素伪元素用来摆放装饰性的内容 选择器 选择器说明E::before在E元素里面最前面添加一个伪元素E::after在E元素里面最后面添加一个伪元素 注意 必须设置 content: “” 属性用来设置 伪元素的内容如果无内容则引号留白即可微元素必须是 行内 显示模式权重 和 标签选择器 相同。 应用场景 插入内容使用::before和::after伪元素在元素的前后插入内容如在段落前添加引用符号、图标装饰等分割符号使用::before和::after伪元素在列表项之间添加分割线或其他符号提高列表的可读性清除浮动使用::after伪元素来清除浮动保证容器正确包裹元素首行缩进使用::first-line伪元素来设置元素内第一行的样式如字体、颜色等首字母样式使用::first-letter伪元素来设置元素内第一个字母的样式如字体大小、颜色等 示例 总结
