美文网首页我爱编程程序员菜鸟前端工程师
html+css学习笔记015-H5新选择器0文字阴影

html+css学习笔记015-H5新选择器0文字阴影

作者: Mr柳上原 | 来源:发表于2018-06-03 23:08 被阅读33次

    Author:Mr.柳上原

    • 付出不亚于任何的努力
    • 愿我们所有的努力,都不会被生活辜负
    • 不忘初心,方得始终

    ‘ 男儿本应走四方,不遇温柔不回首 ’

    有时候,在一个城市里生活久了

    就想要逃离

    想要去一个陌生的城市重新开始

    无关生存,也不为逃避

    而是觉得没有留下来的理由和牵挂吧

    毕竟生活中不会像电影《向左走向右走》那样

    电影的最后终会相遇

    而现实中

    或许永远不会相见

    陌生的城市,熟悉的角落

    日复一日

    日复又一日......

    不说我了

    能让你们在一个地方留下来的又是什么呢?

    <!DOCTYPE html> <!-- 文档类型:标准html文档 -->
    
    <html lang='en'> <!-- html根标签 翻译文字:英文 -->
    
    <head> <!-- 网页头部 -->
    
    <meat charset='UTF-8'/> <!-- 网页字符编码 -->
    
    <meat name='Keywords' content='关键词1,关键词2'/>
    
    <meat name='Description' content='网站说明'/>
    
    <meat name='Author' content='作者'/>
    
    <title>前端59期学员作业</title> <!-- 网页标题 -->
    
    <script>
    document.creatElement('header');
    </script> <!-- 新标签兼容性问题js解决方法:需要配合标签css样式 -->
    
    <!-- [if It IE 9] >
    <script src='https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js'></script>
    <![endif] --> <!-- 新标签兼容性问题全局引用js解决方法 -->
    
    -->
    
    <link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
    
    <style type='text/css'> /*内部样式表*/
    
    header{
    display:block; /* 新标签兼容性问题js解决方法:css样式配合 */
    }
    
    
    
    /* h5新选择器 */
    
    /* 普通选择器 */
    li ~ img{ /* 选中所有父元素li里的子元素为img的标签 */
    width:2px;
    }
    img[class='ccc']{ /* 选中所有有class属性,并且class=ccc的img标签 */
    width:2px;
     } 
    img[class~='ccc']{ /* 选中所有有class属性,并且class=ccc 或 包含ccc值的img标签 */
    width:2px;
     } 
    img[class|='ccc']{ /* 选中所有有class属性,并且class=ccc 或 以ccc-开头的img标签 */
    width:2px;
     } 
    img[src^='im']{ /* 选中所有有src属性,并且属性值以im开头的img标签 */
    border:1px solid #CCC;
    }
    img[src$='ng']{ /* 选中所有有src属性,并且属性值以ng结尾的img标签 */
    border:1px solid #CCC;
    }
    img[src*='jp']{ /* 选中所有有src属性,并且属性值中有jp的img标签 */
    border:1px solid #CCC;
    }
    
    /* 伪元素选择器 */
    img:first-of-type{ /* 选择父元素中的第一个img元素 */
    border:1px solid #CCC;
    }
    img:last-of-type{ /* 选择父元素中的最后一个img元素 */
    border:1px solid #CCC;
    }
    img:only-of-type{ /* 选择父元素中的唯一的一个img元素 */
    border:1px solid #CCC;
    }
    img:first-child{ /* 选择父元素中的第一个元素,并且必须是img元素 */
    border:1px solid #CCC;
    }
    img:last-child{ /* 选择父元素中的倒数第一个元素,并且必须是img元素 */
    border:1px solid #CCC;
    }
    img:only-child{ /* 选择父元素中的唯一的一个元素,并且必须是img元素 */
    border:1px solid #CCC;
    }
    img:nth-of-type(2){ /* 选择父元素中的第二个img元素 */
    border:1px solid #CCC;
    }
    img:nth-last-of-type(2){ /* 选择父元素中的倒数第二个img元素 */
    border:1px solid #CCC;
    }
    img:nth-child(2){ /* 选择父元素中的第二个元素,并且必须是img元素 */
    border:1px solid #CCC;
    }
    img:nth-last-child(2){ /* 选择父元素中的倒数第二个元素,并且必须是img元素 */
    border:1px solid #CCC;
    }
    img:nth-child(2n){ /* 选择父元素中的偶数项元素,并且必须是img元素 */
    border:1px solid #CCC;
    }
    img:nth-child(2n-1){ /* 选择父元素中的基数项元素,并且必须是img元素 */
    border:1px solid #CCC;
    }
    div:first-line{ /* 选择文字的第一行 */
    color:#CCC;
    }
    div:first-letter{ /* 选择文字的第一行的第一个字 */
    font-size:2em;
    color:#CCC;
    }
    div::selection{ /* 鼠标选中文字时 */
    color:green;
    }
    p:empty{ /* 选择空标签p */
    color:green;
    }
    p:not(.ppp2){ /* 选择除了.ppp2的p标签 */
    color:green;
    }
    p:not(:first-of-type){ /* 选择除了第一个p标签的p标签 */
    color:green;
    }
    input:enabled{ /* 选择生效的可以交互的input标签 */
    border:1px solid red;
    }
    input:disabled{ /* 选择无效的不能交互的input标签 */
    border:1px solid red;
    }
    input:checked{ /* 选择默认选中的input标签 */
    border:1px solid red;
    }
    
    p{ /* 文字阴影样式 */
    box-shadow:0px 0px 10px 5px  #CCC,2px 2px 20px 5px  #red;
    text-shadow:0px 0px 10px 5px  #CCC,2px 2px 20px 5px  red,4px 4px 40px 5px green;
    h-shadow 水平方向阴影位置
    v-shadow 竖直方向阴影位置
    blur 模糊半径
    color 阴影颜色
    }
    
    </style>
    
    </head>
    
    <body> <!-- 网页主干:可视化区域 -->
    
    <header>
    <ul>
    <li>
    <img class='ccc ddd' src='./img.png' alt=' '/>
    <img class='ccc ccc-dd' src='./images.jpg' alt=' '/>
    <img class='ccc ccc-dd' src='./images.gif' alt=' '/>
    </li>
    <li>
    <img class='ccc' src='./images.png' alt=' '/>
    <img class='ccc ccc-dd' src='./images.jpg' alt=' '/>
    </li>
    </ul>
    <div>.............................</div>
    <p class='ppp1'></p>
    <p class='ppp2'>......</p>
    <input type='text' name=''/>
    <input type='text' name='' disabled='disabled'/>
    <input type=radio' name='sex' id='sexa'/>
    <label for='sexa'>男</label>
    <input type=radio' name='sex' id='sexb'/>
    <label for='sexb'>女</label>
    <input type='radio' name='sex' checked='checked'/>
    </header>
    
    </body>
    
    </html>
    

    相关文章

      网友评论

        本文标题:html+css学习笔记015-H5新选择器0文字阴影

        本文链接:https://www.haomeiwen.com/subject/cmvssftx.html