html+css学习笔记015-H5新选择器0文字阴影
2018-06-03 本文已影响33人
Mr柳上原
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>
