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-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>

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

CSS3动画,为你带来极致的视觉体验!

HTML5学堂:随着网络的发展,浏览器具有更强的渲染与高级代码的执行能力。所以在当前,大量的动画效果由原来的JavaScript制作正慢慢的被CSS3所替代,究...

3317
来自专栏向治洪

flexbox基本原理

新版的flexbox规范分两部分:一部分是container,一部分是 items。 flexbox是一整套布局规范,包含了多个css属性,所以学习起来比`fl...

1907
来自专栏用户画像

H5新增的块级的语义元素

figure元素表示一段独立的流内容,一般表示文档主体流内容的一个独立单元。使用<figcaption>元素为figure元素组添加标题。

602
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略

985
来自专栏GIS讲堂

"GIS讲堂"第八课—结合UDIG实现图层样式的定制

在本节课程中,分别讲述了三种类型的点的样式,包括:简单点样式、组合点样式、图标点样式。

1304
来自专栏菜鸟前端工程师

JavaScript学习笔记024-默认行为0滚轮事件

1072
来自专栏WebDeveloper

那些经常使用的 CSS3属性

1032
来自专栏Golang语言社区

一篇通俗易懂的CSS层叠顺序与层叠上下文研究

网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说...

3787
来自专栏性能与架构

CSS选择器的性能优化

CSS选择器的性能排名(从最快者开始): (1)识别器:#id (2)类:.class (3)标签:div (4)相邻兄弟选择器:a + i (5)父类选择器:...

3117
来自专栏运维小白

开源博客markdown插入表格语法

普通的表格 Markdown 代码: | 一个普通标题 | 一个普通标题 | 一个普通标题 | | ------ | ------ | ------ | | 短...

24910

扫码关注云+社区

领取腾讯云代金券