CSS3(一)

来源：互联网发布：java去除验证码干扰线编辑：程序博客网时间：2024/05/17 19:16

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

0 0