CSS笔记II

news2024/12/25 8:52:32

CSS第二天笔记

复合选择器
- 后代选择器
- 子选择器
- 并集选择器
- 交集选择器
- 伪类选择器
三大特性
- 继承性
- 层叠性
- 优先级
- - 优先级-叠加计算规则
- Emmet写法
背景属性
- 背景图
- 平铺方式
- 位置
- 缩放
- 固定
- 复合属性
显示模式
- 转换显示模式

复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成

作用：更准确更加高效的选择目标元素(标签)

后代选择器

说明:选择某元素的后代元素抽象理解：儿子孙子都要选择

格式父选择器、子选择器{CSS属性}，父子选择器之间用空格隔开

<style>
    div span {  
        color:red;
    }
</style>
<span> span 标签 </span>
<div>
    <span>这是div标签的儿子</span>
    <p>
        <span>这是孙子</span>
    </p>
</div>

<!--效果为第二行文字变红，并且是选中所有的span标签 儿子和孙子都会选中-->

子选择器

作用：选中某元素的子代元素(最近的子级)。抽象理解：只要儿子

选择器写法：父选择器 > 子选择器{CSS属性}，父子选择器之间用 > 隔开

参考上面的代码

<style>
    div > span {  
        color:red;
    }
</style>
<span> span 标签 </span>
<div>
    <span>这是div标签的儿子</span>
    <p>
        <span>这是孙子</span>
    </p>
</div>

<!--效果为第二行文字变红，只有div的直系span标签会变红其他span标签不会变红-->

并集选择器

作用：选中多组标签设置相同的样式。抽象理解：顾名思义大锅饭

选择器写法：选择器1,选择器2,…选择器N {CSS属性},选择器之间逗号隔开

<style>
    div,
    span,
    p {  
        color:red;
    }
</style>
<span> span 标签 </span>
<div>这是div标签</div>
<p>这是p标签</p>
<!--效果为span div p 标签中的文字都会变红-->

交集选择器

作用：选中同时满足多个条件的元素

选择器写法：选择器1选择器2{CSS属性}，选择器之间连写没有任何特殊符号。

<style>
    span.xuanze {
        color:red;
    }
</style>
<span class="xuanze"> 这是第一个span 标签 </span>
<div>这是div标签</div>
<span>这是第二个span标签</span>
<!--这是选中标签名字为span并且类名叫xuanze的文字，so 只会选中第一个span标签-->

伪类选择器

作用：伪类表示元素状态，选中元素的某个状态设置样式。

鼠标悬停状态：选择器:hover{CSS属性} 且任何标签都可以设置鼠标悬停状态

选择器	作用
:link	访问前状态
:visited	访问后状态
:hover	鼠标悬停
:active	鼠标点击

如果给超链接设置以上四个状态，需要安装LVHA的顺序书写。

三大特性

继承性
层叠性
优先级

继承性

特点：子级默认继承父级的文字控制属性

例如在body标签中设置font属性则body中所有的标签都会继承body的font属性，如果有个别不一样的再使用选择器单独找到设置就可以了。当标签有自己的样式时，对于父级的样式属性会导致继承失败

相对于父级标签的css样式，自己有相同的则会倒反天罡覆盖父级的样式，对于自己没有的css样式，子级又会虚心采纳继承。

层叠性

特点：顾名思义都生效

1.相同的属性会覆盖: 后面的css属性会覆盖前面的css属性。

2.不同的属性会叠加: 不同的css属性都会生效。

例如以下代码

<style>
    div {
        color:red;
        font-weight:800;
    }
    div {
        color:green;
        font-size:30px;
    }
</style>
<div>
    最终显示效果会文字绿色 宽度800字号大小40px
</div>

优先级

特点：优先级也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则(选择器优先级高的样式生效)。

优先级公式：

通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

选中范围越小，优先级越高

!important 具有提权功能慎用是写在css样式中写在属性值后面分号前面

优先级-叠加计算规则

上面的规则适用于基础选择器，但是当遇到复合选择器的时候就要用到权重叠加计算规则。

公式：行内样式，id选择器个数，类选择器个数，标签选择器个数

1.从左向右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较。

2.!important权重最高

3.继承权重最低

Emmet写法

特点：代码的简写方式，输入缩写会自动生成对应的代码

HTML写法

说明	标签结构	Emmet
类选择器		标签名.类名
id选择器		标签名#id名
同级选择器		div+p
父子选择器		div>p
多个相同标签		span*3
有内容的标签		div{内容}

在这里插入图片描述

CSS写法：大多数简写方式为属性单词的首字母

背景属性

背景属性一览表：

描述	属性
背景色	background-color
背景图	background-image
背景图平铺方式	background-repeat
背景图位置	background-position
背景图缩放	background-size
背景图固定	background-attachment
背景图符合属性	background