专栏首页菜鸟前端工程师html+css学习笔记015-H5新选择器0文字阴影

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

相关文章

  • html+css学习笔记002-盒子模型

    怕的不是我们不懂英文 怕的不是我们不懂操作电脑 怕的更不是我们不懂基础程序语言

    Mr. 柳上原
  • react-开发经验分享-后端请求数据后进行本地存储筛选

    Mr. 柳上原
  • html+css学习笔记017-H5新背景属性0颜色0倒影0遮罩

    Mr. 柳上原
  • 「实用小技巧」如何在WordPress网站添加动态友链的代码分享

    先解释一下,这个【动态友链】主要是我为了方便取的名字,估计没有人知道这个功能叫什么,也没有专门的称呼,所以我们给他命名为动态友情链接;最近看到很多wp程序的博客...

    wordpress建站吧
  • 目标检测新突破!来了解Res2Net深度多尺度目标检测架构

    标题 | Res2Net: New deep learning multi-scale architecture, for improved object de...

    代码医生工作室
  • 目标检测新突破!来了解Res2Net深度多尺度目标检测架构

    正如谷歌大脑的论文EfficientNet中展示的那样,在CNN架构各个方面(宽度,深度,分辨率)的探索所带来的的回报正在急剧减少。

    AI研习社
  • 什么是BFC

    BFC 就是块级格式上下文,是页面盒模型布局中的一种 CSS 渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响。那么首先先来说一下常见的三种控制...

    无邪Z
  • 物联网知识科普(2)——物联网十大开源操作系统

    物联网作为新时代的宠儿,有其独到之处,操作系统是物联网的灵魂,开源操作系统更是集结了各物联网大亨的理论精髓,物联网、开源、操作系统这三个词汇构成了物联网开源操作...

    物流IT圈
  • WebSocket协议详解与c++&c#实现

    随着手机游戏、H5游戏以及微信小游戏的普及,越来越多的客户端-服务器端的通讯采用websocket协议。Websocket协议是全双工的、基于数据帧的、建立在t...

    知然
  • Black Hat 2018 | 短短三年,SOAR从概念到落地

    今年2月,国际知名的大数据公司Splunk公司正式对外公布了收购Phantom公司的最终协议。Phantom是安全编排、自动化和响应(Security Orch...

    安恒信息

扫码关注云+社区

领取腾讯云代金券