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. List集合的去除重复性练习

    package com.java.b.listdmeo.www; import java.util.ArrayList;import java.util.Iterator; import com.ja ...

  2. POJ 1564(HDU 1258 ZOJ 1711) Sum It Up（DFS）

    题目链接:http://poj.org/problem?id=1564 题目大意:给定一个整数t,和n个元素组成的集合.求能否用该集合中的元素和表示该整数,如果可以输出所有可行解.1<=n< ...

  3. javascript 中的数据驱动页面模式

    前段时间一直在想前端MVC的意义.这个话题仁者见仁,但是MVC的使用方法给我提了一个管理数据的有意思的想法--数据管理和数据驱动页面.我们以前的思路一直是事件驱动页面,事件驱动页面合乎逻辑而且节约代码 ...

  4. 网页解析Jsoup简单使用

    public static void main(String[] args) throws IOException { //System.out.println("Hello World!& ...

  5. 过滤HTML

    过滤HTML public static string NoHTML(string html){ string[] strArray2 = new string[] { "font" ...

  6. shell命令：echo命令详解

    功能说明:显示文字. 语 法:echo [-ne][字符串] / echo [--help][--version] 补充说明:echo会将输入的字符串送往标准输出.输出的字符串间以空白字符隔开, 并在 ...

  7. InfoPath本地发布及部署

    前言 最近在接触SharePoint项目,第一次接触,总感觉有些不适应.以前只是听过,现在要遇见了,有些小紧张.今天改了一下表单的东西,也是对sharepoint的慢慢熟悉过程,分享给初学,或者未学者 ...

  8. input单选框全选与反选

    input单选框全选与反选 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  9. apache日志文件 accesslog

    因为想要看到apache的日志记录用户请求某个页面所花的时间,需要添加额外参数才会记录,所以临时查了下哦..记下来了 在httpd.conf里可以看到一行这样的配置 LogFormat "% ...

  10. C# 启动和结束一个线程

    在程序执行中会遇到启动本软件的exe问,或者启用其它的exe文件,已达到执行某些操作的作用.下面是两种最常见的启动exe文件. 1.调用系统dll使用其提供的方法. 引用的dll, [DllImpor ...