css3初探

硅谷大街的羊

于 2020-05-26 11:55:44 发布

阅读量68

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/zengjingjun2000/article/details/106337600

版权

css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

选择器

关系选择

父子
E>F 直接子元素
E+F 当前e元素 下一个满足条件的的兄弟元素节点
E~F 并列结构的满足条件的所有兄弟节点

属性选择

css2(特殊性强)

E[ATTR ~= “val”] 属性名是”attr“ 属性值存在独立的“a”
E[ATTR |= “val”] 选中”val“开头或者”val-“的元素

css3（正则）

E[ATTR ^= “val”] 以……开头
E[ATTR $= “val”] 以……结尾
E[ATTR *= “val”] 任意在哪

伪对象选择

E::placeholder input::placeholder 只能改变默认字体颜色
E::selection 改变被选中之后的状态只能设置单个属性
color
background-color
text-shadow

伪类选择器

被选中元素的一种状态
1.
E:not(s)
html:root（根标签选择器）根节点和html 一样）
E:target （…之后那个div上的id变成了 location.hash 的值了 div就改变）
2.考虑其他元素的影响
伪类选择器被选择元素的一种状态要把元素选出来不只看他这一类
E:ﬁrst-child
E:last-child
E:only-child E:nth-child(n) E:nth-last-child(n)
3.常用此类型的
E:ﬁrst-of-type E:last-of-type E:only-of-type .
E:nth-of-type(n) E:nth-of-last-type(n)
5.
E:empty 啥都没有 E:checked 操作input>``span

  input:checked + span{
            background-color: aquamarine;
        }
        input:checked + span::after{
            content: "隔离老王";
            color: aliceblue;
        }

E:enabled E:disabled
6.
E:read-only E:read-write

边框和背景

边框

border-radius

居中

    div{
            width:100px;
            height: 100px;
            border: 1px;
            position: absolute;
            left: calc(50%-50px);
            top: calc(50%-50px);
         	 /上右下左/
        }
        
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20200526075002518.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plbmdqaW5nanVuMjAwMA==,size_16,color_FFFFFF,t_70)
### box-shadow
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200526075337404.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plbmdqaW5nanVuMjAwMA==,size_16,color_FFFFFF,t_70)
### border-image
border-image-source | [border-image-slice , border-image-width , borderimage-outset ] | border-image-repeat
border-image-source url（）/ 可以渐变linear-gradient（red,black）
border-image-slice(切割线 不能填px 数/百分数) fill内容区填充![在这里插入图片描述](https://img-blog.csdnimg.cn/20200526091917617.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3plbmdqaW5nanVuMjAwMA==,size_16,color_FFFFFF,t_70)
border-image-repeat：(strech) round space repeat
border-image-outset：不常用
border-image-width：默认值为1(倍) 若填auto 只默认 slice单位 (px）
### background-image
linear-gradient
radial-gradient
一个容器多个图片 
配合`background-image: ;
            background-size: 100px 200px,100px 200px;
            background-repeat: no-repeat;
            background-position: 0,0,100px 0;
            /* 默认center */`