CSS3选择器

   ·*通配选择器
·E标签选择器
·E#id ID选择器
·E.class类选择器
·E F包含选择器,后代选择器
·E>F子包含选择器
·E+F相邻兄弟选择器
·E【foo】属性选择器
·并集选择器

属性选择器

E[att] { sRules }:选择具有att属性的E元素。
E[att="val"] { sRules }:选择具有att属性且属性值等于val的E元素。
E[att~="val"] { sRules }:选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素(包含只有一个值且该值等于val的情况)。
E[att^="val"] { sRules }:选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"] { sRules }:选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"] { sRules }:选择具有att属性且属性值为包含val的字符串的E元素。
E[att|="val"] { sRules }:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择。
 img**[alt$="3"]**{
margin: 20px;
}
` div**[class~="a"]**
{
border: 2px solid red;
} CSS3结构伪类选择器
-----------
E:nth-child(n)选择所有在其父元素中第n个位置的匹配E的子元素
E:nth-last-child(n) { sRules }:匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效。
E:nth-of-type(n) { sRules }:匹配同类型中的第n个同级兄弟元素E。
E:first-child { sRules }:匹配父元素的第一个子元素E。
E:last-child { sRules }:匹配父元素的最后一个子元素E。
```示例代码:
li:nth-child(4n){
color: red;
}
li:nth-last-child(2){
color: blue;
}
p:nth-of-type(2){
color: orange;
}
p:nth-last-child(2){
color: yellow;

CSS3UI状态伪类选择器

 E:emabled:匹配用户界面上处于可用状态的元素E。
E:disabled:匹配用户界面上处于禁用状态的元素E。
E:checked:匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) CSS3其他选择器
E~F
E:not(s)
        input:checked > span{
color: red;
}
input[type="text"]:enabled{
border: 2px solid blueviolet;
background-color: yellow;
color: aqua;
}
input[type="text"]:disabled{
border: 2px solid blueviolet;
background-color: yellow;
color: aqua;
}

CSS3属性前缀

chrome、Safar:-webkit-
Opera:-o-
Firefox:-moz-
Internet Explorer:-ms-
            background-color: orange;
