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 条评论
登录 后参与评论

相关文章

  • 日历案例

    天天_哥
  • java写数据接口

    天天_哥
  • DOM的方法

    天天_哥
  • CSS 使用 Flex 布局来制作一个骰子

    我在上一篇博文 CSS 布局_2 Flex弹性盒中,对 Flex 弹性盒有着详细的介绍,在这里,我们使用 Flex 弹性盒布局,来实现骰子的布局,一个面可以设置...

    Nian糕
  • 创建一个新的 Huginn Agent

    请注意:Huginn API 一直在改进,因此一些无用的 Agent 或将被放弃。我们非常希望您能将您的使用方法以及 API 应该更改什么告诉我们。查看 #60...

    huginn 中文网
  • 筛选 RSS 源,制作新的全文 RSS 源

    问题:假如你喜欢的网站只提供摘要型的 RSS 源,但是你希望能在 RSS 阅读器中阅读全文 RSS,同时还希望它只推送某些特定的文章 解决方法:利用 Hugin...

    huginn 中文网
  • 利用 Cloudmailin 服务解析邮件

    Cloudmailin 服务可以将邮件转化成 HTTP POST,这与 Webhook Agent 结合使用的话,可以实现很多有趣的功能,具体的设置步骤如下:

    huginn 中文网
  • 在Mac下配置PHP开发环境:Apache+php+MySql

    <span class="pln">sudo apachectl start</span>

    慕白
  • 对libevent+多线程服务器模型的C++封装类

    最近在看memcached的源码,觉得它那种libevent+多线程的服务器模型真的很不错,我将这个模型封装成一个C++类,根据我的简单测试,这个模型的效率真...

    bear_fish
  • linux 定时任务 Crontab 使用方法

    用户所建立的 crontab 文件中,每一行都代表一项任务,每行的每个字段代表一项设置,它的格式共分为六个字段,前五段是时间设定段,第六段是要执行的命令段,格式...

    huginn 中文网

扫码关注云+社区

领取腾讯云代金券