神刀安全网

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

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-ohild{ /* 选择父元素中的第一个元素,并且必须是img元素 */ border:1px solid #CCC; } img:last-ohild{ /* 选择父元素中的倒数第一个元素,并且必须是img元素 */ border:1px solid #CCC; } img:only-ohild{ /* 选择父元素中的唯一的一个元素,并且必须是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-ohild(2){ /* 选择父元素中的第二个元素,并且必须是img元素 */ border:1px solid #CCC; } img:nth-last-ohild(2){ /* 选择父元素中的倒数第二个元素,并且必须是img元素 */ border:1px solid #CCC; } img:nth-ohild(2n){ /* 选择父元素中的偶数项元素,并且必须是img元素 */ border:1px solid #CCC; } img:nth-ohild(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文字阴影

分享到:更多 ()