CSS3(一)

最新推荐文章于 2024-05-04 17:52:57 发布

summer_zmc

最新推荐文章于 2024-05-04 17:52:57 发布

阅读量299

点赞数

分类专栏： html5+css3 文章标签： css3 测试

本文链接：https://blog.csdn.net/summer_zmc/article/details/53823641

版权

html5+css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS3

设计理念
- 渐进增强 (progressive enhancement) : 开始只构建站点的最少特性,然后不断的针对浏览器追加功能
- 优雅降级 (graceful degradation) : 开始就构建站点的完整功能,然后针对浏览器测试和修复

CSS3选择器

    div{
        width: 400px;
        margin: 0 auto;
        border: 1px solid green;
        padding: 20px;
    }
    span{
        display:block;
    }
    div p {
        display: inline-block;
        width: 50px;
        height: 50px;
        line-height: 50px;
        margin: 10px;
        background: orange;
        color: #fff;
        font-size: 18px;
        text-align: center;
        font-weight: bold;
    }

<body>
<div>
    <span>111</span>
    <span>222</span>
    <p class="summer su">1</p>
    <p class="summer">2</p>
    <p class="summer-zmc">3</p>
    <p class="p4 su">4</p>
    <p class="summer-zmc summer">5</p>
    <p class="su">6</p>
    <p class="su-mmer">7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
</div>
<div class="a1" style="width: 100px;height: 100px; border:1px solid black">
    <p>p1</p>
</div>
<div class="a1" style="width: 100px;height: 100px; border:1px solid black">
    <p>p.1</p>
    <span>span.1</span>
</div>
<div></div>
<a href="#div1">点击div1元素背景色变为粉色</a>
<div id="div1">
    url地址里指向的目标元素，在CSS里用:target表示
    url地址里指向的目标元素，在CSS里用:target表示
    url地址里指向的目标元素，在CSS里用:target表示

</div>
</body>

结构选择器

:nth-child(n)

div p:nth-child(1){
    /*1.查找div的第一个子元素 2.子元素的标记名是否是p标签*/
    background: red;
}

:nth-child(2n)/偶数元素/

div p:nth-child(2n){
    /*1.查找div的偶数子元素 2.子元素的标记名是否是p标签（n从0开始）*/
    background: blue;
}

:nth-child(2n+1)/奇数元素/

  div p:nth-child(2n+1){
    /*1.查找div的奇数子元素 2.子元素的标记名是否是p标签（n从0开始）*/
    background: yellow;
}

:nth-of-type(n)

div  p:nth-of-type(2){
    background: pink;
}

:first-child

div :first-child{
    background: purple;
}

:first-of-type

 div p:first-of-type{
    background: palegreen;
}

:last-child

div :last-child{
    background:  powderblue;
}

:last-of-type

div p:last-of-type{
    background: green;
}

:only-child/只有一个子元素/

.a1 :only-child{
        background: green;
    }

only-of-type/同种标记名的子元素只有一个/

div :only-of-type{
        background: grey;
    }

:empty

div:empty{
    height: 40px;
    width: 40px;
    background: black;
}

否定选择器

:not()

div p:not(.p4) {
    border-radius: 50%;
}

属性选择器

E[attr=val]

div p[class~="su"]{/*类名只能一个并且是su才满足*/
    border-radius: 50%;
}

E[attr|=val] 只能等于val 或只能以val-开头

div p[class~="su"]{/*类名只能是su或者只能以su-开头才满足*/
    border-radius: 50%;
}

E[attr*=val] 包含val字符串

div p[class~="su"]{/*类名含有su字符串就满足*/
    border-radius: 50%;
}

E[attr~=val] 属性值有多个,其中有一个是val

div p[class~="su"]{/*可以有多个类名，其中一个是su就满足*/
    border-radius: 50%;
}

E[attr^=val] 以val开头

div p[class^="su"]{/*以su开头就满足*/
    border-radius: 50%;
}

E[attr$=val] 以val结尾

div p[class$="su"]{/*以su结尾就满足*/
    border-radius: 50%;
}

目标伪类选择器
- :target用来匹配url指向的目标元素
  存在url指向该匹配元素时,样式效果才会生效
```
 :target{
    display: block;
}

#div1:target{

    background: pink;
}
```

伪元素选择器

: first-line 匹配第一行文本

 #div1::first-line{
    background: blue;
}

: first-letter 匹配第一个首字符

 #div1::first-letter{
    background: blue;
}

: before 和 : after DOM元素前后插入额外的内容

 #div1::before{
    content:"000";
    color: green;
}

#div1::after{

    content:"1111";
    color: red;
}

summer_zmc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3(一)

CSS3设计理念渐进增强 (progressive enhancement) : 开始只构建站点的最少特性,然后不断的针对浏览器追加功能优雅降级 (graceful degradation) : 开始就构建站点的完整功能,然后针对浏览器测试和修复CSS3选择器 div{ width: 400px; margin: 0 auto; borde
复制链接

扫一扫