/*针对谷歌和苹果浏览器*/
-webkit-border-radius: 50px;
/*针对欧朋浏览器*/
-o-border-radius:20px;
/*针对火狐浏览器*/
-moz-border-radius:20px ;
/*针对IE浏览器*/
-ms-border-radius:50px; **CSS长度单位**
======= EM:与元素字号挂钩
Rem:与根元素的字号挂钩
Px:像素、与分辨率挂钩
%:
注意:CSS3引入了一些新的尺寸单位,重点推荐的rem(根em),和em和百分比不同的是它不是与父元素挂钩,而是和文档的根元素(html)挂钩。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。 我们在之前的web设计中大量使用了px进行布局,因为早期固定布局使用px较为方便,逐渐养成了这种习惯。
而使用em单位其实更加灵活,,尤其是在修改样式时,只需要修改一下挂钩元素的哪个大小即可,无须修改每一个元素。
默认挂钩元素为父元素。 网页默认字号大小为16px em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
EM特点
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
px:为像素单位。它是显示屏上显示的每一个小点,为显示的 最小单位。它是一个绝对尺寸单位;
em:它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px;
%: 百分比,它是一个更纯粹的相对长度单位。它描述的是相对于父元素的百分比值。如50%,则为父元素的一半。
这里需要注意的是:em是相对于应用于当前当前元素的字体尺寸;而百分比则是相对于父元素的尺寸。 CSS3过渡效果一般是通过一些简单的CSS动作出发平滑过渡功能,比如hover,focus,active,checked等
============================================================= CSS3通过transition属性完成过渡效果
transition-property:指定过渡使用的CSS属性
transition-duration:完成过渡的时间
transition-timing-function:指定过渡的函数
transition-delat:指定过渡开始出现的延迟时间
transform:属性值为变形函数
translate/translateX/translateY:在水平、垂直或者两个方向上平移元素
scale/scaleX/scaleY:在水平、垂直或两个方向上缩放元素
romate:旋转元素,单位deg
skew/skewX/skewY:使元素倾斜一定的角度
Transform-origion:指定变形的起点-left
top
方位词:-top/bottom/center/left/right CSS动画
-----
@keyframes:定义一个动画
animation:在HTML元素上应用动画-->
**定义动画**
@keyframes 动画名称{
阶段1{CSS样式}
阶段2{CSS样式}
阶段3{CSS样式}
..... }
阶段:每个阶段用百分比表示,从0%到100%
起止必须设置即0%和100%或者from和to--> animation-name:动画名称 ***必须指定
animation-Duration:动画持续时间 ***必须指定
animation-timing-function:动画速度曲线
animation-delay:动画开始的时间,延迟
animation-iteration-count:动画播放次数,默认为1.
N:播放次数。
infinite:无限次循环。
animation-direction:动画在下一个是否逆向播放,默认为normal.
reverse:反方向运行
alternate:动画先正常运行再反方向运行,并持续交替运行
alternate-reverse:动画先反运行再正方向运行,并持续交替运行
animation-play-state:running:运动 paused: 暂停
animation-fill-mode:规定对象动画时间之外的状态
none:不改变默认行为
forwards:在动画完成后,保持最后的CSS样式
backwards:在动画完成后,回到最初的CSS样式
both:向前和向后填充的样式都被应用-->
```示例代码:
img{
width: 150px;
animation: plane 5s ease-in-out infinite ;
}
@keyframes plane{
0%{
transform: translate(0,0);
}
20%{
transform: translate(100px,200px);
}
40%{
transform: translate(200px,300px);
}
60%{
transform: translate(300px,200px);
}
100%{
transform: translate(500px,500px);
}
}

CSS选择器,属性前缀,长度单位,变形效果,过渡效果,动画效果的更多相关文章

  1. 纯CSS实现帅气的SVG路径描边动画效果(转载)

    本文转载自: 纯CSS实现帅气的SVG路径描边动画效果

  2. CSS自学笔记(14):CSS3动画效果

    在CSS3中也新增了一些能够对元素创建动画处理的属性.通过这些新增的属性,我们可以实现元素从一种样式变换成另一种样式时为元素添加动态效果,我们就可以取代网页中的动态图片.flash动画和JavaScr ...

  3. CSS中的变形、过渡、动画效果

    一.变形 .过渡效果 1:元素平移 x方向 y方向 transform:translate(100px 100px); 2:过渡动画效果 a:什么属性参与过渡效果 b:过渡时间 c:过渡的效果 值包含 ...

  4. jQuery选择器、事件、节点、动画效果

    一.选择器  基本选择器:    标签选择器:  $("h1").css()    类选择器:  $(".c").css()    id选择器:  $(&quo ...

  5. 将CSS CLIP属性应用在:扩展覆盖效果

    我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡.这个想法是为了实现某种叠加效果,好像它实际上在各个元素的下面.点击其中一个元素将创建一个切断 ...

  6. 利用layer的mask属性实现逐渐揭示的动画效果

    github上又看到个不错的动画(https://github.com/rounak/RJImageLoader),如图: 所以就想来自己实现以下 不试不知道,这个动画还真不是看上去那么简单,我自己想 ...

  7. 通过CSS3属性值的变化实现动画效果+触发这些动画产生交互

    css3过渡 transition 兼容性:IE10+ transition: none | all | property 默认为none all 表示所有属性过渡 property 指定属性值,如c ...

  8. 原生html,css+js写下载按钮有提示动画效果的落地页

    <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8&q ...

  9. HTML|CSS之CSS选择器及样式

    知识内容: 1.CSS选择器 2.CSS常用样式 参考:http://www.cnblogs.com/yuanchenqi/articles/5977825.html 一.CSS选择器 1.基础选择器 ...

  10. CSS--使用Animate.css制作动画效果

    一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画;   <!DOCTYPE h ...

随机推荐

  1. Selenium执行JavaScript脚本

    JavaScript是运行在客户端(浏览器)和服务器端的脚本语言,允许将静态网页转换为交互式网页.可以通过 Python Selenium WebDriver 执行 JavaScript 语句,在We ...

  2. flink集群模式安装配置

    一.手动下载安装包 wget http://mirrors.tuna.tsinghua.edu.cn/apache/flink/flink-1.6.1/flink-1.6.1-bin-hadoop27 ...

  3. java普通io(stream)处理文件读写的过程

    场景:使用java的stream,从文件a读取内容,然后写进文件b,整个过程如下图所示(以linux系统为例) 步骤解析: 1.用户空间向内核空间发出指令--我要读取文件a 2.系统切换上下文,从用户 ...

  4. Redis基础篇(七)哨兵机制

    上一篇文章介绍了高可靠方案:主从集群模式.通过主从库的读写分离,来保证服务的可靠性. 当某个从库出现故障时,不影响服务的使用,主库仍然可以处理写命令,其他从库可以处理读命令.但主库发生故障,就不能处理 ...

  5. 第二章节 BJROBOT IMU 自动校正 【ROS全开源阿克曼转向智能网联无人驾驶车】

    1.把小车平放在地板上,用资料里的虚拟机,打开一个终端 ssh 过去主控端启动roslaunch znjrobot bringup.launch . 2.再打开一个终端,ssh 过去主控端,在 ~/c ...

  6. swing桌面四子棋程序开发过程中遇到的一些问题记录(二)

    第二个遇到的问题是将JButton按钮设置成透明的按钮.首先UI给我一张透明的图片,如果我直接给Button按钮设置背景图片的话,是没有透明的效果的,只会留下白色的底,设置前后的效果如下图 制作透明的 ...

  7. API接口的安全设计验证—ticket,签名,时间戳

    概述 与前端对接的API接口,如果被第三方抓包并进行恶意篡改参数,可能会导致数据泄露,甚至会被篡改数据,我主要围绕时间戳,token,签名三个部分来保证API接口的安全性 1.用户成功登陆站点后,服务 ...

  8. IndexedDB详解

    目录 简介 IndexedDB简介 IndexedDB的使用 IndexedDB的浏览器支持 创建IndexedDB indexdb中的CURD 使用游标cursor 简介 IndexedDB是一种在 ...

  9. Head First 设计模式 —— 08. 外观 (Facade) 模式

    思考题 想想看,你在 JavaAPI 中遇到过哪些外观,你还希望 Java 能够新增哪些外观? P262 println.log 日志接口.JDBC 接口 突然让想感觉想不出来,各种 API 都用得挺 ...

  10. keycloak集成微信登陆~解决国内微信集成的问题

    之前看了国内写的微信集成keycloak的文章,然后拿来就用了,但我的是jboss部署的keycloak,然后使用他的包之后,会出现类无法找到的问题,之后找了很多资料,多数都是国外的,在今天终于找到了 ...