CSS3

1.选择器
属性选择器
        //其中attr不一定是class,也可以是name,href,id,type。。。。
        /*选择具有att属性的E元素*/
        .con p[class]{
            background: pink;
        }
        /*选择具有att属性且属性值等于val的E元素。*/
        .con p[class="two"]{
            color: white;
        }
        /*选择具有att属性且属性值为以val结尾的字符串的E元素。*/
        .con p[class$="one"]{
            color: deepskyblue;
        }
        /*选择具有att属性且属性值为以val开始的字符串的E元素。*/
        .con p[class^="d"]{
            text-decoration: line-through;
        }
       
        /*选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素(包含只有一个值且该值等于val的情况)。*/
        .con p[class~="dail"]{
            font-size: 20px;
        }
        
        /*选择具有att属性,其值是以val开头并用连接符"-"分隔的字符串的E元素;如果值仅为val,也将被选择。*/
        .con p[class|="three"]{
            color: white;
        }
        /*选择具有att属性且属性值为包含val的字符串的E元素。*/
        .con p[class*="re"]{
            color: white;
        }
伪类选择器
      E:nth-child(n) { sRules }
        /*匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。*/
        li:nth-child(2n){color:#f00;} /* 偶数 */
        li:nth-child(2n+1){color:#000;} /* 奇数 */
        li:nth-child(even){color:#f00;} /* 偶数 */
        li:nth-child(odd){color:#000;} /* 奇数 */


        E:nth-of-type(n) { sRules }
        /*匹配同类型中的第n个同级兄弟元素E。*/

        E:empty { sRules }
        /*匹配没有任何子元素(包括text节点)的元素E。*/
仅仅利用选择实现样式
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<style>
        .caleder{
            width: 500px;
            padding: 10px;
            box-sizing: border-box;
            margin: 100px auto;
            color: #444;
            font-size: 16px;
            border: 1px solid #eee;
            text-align: center;
        }
        .caleder div:first-child p:first-child{
            border-bottom: 1px solid #eee;
            line-height: 56px;
            background: deepskyblue;
            color: white;
            padding-bottom: 4px;
        }
        .caleder span{
            display: inline-block;
            width: 60px;
        }
        .caleder div:nth-of-type(2) p:nth-child(2n){
            font-size: 12px;
            color: #ccc;
            border-bottom: 1px solid #eee;
            line-height: 20px;
        }
        .caleder div:nth-of-type(2) p:last-child{
            border: none;
        }
        .caleder div:nth-of-type(2) p:nth-of-type(1) span:nth-child(-n+3){
            color: #ccc;
        }
        .caleder div:nth-of-type(1) p:nth-child(1) span:nth-child(1){
            color: red;
        }
        .caleder div:nth-of-type(1) p:nth-child(1) span:nth-child(7){
            color: red;
        }
        .caleder div:nth-of-type(2) p:nth-child(-2n+9) span:nth-child(1){
            color: red;
        }
        .caleder div:nth-of-type(2) p:nth-child(-2n+7) span:nth-child(7){
            color: red;
        }
        .caleder div:nth-of-type(2) p:nth-child(4) span:nth-child(2){
            color: red;
        }
        .caleder div:nth-of-type(2) p:nth-child(8) span:nth-child(3){
            color: red;
        }

        .caleder div:nth-of-type(2) p:nth-last-of-type(2) span:nth-child(n+5){
            color: #ccc;
        }



    </style>
</head>
<body>
<div class="caleder">
    <div>
        <p><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></p>
    </div>
    <div>
        <p><span>30</span><span>31</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></p>
        <p><span>十一</span><span>十二</span><span>十三</span><span>十四</span><span>十五</span><span>十六</span><span>十七</span></p>
        <p><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span></p>
        <p><span>十八</span><span>立冬</span><span>二十</span><span>廿一</span><span>廿二</span><span>廿三</span><span>廿四</span></p>
        <p><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span></p>
        <p><span>廿五</span><span>廿六</span><span>廿七</span><span>廿八</span><span>廿九</span><span>寒衣节</span><span>初二</span></p>
        <p><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span></p>
        <p><span>初三</span><span>初四</span><span>小雪</span><span>初六</span><span>初七</span><span>初八</span><span>初九</span></p>
        <p><span>27</span><span>28</span><span>29</span><span>30</span><span>1</span><span>2</span><span>3</span></p>
        <p><span>初十</span><span>十一</span><span>十二</span><span>十三</span><span>艾滋病日</span><span>下元节</span><span>十六</span></p>
    </div>
</div>
</body>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏河湾欢儿的专栏

css3选择器

属性选择器 E[attr]只使用属性名,但没有确定任何属性值 E[type="text"]指定属性名,并指定了该属性的属性值 E[attr~="value...

972
来自专栏HTML5学堂

JQuery选择器(中)

HTML5学堂:在学习JQuery开发的时候,选择器有多种,而我们将接着介绍选择器的其他类型,希望对大家有帮助! 5.临近选择器: $("mix+mix"),选...

3669
来自专栏Golang语言社区

GO-字符串常用操作

package main import ( "fmt" "strconv" "strings" ) func ma...

3415
来自专栏天天

childNodes属性和nodeType属性

1514
来自专栏IMWeb前端团队

JavaScript强化教程——style、currentStyle、getComputedStyle区别介绍

本文为 H5EDU 机构官方 HTML5教程,主要介绍:JavaScript强化教程 —— style、currentStyle、getComputedStyl...

2156
来自专栏Golang语言社区

Go 语言切片(Slice)

Go 语言切片是对数组的抽象。 Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组...

3859
来自专栏Golang语言社区

【Golang语言基础】Go 语言切片(Slice)

Go 语言切片是对数组的抽象。 Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组...

2878
来自专栏闻道于事

JavaWeb(八)JQuery

jQuery 市场用得比较多两个框架: jQuery 比较适合做一些互联网 的应用(12306.com,蘑菇街,美丽说,聚美) extjs 比较适合做后台管理系...

2804
来自专栏老司机的技术博客

golang学习笔记10:数组切片Slice

832
来自专栏前端知识分享

第138天:Web前端面试题总结(编程)

2、一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏览器大小变化(比如浏览器为500,右边div为400,浏览器为...

953

扫码关注云+社区