第二周 蓝旭培训预习CSS进阶

CSS伪类和伪元素

伪类

伪类

伪类	描述
:active	在用户激活(例如点击)元素的时候匹配
:any-link	匹配一个链接的:link和:visited状态
:autofill	匹配<input>元素等表单元素是由auto complete填充时的样式
:checked	匹配处于选中状态的单选或复选框
:defaut	匹配一组相似的元素中默认的一个或者更多的ui元素
:disabled	匹配处于关闭状态的用户界面元素
:empty	匹配除了可能存在的空格外，没有子元素的元素
:enabled	匹配处于关闭状态的用户界面元素
:first-child	匹配兄弟元素中的第一个元素
:first-of-type	匹配兄弟元素中第一个某种类型的元素
:focus	当一个元素有焦点的时候匹配
:focus-visible	当元素有焦点，且焦点对用户可见的时候匹配
:focus-within	匹配有焦点的元素，以及子代元素有焦点的元素
:hover	当用户悬浮到一个元素之上的时候匹配
:indeterminate	匹配未定态值的UI元素，通常为复选框、单选框
:invalid	匹配诸如<input>的任意内容未通过验证状态
:last-child	匹配兄弟元素中最末的那个元素
:last-of-type	匹配兄弟元素中最后一个某种类型的元素
:link	匹配未曾访问的链接
:is()	匹配传入的选择器列表中的任何选择器
:not	匹配作为值传入自身的选择器未匹配的物件
:nth-child	匹配兄弟元素中的元素（可以是非同类元素） 兄弟元素按照an+b形式的式子进行匹配
:nth-of-type	匹配某种类型的一列兄弟元素 兄弟元素按照an+b形式的式子进行匹配
:nth-last-child	匹配一列兄弟元素（可以是非同类元素），从后往前倒数 兄弟元素按照an+b形式的式子进行匹配
:nth-last-of-type	匹配某种类型的一系列兄弟元素，从后往前倒数
:only-child	匹配没有兄弟元素的元素
:only-of-type	匹配兄弟元素中某类型仅有的元素
:optional	匹配不是必填的form元素
:required	匹配必填的form元素
:read-only	匹配用户不可更改的元素
:read-write	匹配用户可以更改的元素
:valid	匹配诸如<input> 元素处于可用状态的元素
:target	匹配当前URL目标的元素（例如如果它有一个匹配当前URL分段的 元素）。
:visited	匹配已访问链接

伪元素

伪元素	描述
::after	匹配出现在原有元素的实际内容之后的一个可样式化元素
::before	匹配出现在原有元素的实际内容之前的一个可样式化元素
first-letter	匹配元素的第一个首字母
::first-line	匹配包含此伪元素的元素第一行
::selection	匹配文档中被选择的部分
::placeholder	匹配一个表单元素的占位文本

关系选择器

• 标签选择器

作用：对页面中所有的此标签设置样式

语法：标签名{css属性名： 属性值：}

示例：

p{
    color: green;
}

• 类选择器

作用：对页面中所有代此类名的标签设置样式

语法：.类名{CSS属性名： 属性值；}

示例：

.red{
    color: red;
}

说明

所有标签上都有ID属性

便签属性class的值就是类名

一个标签同时可以有多个类名，类名之间以空格隔开

类名可以重复，一个类选择器可以同时选中多个标签

• id选择器

作用：对此页面中带有此id属性名的标签设置样式

语法：#id属性值{CSS属性名： 属性值；}

示例：

#blue {
    color: blue;
}

说明：

所有标签上都有ID属性

ID不能重复，它在页面中是唯一的

一个标签上只能有一个ID选择器，一个ID选择器只能选中一个标签

• 通配符选择器

作用对页面中所有的选择器设置样式

语法： *{CSS属性名： 属性值；}

示例：

/*内外边距清除 */
* {
    margin: 0;
    padding: 0;
}

说明：开发中用的很少，一般用法如示例所示

复合选择器

• 后代选择器

作用：根据HTML标签的嵌套关系，选择父元素后代元素中满足条件的元素

语法：选择器1 选择器2 {CSS属性名： 属性值；}

示例

div p{
    color: red;
}

说明：

后代包括：儿子，孙子，重孙子......

选择器与选择器之间通过空格隔开

• 子代选择器

作用：根据HTML标签的嵌套关系，选择父元素子代中元族元素的条件

语法：选择器1>选择器2 {CSS属性名： 属性值；}

示例

div > a {
    color: seagreen;
}

说明：子代只包括：儿子

• 并集选择器

作用：同时选择多组标签，设置相同的样式（简化代码）

语法：选择器1，选择器2 {CSS属性名： 属性值；}

示例

span,
h1 {
    color: springgreen;
}

说明

每组选择器通过，分隔

选择器一般一行一个，看着方便（示例所示）

• 交集选择器

作用：选择页面中，同时满足多个选择器的标签

语法：选择器1，选择器2 {CSS属性名： 属性值；}

示例

p.box {
     color: springgreen;
}

说明：

选择器之间是紧挨的

选择器中如果有标签选择器，标签选择器必须写在最前面

• hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式

语法：选择器：hover {css属性名： 属性值；}

示例

p: hover {
    color: red;
}

CSS布局

• 普通流布局
• 浮动布局
• 定位布局
• Flexbox布局
• Grid布局

CSS盒模型

盒子的概念

页面中每个标签都可看作一个盒子

浏览器在显示网页时，会将网页中的元素看作一个个的矩形区域，也是“盒子”

内容区域内  content

内边距区域  padding

边框区域     border

外边距区域  margin

例

div {
    width: 300px;
    height: 300px;
    background-color: pink;
    border: 1px solid #000;
    padding: 20px;
    margin: 50px;

外边距折叠现象

1、合并现象

场景：垂直布局的块级元素，上下的margin会合并

结果：最终，两者距离为margin的最大值

解决方法：只给其中的一个盒子设置margin

2塌陷现象

场景：互相嵌套的块级元素，子元素的margin-top会作用于父元素上。

结果：导致父元素一起往下移动

解决方法：

给父元素设置border-top或者padding-top

给父元素设置overflow： hidden

转换行内块元素

设置浮动

行内元素的垂直外边距

行内标签的margin-top /padding-top和 bottom不生效

若想改变行内标签的垂直位置，可用line-height

CSS调试方法

• 使用浏览器开发者工具：现代浏览器（如Chrome、Firefox、Safari等）都内置了强大的开发者工具。通过开发者工具，你可以检查元素的CSS属性、应用的样式规则、计算后的样式等。此外，你还可以实时编辑CSS样式，查看修改后的效果，这对于快速定位和解决问题非常有帮助。
• 验证CSS语法：使用在线的CSS验证工具或编辑器内置的验证功能来检查CSS语法是否正确。语法错误可能导致样式不生效或出现意外的布局问题。
• 逐步排除法：当遇到复杂的CSS问题时，可以尝试逐步排除法。通过注释或删除部分CSS规则，观察页面的变化，从而确定问题所在。这种方法需要耐心和细心，但通常能够找到问题的根源。
• 利用CSS调试工具：除了浏览器自带的开发者工具外，还有一些专门的CSS调试工具，如Firebug、CSS Debugger等。这些工具提供了更丰富的功能和更直观的界面，可以帮助你更高效地调试CSS。
• 审查CSS选择器的优先级：CSS选择器的优先级规则可能会导致某些样式不生效或被覆盖。了解并审查选择器的优先级是解决这类问题的关键。
• 检查盒模型：盒模型是CSS布局的基础。了解元素的盒模型属性（如margin、padding、border、width和height）以及它们之间的关系。