CSS选择器
盒模型
标签a、img、list
伪类选择器
CSS选择器
一、基础选择器
1、通配选择器
- {
border: solid;
}
匹配文档中所有标签:通常指html、body及body中所有显示类的标签
2、标签选择器
div {
background-color: yellow;
}
匹配文档中所有与标签名匹配的标签:如div{}会匹配文档中全部div,span{}会匹配文档中所有span
3、类选择器
.red {
color: red;
}
匹配文档中所有拥有class属性且属性值为red的标签:如<sup class="red"></sup> <sub class="red"></sub>均会被匹配
4、id选择器
#div {
text-align: center;
}
匹配文档中所有拥有id属性且属性值为div的标签:如<div id="div"></div> <section id="div"></section>均会被匹配
二、基础选择器优先级
- 基础选择器优先级大致与选择器匹配范围成反比,匹配范围越小,优先级越高
- 基础选择器优先级大致与选择器匹配精度成正比,匹配精度越高,优先级越高
- 基础选择器优先级:id选择器 > 类选择器 > 标签选择器 > 通配选择器
v_hint:id选择器必须保证单文档的唯一性
三、组合选择器
1、群组选择器
div, span, .red, #div {
color: red;
}
- 一次性控制多个选择器
- 选择器之间以,隔开,每一个选择器位均可以为任意合法选择器或选择器组合
2、子代(后代)选择器
子代选择器用>连接
body > div {
color: red;
}
后代选择器用空格连接
.sup .sub {
color: red;
}
- 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 子代选择器必须为一级父子嵌套关系,后代选择器可以为一级及多级父子嵌套关系
3、相邻(兄弟)选择器
相邻选择器用+连接
.d1 + .d2 {
color: red;
}
兄弟选择器用~连接
.d1 ~ .d3 {
color: red;
}
- 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 相邻选择器必须为直接相邻关系,兄弟选择器可以为直接相邻或间接相邻关系
4、交集选择器
<div class="d" id="dd"></div>
div.d#dd {
color: red;
}
<div class="d1 d2 d3"></div>
.d1.d2.d3 {
color: red;
}
四、组合选择器优先级
- 组合选择器优先级与权值相关,权值为权重和
- 权重对应关系
选择器 |
权重 |
通配 |
1 |
标签 |
10 |
类、属性 |
100 |
id |
1000 |
!important |
10000 |
- 选择器权值比较,只关心权重和,不更新选择器位置
- 不同级别的选择器间不具备可比性:1个类选择器优先级高于n个标签选择器的任意组合
五、属性选择器
- [attr]:匹配拥有attr属性的标签
- [attr=val]:匹配拥有attr属性,属性值为val的标签
- [attr^=val]:匹配拥有attr属性,属性值以val开头的标签
- [attr$=val]:匹配拥有attr属性,属性值以val结尾的标签
- [attr*=val]:匹配拥有attr属性,属性值包含val的标签
v_hint:属性选择器权重等价于类选择器
v_test:掌握所有选择器,并熟知选择器优先级
盒模型
一、盒模型概念
- 广义盒模型:文档中所有功能性及内容性标签,及文档中所有显示性标签
- 侠义盒模型:文档中以块级形式存在的标签(块级标签拥有盒模型100%特性且最常用)
- 盒模型组成:margin + border + padding + content
v_hint:content = width x height
二、盒模型成员介绍
1、content
- 通过设置width与height来规定content
- 块级标签可以设置自身宽高,默认宽为父级宽(width=auto)、高为0,高度可以由内容决定
- 内联标签不可以设置自身宽高,默认宽高均为0,宽高一定由内容决定
2、border
- border(边框)由border-width(宽度)、border-color(颜色)、border-style(风格)三部分组成
- border成员:border-left、border-right、border-top、border-bottom
- border-width成员:border-left-width、border-right-width、border-top-width、border-bottom-width
- border-color成员:border-left-color、border-right-color、border-top-color、border-bottom-color
- border-style成员:border-left-style、border-right-style、border-top-style、border-bottom-style
风格 |
解释 |
solid |
实线 |
dashed |
虚线 |
dotted |
点状线 |
double |
双实线 |
groove |
槽状线 |
ridge |
脊线 |
inset |
内嵌效果线 |
outset |
外凸效果线 |
v_hint:border满足整体设置语法,eg:border: 1px solid red;
3、padding
- padding成员:padding-left、padding-right、padding-top、padding-bottom
- padding整体设置
值得个数 |
方位 |
1 |
上下左右 |
2 |
上下 | 左右 |
3 |
上 | 左右 | 下 |
4 |
上 | 右 | 下 | 左 |
4、margin
- margin成员:margin-left、margin-right、margin-top、margin-bottom
- margin整体设置
赋值个数 |
方位 |
1 |
上下左右 |
2 |
上下 | 左右 |
3 |
上 | 左右 | 下 |
4 |
上 | 右 | 下 | 左 |
三、边界圆角
border-radius
成员 |
解释 |
border-top-left-radius |
左上 方位 |
border-top-right-radius |
右上 方位 |
border-bottom-left-radius |
左下 方位 |
border-bottom-right-radius |
右下 方位 |
赋值个数(值类型:长度 | 百分比) |
解释 |
1 |
横纵 |
2 |
横 | 纵 |
赋值个数(值类型:长度 | 百分比) |
解释 |
1 |
左上 右上 左下 右下 |
2 |
左上 右下 | 右上 左下 |
3 |
左上 | 右上 左下 | 右下 |
4 |
左上 | 右上 | 右下 | 左下 |
四、其他相关属性
- max|min-width|height
- overflow
值 |
描述 |
visible |
默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden |
内容会被修剪,并且其余内容是不可见的。 |
scroll |
内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto |
如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit |
规定应该从父元素继承 overflow 属性的值。 |
值 |
描述 |
inline |
内联 |
block |
块级 |
inline-block |
内联块 |
标签
一、a标签
1、常用用法
<a href="https://www.baidu.com">前往百度</a>
<a href="./index.html">前往主页</a>
2、相对路径
以当前文件作为参考,.代表当前路径,..代表上一级目录
3、常用属性
title -- 链接说明
target -- _self | _blank -- 目标位置
4、其他用法
- mailto:邮件给...
- tel:电话给...
- sms:信息给...
5、a标签reset操作
a {
color: #333;
text-decoration: none;
outline: 0;
}
6、锚点
① <a href="#tag">前往锚点</a> <a name="tag" des="锚点"></a>
② <a href="#tag">前往锚点</a> <i id="tag" des="锚点"></i>
7、鼠标样式
{
cursor: pointer | wait | move;
}
二、img标签
1、常用用法
<img src="https://image/icon.gif" />
<img src="./icon.gif" />
2、常用属性
alt -- 异常解释
title -- 图片解释
三、list列表
1、有序列表
<ol>
<li></li>
<li></li>
</ol>
2、无序列表
<ul>
<li></li>
<li></li>
</ul>
3、list的reset操作
ol, ul {
margin: 0;
padding: 0;
list-style:none;
}
伪类选择器
1、a标签四大伪类
- :link:未访问状态
- :hover:悬浮状态
- :active:活跃状态
- :visited:已访问状态
2、内容伪类
:before, :after {
content: "ctn";
}
3、索引伪类
- :nth-child(n):位置优先,再匹配类型
- :nth-of-type(n):类型优先,再匹配位置
v_hint:值可以为位置数,也可以为2n、3n...,代表2的倍数,3的倍数,且位置数从1开始
4、取反伪类
- :not(selector):对selector进行取反
盒模型布局
1、盒模型布局基本介绍
- 布局方位:margin-left、margin-right、margin-top、margin-bottom
- 影响自身布局:margin-left、margin-top
- 影响兄弟布局:margin-right、margin-bottom
- 正向 / 反向:正值 / 负值
2、margin布局坑位
- 很多语义标签具有默认margin
- 父子标签margin-top重叠取大者
- 兄弟标签margin-bottom、margin-top重叠取大者