前端Html5（23）
1.超好用的结构性伪类
选中第一个li
li:nth-of-type(1){
background: springgreen;
}
或者
li:first-of-type{
background: red;
}
选中最后一个
li:last-of-type{
background: yellow;
}
/* 还可以这样子表示 前提是你知道有多少个*/
li:nth-of-type(10){
background: violet;
}
/* 可以表示倒数第几个 */
li:nth-last-of-type(1){
background: cyan;
}
/* 可以表示倒数第几个 */
li:nth-last-of-type(3){
background: cyan;
}
/* 选中第几个 */
li:nth-of-type(5){
background: orange;
}
/* 还可以这样子表示奇数行 odd 或者 2n+1 */
/* 还可以这样子表示偶数行 even 或者 2n */
li:nth-of-type(odd){
background: #ff0;
}
li:nth-of-type(even){
background: seagreen;
}
/* 好用在哪呢 */
li:nth-of-type(7){
background: red;
}
</style>
</head>
<body>
<ol>
<li>超级好用的 是把所有li先拎出来，再去选择li的第几个；不好用的是咋回事呢 不好用的是先去找第n个位置；然后你得看看，这个位置的元素是不是人家li!!麻烦</li>
<span>扰乱</span>
<li>超级好用的 是把所有li先拎出来，再去选择li的第几个；不好用的是咋回事呢 不好用的是先去找第n个位置；然后你得看看，这个位置的元素是不是人家li!!麻烦</li>
<li>超级好用的 是把所有li先拎出来，再去选择li的第几个；不好用的是咋回事呢 不好用的是先去找第n个位置；然后你得看看，这个位置的元素是不是人家li!!麻烦</li>
<span>扰乱</span>
<li>超级好用的 是把所有li先拎出来，再去选择li的第几个；不好用的是咋回事呢 不好用的是先去找第n个位置；然后你得看看，这个位置的元素是不是人家li!!麻烦</li>
<span>扰乱</span>
<li>超级好用的 是把所有li先拎出来，再去选择li的第几个；不好用的是咋回事呢 不好用的是先去找第n个位置；然后你得看看，这个位置的元素是不是人家li!!麻烦</li>
<li>超级好用的 是把所有li先拎出来，再去选择li的第几个；不好用的是咋回事呢 不好用的是先去找第n个位置；然后你得看看，这个位置的元素是不是人家li!!麻烦</li>
<li>超级好用的 是把所有li先拎出来，再去选择li的第几个；不好用的是咋回事呢 不好用的是先去找第n个位置；然后你得看看，这个位置的元素是不是人家li!!麻烦</li>
<li>超级好用的 是把所有li先拎出来，再去选择li的第几个；不好用的是咋回事呢 不好用的是先去找第n个位置；然后你得看看，这个位置的元素是不是人家li!!麻烦</li>
<li>超级好用的 是把所有li先拎出来，再去选择li的第几个；不好用的是咋回事呢 不好用的是先去找第n个位置；然后你得看看，这个位置的元素是不是人家li!!麻烦</li>
<li>超级好用的 是把所有li先拎出来，再去选择li的第几个；不好用的是咋回事呢 不好用的是先去找第n个位置；然后你得看看，这个位置的元素是不是人家li!!麻烦</li>
</ol>
</body>
2.超级不好用的结构标签
/* 结构性伪类 */
/* 代表选中第一个li */
li:first-child{
background: springgreen;
}
/* 还可以这样子表示第一个 */
li:nth-child(1){
background: pink;
}
/* 选中最后一个li */
li:last-child{
background: springgreen;
}
/* 还可以这样子表示 */
li:nth-child(10){
background: cyan;
}
/* 选中第几个 咋办 */
li:nth-child(5){
background: #ff0;
}
/* 还可以选择倒数第几个 */
li:nth-last-child(3){
background: springgreen;
}
/* 可以选中奇数行 odd*/
li:nth-child(odd){
background: red;
}
/* 还可以这样子表示2n+1 */
li:nth-child(2n+1){
background: springgreen;
}
/* 可以选中偶数行 */
li:nth-child(2n){
background: #f90;
}
/* 还可以这样子表示偶数行even */
li:nth-child(even){
background: #03ccbb;
}
/* X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。 */
span:only-child{
background: pink;
}
li:nth-child(4){
background: red;
}
</style>
</head>
<body>
<ol>
<li>你最喜欢的工作岗位是什么？</li>
<li>你最喜欢的工作岗位是什么？</li>
<span>扰乱了</span>
<li>你最喜欢的工作岗位是什么？</li>
<li>你最喜欢的工作岗位是什么？</li>
<li>你最喜欢的工作岗位是什么？</li>
<li>你最喜欢的工作岗位是什么？</li>
<li>你最喜欢的工作岗位是什么？</li>
<li>你最喜欢的工作岗位是什么？</li>
<li>你最喜欢的工作岗位是什么？</li>
<li>你最喜欢的工作岗位是什么？</li>
</ol>
<div>
<span>只能有我自己</span>
<p>尝试</p>
</div>
</body>
3.动态伪类选择器
/* input框聚焦时 */
input:focus{
background: cyan;
}
</style>
</head>
<body>
<!-- 捡到一个 LVHA 哈一笑 这4个都是动态伪类 -->
<!-- a:link{} a:visited{} 任何元素:hover{} a:active{} -->
<input type="text">
</body>
</html>
4.否定伪类选择器
<style>
p:not(.all){
background: red;
}
</style>
</head>
<body>
<!-- 4、否定伪类选择器
E:not(s) （IE6-8浏览器不支持:not()选择器。）
匹配所有不匹配简单选择符s的元素E -->
<p>拒绝黄赌毒</p>
<p>拒绝黄赌毒</p>
<p class="all">拒绝黄赌毒</p>
<p>拒绝黄赌毒</p>
<p>拒绝黄赌毒</p>
<p class="all">拒绝黄赌毒</p>
<p>拒绝黄赌毒</p>
<p>拒绝黄赌毒</p>
<p>拒绝黄赌毒</p>
<p>拒绝黄赌毒</p>
</body>
5.根节点
<style>
/* :root代表选中了html根节点 */
html:root{
background: cyan;
}
</style>
6.盒子阴影
<style>
div{
width: 200px;
height: 300px;
margin:100px auto;
background: springgreen;
/* 我们说过 浏览器是有兼容的 CSS3是完全向后兼容的 那么 如果我希望 我的CSS3属性 可以在各个浏览器正常显示 那么需要你代码写全 就是写上兼容
加浏览器前缀
box-shadow: ;正常解析
-webkit-box-shadow: ;针对谷歌+苹果浏览器
-moz-box-shadow: ; 针对火狐
-ms-box-shadow: ;针对IE
-o-box-shadow: ;针对欧鹏 */
/* 盒子阴影 */
/* box-shadow:阴影水平位置(可负) 阴影垂直位置(可负) 阴影模糊程度 阴影面积 阴影颜色 阴影位置 (默认在外侧); */
box-shadow:-30px 20px 20px 10px red;
}
section{
width: 300px;
height: 300px;
margin:0 auto;
background: #ff0;
border-radius: 50%;
/* 设置盒子阴影 */
box-shadow: 0px 0px 20px 10px #f00 inset; /* 代表阴影位置在内侧 */
}
nav{
width: 500px;
height: 500px;
margin:100px auto;
background: cyan;
/* 设置多个盒子阴影 注意 不建议设置阴影位置 */
box-shadow: 0px 0px 20px 2px red,-1px -1px 20px 2px #ff0,3px 3px 20px 3px purple,-3px 4px 20px 5px #0f0;
}
</style>
</head>
<body>
<div>盒阴影</div>
<section></section>
<nav>盒子阴影，可以设置多个颜色 逗号隔开</nav>
</body>
7.空节点 （空div显示）
<style>
div:empty{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div>哈</div>
</body>
</html>
8.目标伪类
<style>
div:target{
/* 代表的是锚点被点击后 目标div所呈现的样式 */
background: springgreen;
}
</style>
</head>
<body>
<a href="#box1">目标1</a>
<a href="#box2">目标2</a>
<div id="box1">111111</div>
<div id="box2">222222</div>
</body>
9.矢量图应用
<link rel="stylesheet" href="../duoduo/iconfont.css"> 引用
<style>
li:hover{
color:red;
font-size: 20px;
}
/* 继承性 元素继承而来的权重是0 i本身呢 .iconfont{font-size: 16px;} */
li:hover i{
font-size: 30px;
}
</style>
</head>
<body>
<!-- 1、引入对应的iconfont.css文件 -->
<!-- 2、设置i标签 两个class名字 一个是iconfont 另一个是你需要的那个图案的class名字 -->
<!-- 3、设置矢量图大小 font-size -->
<!-- 4、设置矢量图颜色 color -->
<ul>
<li><i class="iconfont icon-iconset0330"></i>全部商品</li>
<li><i class="iconfont icon-taobao"></i>全部商品</li>
<li><i class="iconfont icon-jitui"></i>全部商品</li>
<li><i class="iconfont icon-jitui1"></i>全部商品</li>
<li><i class="iconfont icon-nanbaobao"></i>全部商品</li>
<li><i class="iconfont icon-nvbaobao"></i>全部商品</li>
<li><i class="iconfont icon-ertongpiao"></i>全部商品</li>
</ul>
</body>
10.文字阴影
<style>
/* 文字阴影 */
h1{
/* text-shadow: 阴影水平位置(可负) 阴影垂直位置(可负) 阴影模糊程度 阴影颜色; */
text-shadow: 0px 1px 2px red;
/* 文字阴影 也可以设置多个颜色 使用逗号隔开 */
text-shadow: 0px 0px 2px red,1px 1px 2px #ff0,-1px -1px 2px #0f0;
}
</style>
</head>
<body>
<h1>孙多多</h1>
</body>
</html>
11.css3属性选择器
/* 1、属性选择器 */
div[data]{
/* 代表选中了有data属性的div */
background: red;
}
/* 2、属性值选择器 */
div[data="abc"]{
/* 代表选中了data属性值为abc的div */
background: springgreen;
}
/* 3、属性值开头选择器 ^ */
div[data^="abc"]{
/* 代表选中了data属性值是abc开头的div */
background: skyblue;
}
/* 4、属性值结尾选择器 $ */
div[data$="abc"]{
/* 代表选中了data属性值是abc结尾的div */
background: hotpink;
}
/* 5、但凡有abc就行 * */
div[data*="abc"]{
/* 代表选中了data属性值里有abc的div 哪里有都算 */
background: indigo;
}
/* 6、~ */
/* 代表选中了data属性值有abc这个单词！！单词！！1空格隔开的 */
div[data~="abc"]{
background: #f90;
}
/* 7、| */
/* 代表选中了data属性值为“abc-开头的单词列表” 注意 abc也算 */
div[data|="abc"]{
background: #f00;
}
</style>
</head>
<body>
<div>我没有data属性</div>
<div data="abc">我会不会变化呢abc</div>
<div data="abcqqqqqq">我会不会变化呢abcqqqqqq</div>
<div data="hjhjhjhjhjabc">我会不会变化呢hjhjhjhjhjabc</div>
<div data="gggabcjjj">我会不会变化呢gggabcjjj</div>
<div data="abc hhh">我会不会变化呢abc hhh</div>
<div data="hhh abc">我会不会变化呢hhh abc</div>
<div data="kkk-abc">我会不会变化呢kkk-abc</div>
<div data="abc-kkk">我会不会变化呢abc-kkk</div>
<div data="abc_ooo">我会不会变化呢abc_ooo</div>
<div data="ooo_abc">我会不会变化呢ooo_abc</div>
</body>
12.css3选择器
<title>层级选择器</title>
<style>
/* 1毗邻选择器 也叫加号选择器 A+B{}代表选中了A下面的第一个兄弟元素B */
div+p{
background: cyan;
}
/* 2、波浪号选择器 A~B{} 代表选中了A下面所有兄弟B */
div~p{
background: red;
}
/* 3、最常用的子选择器 A>B{}代表选中了A里面所有子元素B */
.big{
width: 1000px;
height: 100px;
background: pink;
margin:0 auto;
line-height: 100px;
}
.right{
float: right;
}
/* .big span{
代表选中了big里面所有的span 包括儿子级 孙子级...
background: springgreen;
} */
.big>span{ /* 代表选中了big里面的儿子级 孙子级是选不上的 */
background: springgreen;
}
</style>
</head>
<body>
<div class="big">
<span>我是big的子元素</span>
<div class="right">
<span>登录我是big的孙子级</span>
</div>
</div>
<p>我是第一个孩子 姐姐p</p>
<div>我是大儿子</div>
<span>出现了一个私生子</span>
<p>我是妹妹3</p>
<p>我是妹妹4</p>
<p>我是妹妹5</p>
<p>我是妹妹6</p>
<p>我是妹妹7</p>
</body>
13.H5新增表单属性
<style>
input{
outline: 0;
}
input+span{
/* 代表选中了input下面第一个弟弟 同时这个弟弟是span */
color:red;
/* 默认消失 */
display: none;
}
input:focus+span{
/* 代表input聚焦时 下面第一个弟弟(span)的样式 */
/* 出现 */
display: inline;
}
</style>
</head>
<body>
<p>
<input type="text">
<span>请输入用户名</span>
</p>
</body>
14..H5新增表单属性2
<form action="" novalidate>
<!-- 1、虚焦提示信息 -->
<input type="text" placeholder="请输入">
<!-- 2、最大值max -->
<!-- 3、最小值min -->
<!-- 4、间隔步幅step -->
<input type="number" max="20" min="1" step="2">
<!-- 5、可以写多个网址/邮箱 multiple-->
<input type="url" multiple>
<!-- 6、正则表达式 pattern-->
<input type="text" pattern="[a-z]{8}">
<!-- 7、自动聚焦 -->
<input type="text" autofocus>
<!-- 8、只读 readonly 你只能看 不能改变 -->
<input type="text" value="123" readonly>
<!-- 9、必填项 -->
<input type="text" required>
<!-- 10、默认选中 checked -->
<!-- 11、禁止使用 disabled -->
<!-- 12、除了禁止使用的 剩下的都是可使用的 enabled -->
<!-- 13、取消验证 novalidate 给form标签加 那么form里面的所有验证条件全部失效 -->
<!-- 14、数据列表 list="你给<datalist>标签起的id值"-->
<!-- 15、历史记录 自动补全 针对datalist -->
<input type="text" list="demo" autocomplete="on">
<datalist id="demo">
<option value="最安静的同学" label="于崇宇"></option>
<option value="最高的同学" label="袁艺林"></option>
<option value="瘦的同学" label="张月"></option>
<option value="最幽默的同学" label="孙多多"></option>
<option value="帅的同学" label="陈雨亭"></option>
</datalist>
<input type="submit">
</form>
</body>
15.ui元素状态伪类
<style>
/* input元素被点击选中的状态 */
input:checked{
width: 100px;
height: 100px;
}
/* input元素被禁止使用的状态 */
input:disabled{
width: 10px;
height: 10px;
}
/* input可用的状态 就是除了禁用 都是可用的 */
input:enabled{
width: 30px;
height: 30px;
}
/* 框选中元素 自定义高亮区域 */
p::selection{
background: springgreen;
color:#f90;
}
</style>
</head>
<body>
<input type="radio" name="cc" disabled>HTML5
<input type="radio" name="cc">JAVA
<input type="radio" name="cc">UI
<input type="radio" name="cc">Python
<input type="radio" name="cc">物联网
<p>今天星期四，明天星期五，再坚持一天；就是星期天今天星期四，明天星期五，再坚持一天；就是星期天今天星期四，明天星期五，再坚持一天；就是星期天今天星期四，明天星期五，再坚持一天；就是星期天今天星期四，明天星期五，再坚持一天；就是星期天今天星期四，明天星期五，再坚持一天；就是星期天今天星期四，明天星期五，再坚持一天；就是星期天今天星期四，明天星期五，再坚持一天；就是星期天</p>
</body>
更多推荐
前端Html5（23）
发布评论