目录
CSS概述
CSS3是CSS（层叠样式表）技术的升级版本，最新的 CSS 标准。 在CSS2.1的基础上增加了很多强大的新功能，以帮助开发人员解决一些问题，例如圆角、多背景、透明度、阴影等。 CSS2.1是单一的规范，而CSS3被划分成几个模块组，每个模块组都有自己的规范。这样的好处是整个CSS3的规范发布不会因为某部分而影响其他模块的推进。
CSS3按模块化进行了全新设计，主要的 CSS3 模块：包括:选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面
CSS3现状
现代浏览器已经实现了相当多的 CSS3 属性,CSS3将完全向后兼容
浏览器的私有前缀
概述：CSS3的浏览器私有属性前缀是一些浏览器生产商经常使用的一种方式，用于对新属性的提前支持，暗示该CSS属性或规则尚未成为W3C标准的一部分。当一个属性成为标准，并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候我们可以去掉前缀。
各个主流浏览器的私有前缀
-
WebKit内核 -webkit- Chrome、Safari
-
Gecko内核 -moz- 火狐浏览器
-
Presto内核 -o- Opera(欧朋)
-
Trident内核 -ms- IE
-
内核 私有前缀 浏览器
/* 私有前缀属性 */
-webkit-transform:translate(100px,100px) ;
-o-transform:translate(100px,100px) ;
-ms-transform:translate(100px,100px) ;
-moz-transform:translate(100px,100px) ;
/* css3动画 新增的属性 只有高版本浏览器支持 */
/* 标准属性！！ */
transform: translate(100px,100px);
新盒模型
/* 不用内减！ 浏览器自动内减！！ */
box-sizing: border-box;
/* 传统和模型 一定要内减 % 内减不可能的！！！ */
box-sizing:content-box;
padding: 0px 30px;
CSS3新增选择器
属性选择器
通过元素属性和属性值选择元素
用属性的名字或者是值去挑选元素
[attr] 匹配的是拥有attr属性的标签
注意：
(1)属性选择器权重值和类一样 属性选择器= 结构伪类选择器= 类选择器10
(2)属性值 一定不要包含空格
(3)用途 属性选择器全局性质的选择器 (公共样式) 一般用于挑一些特征一致的元素
(位置不连续 性质相同的元素！！！)精灵图 字体图标！！
CSS3新增的属性选择器
-
[attr^=value] 选择指定属性名且属性值【以value开头】的每个元素
-
[attr=value] 选择带有指定属性名且属性值【以value开头】所有元素
-
[attr*=value] 选择指定属性名且属性值【包含value】的每个元素
-
[attr$="value"] 匹配的是拥有attr属性 且值以value字符作为结尾的元素！！
/* 文本框 */
input[type="text"]{
outline:2px solid deeppink;
}
/* 单选框 */
input[type="radio"]{
opacity: 0;
}
/* 复选框 */
input[type="checkbox"]:checked{
}
兼容性
常用属性选择器列表：
结构伪类选择器
通过结构关系选择元素
css3 新增的结构性伪类
:first-child ：匹配属于其父元素的第一个子元素的每个元素
:last-child 选择器：匹配属于其父元素的最后一个子元素的每个元素
:nth-child( n ) 选择器：匹配属于其父元素的第 n 个子元素
:nth-last-child( n ) 选择器：匹配属于其元素的倒数第 n 个子元素的每个元素
:first-of-type(n) 选择其父元素的特定类型的首个子元素的每个元素
:last-of-type(n) 选择其父元素的特定类型的最后一个子元素的每个元素。
:nth-of-type(n)：选择器匹配属于父元素的特定类型的第n 个子元素。
:nth-last-of-type(n)：选择器匹配属于父元素的特定类型的倒数第 n 个子元素的每个元素
-
说明
-
n 可以是数字、关键词或公式
-
关键词
-
odd奇数，even偶数 3n 5n
-
-
2n 偶数 2n+1奇数
-
-n+i 前i个 后i个
-
max指的是元素总个数 max-i+n+1
-
总结child一组与of-type一组的区别
-
nth-child强调结构 关系，优先确定是否是父元素的子元素，在其中找第几个
-
nth-of-type强调类型，选择父元素中指定类型中的第几个
兼容性
表单相关选择器（状态伪类选择器 ）
css3新增
-
:enabled
-
作用：选择器匹配每个已启用的元素
-
主要适用于：表单元素
-
-
:disabled
-
作用：选择器匹配每个被禁用的元素
-
主要适用于：表单元素
-
-
:checked
-
作用：选择器匹配每个已被选中的 input 元素
-
适用于：只用于单选按钮和复选框
-
-
：focus 匹配的是当前被聚焦的表单元素
-
::placeholder 匹配的是默认的提示文本
兼容性
常用元素状态、用户行为伪类列表
伪元素选择器
:before
-
作用：在元素内部最开始位置生成内容
-
语法：元素:before{content:"内容"}
:after
-
作用：在元素内部最后位置生成内容
-
语法：元素:before{content:"内容"}
注：必须定义content属性
before与after 兼容性
::placeholder
-
设置对象文字占位符的样式
-
::placeholder 伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。
注：除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder
<input type="text" placeholder="占位符" />
input::-webkit-input-placeholder {
color: #999;
}
input:-ms-input-placeholder { // IE10+
color: #999;
}
input:-moz-placeholder { // Firefox4-18
color: #999;
}
input::-moz-placeholder { // Firefox19+
color: #999;
}兼容
-
IE10-11、firefox低版本支持前缀写法
其他选择器
(1) :not() 除了。。。
(2) :empty {} 匹配的是空元素(没有内容的元素)
(3) ::selection 匹配的是鼠标选中的文本！！！
（4）:root 匹配的是Html根元素（了解！！！）
(5) :after :before 单冒号 ie8-支持 ::after ::before ie9+支持
(6) :target 选中被激活的锚点！！！
如何修改复选框或者单选框css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
position: relative;
margin: 100px 0px 0px 100px;
width: 300px;
height: 300px;
border:1px solid #ccc;
}
input {
position: absolute;
left: 50px;
top: 50px;
width: 50px;
height: 50px;
z-index: 6;
/* 看不见 但是我还能点！！ */
opacity: 0;
}
span {
position: absolute;
left: 50px;
top: 50px;
z-index: 4;
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
}
input:checked + span {
background-color: yellowgreen;
}
</style>
</head>
<body>
<div>
<label for="">男:
</label>
<input type="radio">
<!-- 单选按钮效果 样式功能-->
<span></span>
</div>
</body>
</html>
111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
