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. WampServer修改MySQL密码

    WampServer安装后密码是空的,需要设置一下 一般有两种方式: 一是通过phpMyAdmin直接修改: 二是使用WAMP的MySql控制台修改. 第一种: ①在phpMyAdmin界面中点击[用 ...

  2. Centos 6 设置静态 IP 地址

    编辑文件进行IP设置: [root@test1 ~]# vi /etc/sysconfig/network-scripts/ifcfg-eth0 原文件内容前面加#被注释掉 下面为新加的内容 #DEV ...

  3. HTML 5结构

    进行总体布局时候,具体可以用的方法. 1.大纲:文档中各内容区块的结构编排. 内容区块可以使用标题元素来展示各级内容区块的标题. 关于内容区块的编排可以分为“显示编排”和“隐式编排”. 显示编排:明确 ...

  4. yii下多条件多表组合查询以及自写ajax分页

    多条件组合查询主要用到yii的CDbCriteria,这个类很多oem框架都有,非常好用. 前台表单 前台查询表单效果是这样的,多个条件组,每个组里放多个input,name为数组.当任何一个复选框被 ...

  5. sublime text 2代码片段（Snippet）功能的使用

    “snippet”在英语里面是“片段”的意思.当我们编码时候,通常想要打几个简略的字符串,就出来一些固定的模板. 例如:使用snippet在新建文件时快速生成HTML头部信息等. 定义很简单,菜单:t ...

  6. 用Python实现的一个简单的爬取省市乡镇的行政区划信息的脚本

    # coding=utf-8 # Creeper import os import bs4 import time import MySQLdb import urllib2 import datet ...

  7. WPF实现导航的几种方式

    下面是展示的是几种导航方式: 我们来具体看下xaml文件 <Page x:Class="WPF实现Navigation.Page1" xmlns="http://s ...

  8. 2016022603 - redis数据类型

    Redis支持5种类型的数据类型 1.字符串:Redis字符串是字节序列.Redis字符串是二进制安全的,这意味着他们有一个已知的长度没有任何特殊字符终止,所以你可以存储任何东西,512兆为上限.[类 ...

  9. 移除Sourcesafe与VC6的绑定

    整理日: 2015年2月16日 HKEY_CURRENT_USER\Software\Microsoft\DevStudio\6.0\Source Control\Disabled

  10. 项目经验谈---IM新消息界面刷新异常处理记录

    项目中使用到ContentObserver来观察Provider的变化,当对Uri做数据库操作时对应的Provider会发一条Notify消息调用UI上层的ContentChange方法,在这个Con ...