html5+css3（css2现状，css3选择器，属性选择器，结果伪类选择器，伪元素选择器）
css3现状
- 移动端支持优于pc端
- 不断改进中
- 应用相对广泛
符号
[]表示可选项||表示或者|表示多选一?0个或1个*0个或多个{}范围
css3选择器
-
div 标签选择器
-
.box 类选择器
-
#box id选择器
-
div p 后代选择器
-
div.box 交集选择器
-
div,p,span 并集选择器
-
div>p 子代选择器
-
div+p 选中的div后面相邻的第一个p
-
div~p 选中的div后面所有的p
-
*通配符 -
UI 元素状态伪类选择器：用于选择用户界面元素的不同状态。
:enabled和:disabled：选择启用或禁用的表单元素。input:enabled {background-color: white; } input:disabled {background-color: gray; }:read-only和:read-write：选择只读或可编辑的元素。input:read-only {background-color: silver; } input:read-write {background-color: white; }
- 通用兄弟选择器：
~选择器选择后续所有兄弟元素。
h1 ~ p {color: #555;
}
- 相邻兄弟选择器：
+选择器选择紧随其后的兄弟元素。
h1 + p {color: #333;
}
- 子元素选择器：
>选择器选择作为某元素直接子元素的元素。
ul > li {margin-left: 20px;
}
属性选择器
- 属性选择器：根据元素的属性及其值来选择元素。
[type="text"] {border: 1px solid #ccc; } - 属性选择器的扩展：可以更精确地选择具有特定属性值的元素。
input[type="radio"] {margin-right: 5px; }
- 标志性符号
[] E[title]选中页面的E元素，并且E存在 title 属性E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abcE[attr~=val]选择具有 attr 属性且属性值为：用空格分隔的字词列表，其中一个等于val的E元素.如<div class="dd val"></div>E[attr|=val]表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的E[title^="abc"]选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头E[title$="abc"]选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾E[title*="abc"]选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc
结构伪类选择器
- 伪类选择器：用于选择处于特定状态的元素。
:nth-child()：选择指定的子元素。li:nth-child(2) {font-weight: bold; }:nth-of-type()：选择父元素中指定类型的子元素。ul li:nth-of-type(2) {font-weight: bold; }:first-of-type：选择父元素中第一个特定类型的子元素。ul li:first-of-type {font-weight: bold; }:last-of-type：选择父元素中最后一个特定类型的子元素。ul li:last-of-type {font-weight: bold; }:not()：选择不匹配指定选择器的元素。li:not(:first-child) {background-color: #eee; }:checked：选择被选中的 radio 或 checkbox 元素。input[type="checkbox"]:checked {background-color: yellow; }
- 结构伪类选择器：基于文档结构选择元素。
:root：选择文档的根元素（例如 HTML）。:root {background-color: #f9f9f9; }:empty：选择没有子元素的元素。p:empty {display: none; }:target：选择当前活动的锚点元素。section:target {border: 1px solid #000; }
伪元素选择器
+ 块级元素才起作用
+ `E::before` 设置在元素E的前面的内容，配合content属性（撑高）一起使用
+ `E::after` 设置在元素E的后面的内容，配合content属性一起使用
+ `E::first-letter`设置元素 E 里面的第一个字符的样式
+ `E::first-line`设置元素 E 里面的第一行的样式
+ `E::selection`设置元素 E 里面被鼠标选中的区域的样式（一般设置颜色和背景色）
作业
-精灵图标
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width:20px;height: 34px;background: url(../imgs/雪碧图.png) no-repeat;background-size: 70px 68px;}.d1{background-position: -1px -1px;}.d2{background-position: -25px -1px;}.d3{background-position: -48px -1px;}.d4{background-position: -2px -38px;}.d5{background-position: -26px -38px;}.d6{background-position: -48px -38px;}span{display: inline-block;width: 80px;position: relative;top: 4px; left: 24px;}</style>
</head>
<body><div class="d1"> <span >付款图标</span></div><div class="d2"> <span >存款图标</span></div><div class="d3"> <span >笑脸图标</span></div><div class="d4"> <span>删除图标</span></div><div class="d5"> <span >粘贴图标</span></div><div class="d6"> <span >编辑图标</span></div>
</body>
</html>
-万达影城
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0px;padding: 0px;text-align: center;}.all{width: 440px;height: 280px;background: url(../imgs/哇哒刮擦.png) no-repeat;margin-top: 20px;}.top{position: absolute;top: 1px;width: 58px;height: 40px;background: url(../imgs/xuebi1.png) no-repeat;background-position: -105px 10px;margin-left: 8px;}.banner{width: 440px;height: 500px;padding: 0px 10px;/* border: 1px solid #fd9127; */}.img{padding-top: 230px;}.img p{color: whitesmoke;width: 440px;height: 50px;line-height: 50px;background-color: #02060d;}.font{width: 438px;height: 120px;border: 1px solid #fd9127;}.font li:first-child{font-size: 22px;font-weight: bold;}.font li:nth-child(2){padding-right: 230px;padding-top: 10px;}.font p{float: right;display: inline;padding-top: 20px;padding-right: 10px;color: #b1b3b5;}.one{float: left;color: #ff7e00;font-size: 26px;padding-top: 20px;padding-left: 15px;}.two{float: left;padding-top: 30px;padding-left: 10px;text-decoration:line-through;color: #b0b0b0;}</style>
</head>
<body><div class="banner"><div class="top"></div><div class="all"><div class="img"> <p>广东深圳宝安区建安一路海雅缤纷城4楼</p></div><div class="font"><ul><li>【海雅缤纷城】万达影城（深圳海雅广场...</li><li>单人电影票，可2D观看</li><li> <span class="one">￥35</span><span class="two">￥80</span> <p>已售<span style="color: #ee4a35;">225</span></p></li></ul></div></div>
</div>
</body>
</html>