css小常识

 

已定义好的选择器

: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);
}