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. 100. Same Tree（C++）

    100. Same Tree Given two binary trees, write a function to check if they are equal or not. Two binar ...

  2. Command 模式

    Command 模式通过将请求封装到一个对象(Command)中,并将请求的接受者存放具体的 ConcreteCommand 类中(Receiver)中,从而实现调用操作的对象和操作的具体实现 者之间 ...

  3. Windows下配置g++的简单方法

    需要下载名为 Cygnus的软件.下载地址: http://www.claremontmckenna.edu/math/ALee/g++/full.exe 安装完成后配好环境变量就可以用gcc, g+ ...

  4. java 转html为pdf

    最近有个需求转html为pdf . 用过itext . pd4ml  ,都不理想,不是样式有问题,就是页面大小有问题. 或字体有问题. 解决办法是通过wkhtmltopdf工具 , 下载地址为:htt ...

  5. redis问题解决

    一, redis的奇葩问题:我使用命令 redis-cli shutdown 关闭redis之后就再也灭洋启动了! 尝试1: 使用命令 sudo /etc/init.d/redis-server st ...

  6. BZOJ 3083 遥远的国度 树链剖分

    3083: 遥远的国度 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 797  Solved: 181[Submit][Status] Descrip ...

  7. CTSC模拟题 树上的路径

    Description 给定一棵\(N\)个结点的树,结点用正整数\(1 \dots N\)编号,每条边有一个正整数权值.用\(d(a, b)\)表示从结点\(a\)到结点\(b\)路径上经过边的权值 ...

  8. Java 字节码

    Java作为业界应用最为广泛的语言之一,深得众多软件厂商和开发者的推崇,更是被包括Oracle在内的众多JCP成员积极地推动发展.但是对于Java语言的深度理解和运用,毕竟是很少会有人涉及的话题.In ...

  9. 【JavsScript】XMLHttpRequest2的进步之处

    本文参考自:XMLHttpRequest2 新技巧 (重点保留demo,方便自己日后查阅) HTML5是现在web开发中的热点,虽然关于web app和local app一直有争论,但是从技术学习的角 ...

  10. 【Java】Java里String 的equals和==

    Java里面有对象和对象的引用的概念,在String方面,==比较的是引用,equals比较的是对象的具体值. String s1 = new String("abc");Stri ...