css复合选择器
css 分为 基础选择器 和 复合选择器 , 但是基础选择器不能满足实际开发中 快速高效的选择标签
- 目的是为了选择更准确更精细的目标元素标签
- 复合选择器是由两个或者多个基础选择器 , 通过不同的方式组合而成
后代选择器 ( 重点 )
父级 子级 {
属性名: 属性值;
}
div a {
color: #ccc;
}
- 当标签发生嵌套时 , 内层标签就成为外层标签的后代;
- 子孙后代都可以选择 , 或者说 , 它能包含任何包含在内的标签 .
子元素选择器
作用 : 子元素选择器只能选择作为某元素子元素的元素
父级>子级 {
属性名: 属性值;
}
div>a {
color: #ccc;
}
交集选择器
标签名.类名 {
属性名: 属性值;
}
/* 即是div 又是nav类名 并且的关系 */
div.nav {
color: #ccc;
}
并集选择器 ( 重点 )
应用 : 如果某些选择器定义相同的样式 , 就可以利用并集选择器 , 可以让代码更简洁
并集选择器 是各个选择器通过 ,
链接而成 , 通常用于集体声明 ;
任何形式的选择器 ( 标签 class类 id等 ) , 都可以作为并集选择器的一部分 ;
标签名,
类名 {
属性名: 属性值;
}
div,
.nav {
color: #ccc;
}
链接伪类选择器 ( 重点 )
作用 : 用于向某些选择器添加特殊效果 , 比如给链接添加特殊效果 , 比如可以选择第一个 , 第 n 个元素 ; 因为伪类选择器很多 , 比如链接伪类 , 结构伪类
链接伪类选择器
a:link {} 未访问的链接
a:visited {} 已访问的链接
a:hover {} 鼠标移动上的链接
a:active {} 选定的链接
注意 : 书写尽量不要颠倒 lvha 的顺序 , 否则可能容易引起错误
标签的显示模式 ( 重要 )
什么是标签显示模式 ?
- 标签以什么方式进行显示 , 比如 div 自己占一行 , 比如 span 一行可以放很多个
- 作用 : 网页的标签非常多 , 在不同的地方用到不同的类型 , 以便更好的完成我们的网页 ;
- HTML 标签一般分为 块标签 和 行内标签 两种类型 , 也可以成为 块元素 和 行内元素
块级元素 ( block-level )
<!-- 常见的块级元素有 h1~h6 p div ul ol li 等 其中 div 标签是典型的块元素 -->
块级元素的特点
- 独占一行
- 高度 , 宽度 , 外边距以及内部编辑可以控制 .
- 宽度默认是容器的100%
- 是一个容器及盒子 , 里面可以放行内或者块级元素
- 注意 : 只有文字才能组成段落 因此 p 里面不能放块级元素 , 同理还有 h1~h6 dt 这些文字类块级元素里面不能放其他块级元素 .
行内元素 ( inline-level )
<!-- 常见的行内元素有 a strong b em i del s ins u span等 其中 span 标签是典型的行内元素有时候也叫内联元素 -->
行内元素的特点
- 相邻元素在一行上 , 可以在一行显示多个
- 高 , 宽直接设置是无效的
- 默认高度就是内容本身的高度
- 行内元素只能容纳文本或其他行内元素
- 注意 : 特殊情况 a 里面可以放块元素 , 但是给 a 转换一下块级模式最安全
行内块元素 ( inline-block )
<!-- 在行内元素中有几个特殊的标签 img input td 可以对他们设置宽高和对齐属性, 有些资料可能会称为行内块元素-->
行内块元素的特点
- 和相邻的行内块元素在一行内显示 , 但是之间会有缝隙 , 一行可以显示多个
- 默认宽度就是它本身的宽度
- 高度 , 行高 , 外边距 , 内边距都可以控制
标签显示模式转换 ( display )
- 块级 转 行内 :
display: inline;
- 行内 转 块级 :
display: block;
- 块级 , 行内 转 行内块 :
display: inline-block;
行高 ( line-height ) 文字垂直居中
- 行高和高度的三种关系
- 行高 = 上距离 + 下距离 + 文字高度
- 行高大于高度文字会偏下
- 行高小于高度文字会偏上
- 行高的测量
- 汉字和英文是有 顶线 中线 基线 底线 组成 两行文字的基线之间的距离就是行高 ; 也就是说 一行汉子的地步到另一行汉子的地步 , 就是这两行文字之间的行高
CSS 背景 ( background )
背景颜色 ( background-color )
background-color: #ccc;
背景图片 ( background-image )
background-image: url('image/test.png');
背景平铺 (background-repeat)
background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数 | 作用 |
---|---|
repeat | 默认 , 背景图片在纵向和横向平铺显示 |
no-repeat | 不平铺 |
repeat-x | x轴 横向平铺 |
repeat-y | y轴 纵向平铺 |
背景位置 ( background-position ) 重点
background-position: length || length
background-position: position || position
background-position: x坐标 y坐标;
background-position: 10px 50px;
参数 | 值 |
---|---|
length | 百分数 | 浮点数和单位标识符组成的长度值 |
position | top | bottom | left | right | center 方位名词 |
注意 :
- 必须先指定 background-image 属性
- position 后面跟 x坐标 和 y坐标 , 可以使用方位名词 , 也可以使用精确单位
- 如果只指定了一个方位名词 , 另一个默认居中
- 如果至指定一个方位名词 , 默认是 x 另一个默认是 y 居中
- 如果指定两个值 , 两个值都是方位名词 , 则两个值顺序无关 比如 left top 和 top left 效果一致
- 如果指定两个值 , 精确单位和方位名词混用 , 则第一个值是 x 第二个值是 y
背景附着 ( background-attachment )
解释 : 背景附着就是解释背景是滚动还是固定的
background-attachment: scroll | fixed
参数 | 作用 |
---|---|
scroll | 默认 背景图像是跟随对象内容滚动 |
fixed | 背景图像固定 |
背景简写 ( background )
- background : 属性的值书写顺序没有强制要求 , 为了可读性建议
- background: 背景颜色 背景图片 背景平铺 背景滚动 背景位置
background: #ccc url(images/image.png) no-repeat fixed center top;
背景透明 ( CSS3 )
background: rgba(0, 0, 0, 0.2);
- 最后一个参数是 alpha 透明度 取值范围 0~1 之间
- 背景半透明是指盒子半透明 , 盒子的内容不受影响
- 低于 IE9 的版本不支持
CSS 三大特性
CSS 层叠性
- 概念 : 所谓层叠性是指多种css样式的叠加 ; 是浏览器处理冲突的方法 , 如果一个属性通过两个相同的选择器设置属性在同一个元素上 , 这个时候会有一个属性被另一个属性层叠掉 ;
- 原则 :
- 样式冲突 , 遵循就近原则 , 哪个样式离结构近 , 就执行哪个样式
- 样式不冲突 , 不会层叠
CSS 继承性
- 概念 : 子标签会继承父标签的一些样式 , 如字体颜色和字号 ; 想要设置一个可继承属性 , 只需要将它应用与父元素即可
- 注意 :
- 恰当的使用继承可以简化代码 , 降低 css 的复杂性 , 比如有很多子级都需要某个样式 , 可以给父级指定一个
- 子元素可以继承父元素的样式 ,
text-, font-, line-, color 这些属性都是可以继承的
CSS 优先级
- 概念 : 定义css样式的时候 , 经常出现两个或多个规则用在一个元素上 , 此时
- 选择器相同 , 则执行层叠性
- 选择器不同 , 就会出现优先级的问题
权重计算公式
标签选择器 | 计算权重公式 |
---|---|
继承 或者 * | 0,0,0,0 |
每个元素( 标签选择器 ) | 0,0,0,1 |
每个类 , 伪类 | 0,0,1,0 |
每个 id | 0,1,0,0 |
每个行内样式 style="" | 1,0,0,0 |
每个 !important | ∞ 无穷大 |
权重叠加
我们经常用交集选择器 , 后代选择器等 ; 是有多个基础选择器组合而成,那么此时,就是会出现权重叠加。
注意 :
- 数位之间没有进制 , 所以不会存在 10 个 div 能赶上一个类选择器的情况。
- 继承的权重是 0
- 如果权重相同,则会根据层叠性,就近原则;
- 2 个特殊标签 链接 和 h标题 他们浏览器有自己默认的样式 , 继承的权重为 0 ,所以还要单独给链接和标题一个样式。
原文地址:https://www.cnblogs.com/article-record/p/12246949.html
时间: 2024-10-08 13:19:32