1Css3概述

从2010年开始,HTML5与CSS3就一直是互联网技术中最受关注的两个话题。

从前端技术的角度可以把互联网的发展分为三个阶段：第一阶段是web1.0以内容为主的网络

前端主流技术是HTML和CSS，第二阶段是web2.0的Ajax应用，热门技术是javascrip/DOM/

异步数据请求。第三阶段是即将迎来的HTML5+CSS3时代，这两者相辅相成，使互联网又进入一个崭新的时代。

2什么是CSS，什么是CSS3？

非常简单，CSS代表“Casading Style Sheets”，就是样式表，是一种替代并为网站添加样式的

标记性语言。现在所使用的CSS基本是在1998年推出的CSS2的基础上发展而来的。10年前在

internet开始普及的时候，就能够使用样式表对网页进行视觉效果的统一编辑，但是在10年间

CSS基本没有什么太大的变化，一直到2010年终于推出了一个全新的版本---CSS3 。CSS3

只是表示下一代CSS，3只是版本号，css3在css2.1版本上加入了一些新特性。 CSS3到底给

我们带来了哪些新特性呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果，只

需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影等。CSS3不仅能简化前

端开发工作人员的设计过程，还能加快页面载入速度。

3属性选择器

属性选择器 [att=“value”]匹配属性等于某特定值的元素

[att^="value"] 匹配属性包含以特定的值开头的元素

[att$="value"] 匹配属性包含以特定的值结尾的元素

[att*=“value”] 匹配属性包含含有特定的值的元素

实例： a[title$="tweetCC"] {position: absolute;top: 0; right: 0; display: block;width: 140px；height: 140px;}

浏览器支持: 只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你样式中使用属性选择器是比较安全的

4伪类选择器

伪类选择器 伪类选择器是css中已经定义好的选择器，不能随便起名常用的伪类选择器是使用在 a元素上的几种，如：a:link,a:visited,a:hover,a:active.

5伪元素

伪元素选择器不是针对真正的元素使用的选择器，而是针对css中已定义好的伪元素 使用的选择器，css中有如下四种 first-line，first-letter，before，after 例如：p:first-line{color:red;},p:after{content：”内容”}

6结构性伪类选择器

在css3中引入的结构行伪类选择器的共同特性是允许开发者根据文档树中的结构来指 定元素样式。 :root :not :empty :trget :nth-child(n) :nth-last-child(n) :only-child :first-child :last-child 详解：

1. root :root 伪类选择页面的根元素。十有八九根节点是 <html> 元素，例如： :root { background-color: yellow; }

2. not :not 想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素。例如： body *:not(h1) { background-color: yellow; }

3.empty:empty 当元素内容为空时被选中，例如：:empty { background-color: yellow; } <table> <tr><td>a</td><td>b</td></tr> <tr><td>c</td><td></td></tr> </table>

4.trget :trget 目标 当跳转到目标是进行改变例如: :trget h3{color:rde}

5.nth-child(n)和nth-last-child(n)

第一种： 简单数字序号写法（如图1） :nth-child(number)：直接匹配第number个元素。参数number必须为大于0的整数。

例如： li:nth-child(3){background:orange;} /*把第3个LI的背景设为橙色*/ :nth-last-child(n)与上个选择器的思想同样，但是从后面匹配元素

第二种：倍数写法（如图2） :nth-child(an):匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志

如3n、5n。 例子： li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

第三种：倍数分组匹配（如图3） li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/

第四种：奇偶匹配 :nth-child(odd) 与 :nth-child(even) 分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)(2n)结果一样。

第五种 nth-of-tyoe（） 为了解决在同一级别出现其他标签导致找不到想要的元素。

6.last-child 用于选择父元素下的最后一个子节点。例如： li { border-bottom: 1px solid #ccc; } li:last-child { border-bottom: none; } 7.first-child 用法同last-child相同，用于选择父元素下的第一个子节

CSS3 新增属性的更多相关文章

  1. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  2. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  3. css3新增属性有哪些？css3中常用的新增属性总结

    css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...

  4. css3新增属性-background背景

    css3新增属性 边框属性 背景属性 文字属性 颜色属性 背景属性 属性 说明 background-image 添加背景图片 background-size 指定背景图像的大小 background ...

  5. css3新增属性API

    写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chr ...

  6. h5新增标签及css3新增属性

    - h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...

  7. 第七篇、CSS3新增属性

    <!-- 1.透明度 opacity(设置不透明度):0.2: --rgba --background-color:rgba(255,0,0,0.8); 2.块阴影和圆角阴影 --box-sha ...

  8. 深入了解——CSS3新增属性

    CSS3 选择器(Selector) 写过 CSS 的人应该对 CSS 选择器不陌生,我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式.参考下述代码: 清单 1. C ...

  9. CSS3新增属性2

    阴影 box-shadow:水平偏移 垂直偏移; 偏移可以负值 box-shadow:水平偏移 垂直偏移 颜色; box-shadow:水平偏移 垂直偏移 模糊值 颜色; /*最常见的*/ box-s ...

随机推荐

  1. 神经网络中的XOR问题

    XOR问题 解决办法: 网络如图 其中激活函数 ReLU,令 即可解决XOR问题.

  2. Hadoop学习第一天

    1.hadoop量大,数目多. 存储:分布式,集群的概念,管理(主节点.从节点),HDFS. 分析:分布式.并行.离线计算框架,管理(主节点.从节点),MapReduce. 来源:GFS->HD ...

  3. js快速排序法

    var quickSort = function(arr) { if (arr.length <= 1) { return arr; } var pivotIndex = Math.floor( ...

  4. Linux平台上搭建apache+tomcat负载均衡集群

    传统的Java Web项目是通过tomcat来运行和发布的.但在实际的企业应用环境中,采用单一的tomcat来维持项目的运行是不现实的.tomcat 处理能力低,效率低,承受并发小(1000左右).当 ...

  5. Junit 源码剖析（二）

    junit4 下的所有的testcase都是在Runner下执行的, 可以将Runner理解为junit运行的容器, 默认情况下junit会使用JUnit4ClassRunner作为所有testcas ...

  6. hexo 适合前端 geek 的博客

    原文出自:http://www.qiangji.tk/hexo%E9%80%82%E5%90%88%E5%89%8D%E7%AB%AFgeek%E7%9A%84%E5%8D%9A%E5%AE%A2/ ...

  7. http server v0.1_mime.c

    #include <string.h> #include "mime.h" static STR_MIME_MAP mime_map[]= { MIME_MAP(MIM ...

  8. seajs配合spm应用之四弹出框

    前面描述了 seajs的弹出遮罩层, 还没讲到弹出框, 这里接着把那几个例子介绍完. 目前已经有的工作是, 点击toggle按钮,可以弹出一个背投一样的暗灰色遮罩层, 主要的作用就是遮住当前页面上所有 ...

  9. Android UI基础教程 目录

    从csdn下载了这本英文版的书之后,又去京东搞了一个中文目录下来.对照着看. 话说,这本书绝对超值.有money的童鞋看完英文版记得去买中文版的~~ Android UI基础教程完整英文版 pdf+源 ...

  10. 【Tools】maven安装

    安装Maven插件老是报以下的错误,好像少了一个叫guava库的东西,但是在其他机器安装不报这个错误. Cannot complete the install because one or more  ...