已定义好的选择器
:root - 将样式绑定到页面的根元素中
:not - 排除某个选择器样式
.span:not(:nth-of-type(1)){ // 除了第一个元素 其他span 颜色变为红色
color: red;
}:empty - 使用该选择器来制定当元素内容为空白时使用的样式
.span:empty{
display: block;
width: 100px;
height: 100px;
background: #2ac06d;
color: red;
}
<div class="div">
<span class="span"></span>
<span class="span">2222</span>
<span class="span">3333</span>
</div>:first-child - 指定第一个子元素的样式 ( 是相对的 )
:last-child - 指定最后一个子元素的样式 ( 是相对的 )
<style>
.span:first-child{
color: red;
}
.span:last-child{
color: blue;
}
</style>
<div class="div">
<span class="span">
00
<span class="span">
11
</span>
<span class="span">
22
</span>
</span>
<span class="span">33</span>
</div>
选择奇数偶数行
odd - 奇数、even - 偶数
:nth-of-type(odd) 选择奇数行
:nth-of-type(even) 选择偶数行
<style>
.span:nth-of-type(odd){
color: red;
}
.span:nth-of-type(even){
color: blue;
}
</style>
<div class="div">
<span class="span">1111</span>
<span class="span">2222</span>
<span class="span">3333</span>
</div>
补充:
也可以写成如下:
test:nth-of-type(2n){} // 偶数选择器
test:nth-of-type(2n-1){} // 奇数选择器
css正则选择器
注意:以下三个选择器 可以模糊匹配
(1) [ class*=x ] class类名中有d的都会被选中。
(2) [class^=x] 选中以x开头的class类名。
(3) [class$=x] 选中以x结尾的class类名。
注意:以下三个选择器值必须是一个整体(不能模糊匹配)
(4)[ property=value ] 选中属性property等于 value的所有元素。
(5)[ property~= value] 选中property属性中,包含value的所有元素
(6) [ property|=value ] 选中属性值是value开头的所有元素
+ > 选择器
+ element + element —— 选择紧接在 <div> 元素之后的所有 <p> 元素。
> element > element —— 选择父元素为 <div> 元素的所有 <p> 元素。
css引入外部字体
@font-face{
font-family: ditails; /*引入的字体名字*/
src:url('./static/ditails.ttf') // 字体下载好之后引入
}
.year{
font-family: ditails; /*在需要改变字体的类中使用该字体*/
}
调整字与字间距 (px)
letter-spacing
字与字间距_字符间距离
段落开头缩进(px)
text-indent
段落缩进
css常用渐变
background-image: linear-gradient()
上下渐变:
/*top:相当于0deg 从下到上*/
xxx{
background-image: linear-gradient(to top, rgba(), rgba(), ···)
}
/*bottom:相当于180deg 从上到下*/
xxx{
background-image: linear-gradient(to bottom, rgba(), rgba(), ···)
}
左右渐变:
xxx{
background-image: linear-gradient(to left, rgba(), rgba(), ···)
}
xxx{
background-image: linear-gradient(to right, rgba(), rgba(), ···)
}
有角度的渐变(比如:30度角渐变):
xxx{
background-image: linear-gradient(30deg, rgba(), rgba(), ···)
}
** css计算函数: calc()
注意:中间必须要有空格,否则该函数无效!
height或widthpaddding或margin :calc(100% - 50px); 计算一个元素的宽高
** css计算函数: val() 参数为自定义变量
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}