HTML-css-2020/07/12(5)
程序员文章站
2022-07-07 20:10:52
关系选择器子元素选择器 父元素>子元素{}后代选择器(范围更大) 祖先 后代{}兄弟选择器(只选下边的) 上一个+下一个{} //必须紧挨着 兄~弟{} //后面所有的兄弟属性选择器元素[属性]{}元素[属性=值]{}元素[属性值^=值]{} //选择指定值开头的元素元素[属性值$=值]{} //选择指定值结尾的元素......
关系选择器
子元素选择器 父元素>子元素{}
后代选择器(范围更大) 祖先 后代{}
兄弟选择器(只选下边的) 上一个+下一个{} //必须紧挨着
兄~弟{} //后面所有的兄弟
属性选择器
元素[属性]{}
元素[属性=值]{}
元素[属性值^=值]{} //选择指定值开头的元素
元素[属性值$=值]{} //选择指定值结尾的元素
元素[属性值*=值]{} //属性值中含有指定值
伪类选择器 ul>li:first-child{}
ul>li :last
ul>li :nth-child(){} //选中任意一个()内填0,1,2,3……
//()内2n+1或odd选奇数位
//even 偶数
//以上元素都是按总顺序排列;不单是<ul>中的<li>;还必须是第一个元素(所有子元素排序)
//而与之相对的是(表示同类型作比较排第几)
:first-of-type
:nth-of-typy()
无论列表怎么变,只对列表中第一个子元素操作
:not()除了。。。
除了第三个都设置黄绿色
4.超链接伪类(a元素伪类)
a:link{ color:red;} //没有访问过的链接(正常的链接)
a:visited {color:yellow;} //访问过的链接(只改颜色)
a:hover{ } //当鼠标移动到链接位置;链接变换形态
a:active{} //点击别松手时变换形态
5.伪元素
首字母下沉
<p>你好</p>
……
p::first-letter{} //选中首字母
p::first-line {} //首行
p::selection{color:red;} //选中变色
<div>中特殊位置
div::before{} //字符起始位置
div::after{
content:'hello'; //字符结束位置添加hello
}
结合content 使用(通过css添加的东西无法被选中)
6.样式的继承(对一个元素设置样式;也会应用到后代元素中)
并不是所有的都继承;比如背景相关的
<style>
p{
background-color:red; //对p元素设置背景颜色
}
</style>
这种就不会被继承
7.选择器的优先级(依次递减)
对同一元素改动同一样式
10个类权重相加还是小于id的权重
#d{color:red;} //权重 100
div#d{color:blue;} //权重 100+1
如果权重相同,使用后面的
分组选择器例外(单个计算)
<style>
*{ //统配选择器
color:red;
}
div{color:blue;} //元素选择器
</style>
<div>
<p>我是红色</p> //统配权重0;继承没有权重所以听统配的*{}
</div>
!important获得最高权重
8.长度单位
a.像素
b.相对于父元素的百分比(一起变)
c.em根据字体大小改变
d.rem 相对于根元素(html)字体大小
颜色单位
RGB值(三原色不同浓度配成的颜色)
rgb(红色,绿色,蓝色) //每一个值0-255(0-100%)
RGBA (+不透明度;1完全不透明;.5半透明; 0完全透明)
十六进制#001122 (数值00-ff)
本文地址:https://blog.csdn.net/weixin_45907018/article/details/107294579