欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css3(1)

程序员文章站 2022-05-11 09:07:09
...

z-index
(1)必须是已经脱离的元素设置z-index才会生效
(2)设置父元素z-index无效 子元素永远压在父元素之上,必须设置position属性默认的堆叠顺序是下面的元素在页面的最上面
1.兄弟选择器
具备相同父级元素的平级之间称为兄弟
注意:兄弟选择器只能往后找不能往前找
相邻兄弟选择器,获取紧紧挨着某元素后面的兄弟

选择器1+选择器2{}

2.通用兄弟选择器
获取某元素后面所有满足条件的兄弟元素

选择器1~选择器2

3.属性选择器
允许通过元素所附带的属性及其赋值来匹配页面元素
基本语法

[attr]{} 表示任意属性
可以匹配页面中所有附带attr属性的元素
elem[attr}{} 匹配页面中所有附带attr属性的elem元素  可以附带多个属性
elem[attr1][attr2]
elem[attr=value]匹配属性attr的值为value的elem元素
[attr^='value']匹配属性值以value开头的元素
[attr$='value']匹配以属性值以value结尾的元素
[attr*='value']匹配以属性值含有value的元素
[attr~='value']匹配以属性值中含有value单纯的元素

4.伪类选择器
锚点:突出显示活动的HTML元素,匹配被**的锚点元素

elem:target{}	

结构伪类
(1):first-child{} 一个元素父元素的第一个孩子 孩子中的大哥
(2):last-child{} 一个元素父元素的最后一个孩子
(3):nth-child(n)一个元素父元素的第n个孩子 n从1开始
(4):empty匹配没有子元素的元素 回车 空格 文本都不能写
(5):only-child匹配的元素的父元素只有一个子元素
(6)not 否定伪类,将满足选择器的元素排除在外

:not(selector){}

5.伪元素选择器
:first-letter{} 匹配修改第一个字母的样式
:first-line{} 匹配修改第一行的样式
::first-selection{} 匹配修改选中的样式 只支持修改背景颜色和字体颜色 注意:是两个顿号
内容生成
使用css动态向某元素中插入一段“内容”

:before{
	content:'内容';
	display:block;
}