css3新特性_CSS3 — 新增选择器-CSDN博客

一、CSS3概述

1.1 CSS3历史

CSS3 是层叠样式表(Cascading Style Sheets) 语言的最新进展，目的在于扩展 CSS2.1。
它为我们带来了许多期待已久的新特性，例如圆角，阴影，gradients(渐变)，transitions(过渡) 或 animations(动画) ，当然还有新的布局如：multi-columns ， flexible box 或 grid layouts。

CSS3为什么能发展这么快，百花齐放，源于CSS从创立之初就有一个规定，就是遇见不认识的选择器、属性，静默不报错，不影响后面能够识别的语句：

<style type="text/css">
    LTD {                  → 这个选择器是错误的，但是不影响后面的正确选择器
        width:4540px;
        height: 4540px;
        background-color: red;
    }
    div {
        adsffdg:435435px;   → 这个属性是错的，但是不影响后面的正确属性
        width: 200px;
        dfgfdg:3243px;      → 这个属性是错的，但是不影响后面的正确属性
        height: 200px;
        background-color: yellow;
    }
</style>

1.2 兼容性

CSS3和HTML5一起的兼容性，有一个网站专门做了打分：http://www.html5test.com

CSS3现在主要用于移动端，因为移动端没有IE浏览器，PC端估计真需要再等两年才能完全使用。

哆啦A梦CSS3测试： http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/

二、选择器

CSS3 中，相对于 CSS2.1 版本的 7 个选择器，增加了更多其他的选择器，实现了更多的选择方式。

CSS2.1中，选择器7种：
id选择器        #box {}
类选择器        .red {}
标签选择器      p {}
后代            div p {}
交集            div.red {}
并集            div,p {}
通配符          * {}

2.1 关系选择符

> 儿子，亲儿子，不是后代，必须是儿子 + next sibling，下一个兄弟 ~ next all siblings ，下所有兄弟

2，1.1 子级选择器

子级选择器用于选取带有特定父元素的元素。书写语法：element1 > element2 意：如果 element2 元素不是父元素 element1 的直接子元素，则不会被选择。 > 号之前书写父级的选择器，> 符号之后写子级选择器，必须满足父子级关系才能选中签。

> 儿子选择器   IE7开始兼容
.box>p{
    color:red;
}

2.1.2 兄弟选择器

相邻兄弟选择器

相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素。    
书写语法：E1 + E2。
 
注意： a）选中的是紧跟在 E1 之后的同级元素 E2。 
       b）只能选中紧跟在后面的一个 E2 元素。 
       c）二者有相同的父元素。 
       d）+ 符号前后可以添加空格书写。

+ 下一个兄弟(相邻)，next sibling      IE7开始兼容
    h3+p{
        color:green;
    }

会变色的元素：
    <h3></h3>
    <p>●</p>    会变色
    <p>●</p>
    <p>●</p>
    <h3></h3>   会变色
    <p>●</p>
    <p>●</p>

其他兄弟选择器

其他兄弟选择器匹配同一个父元素中在 element1 后面的所有 element2 元素。 
书写语法：element1~element2

注意： a）选择 element1 之后出现的所有 element2。 
       b）两种元素必须拥有相同的父元素，但是 element2 不必直接紧随      element1。 
       c）~ 符号前后可 以添加空格书写。

~ 后面所有兄弟，next all siblings
h3~p{
    color:red;
}

HTML结构中能够变红的：
<p>●</p>
<h3></h3>
<p>●</p>        会变色
<p>●</p>        会变色
<h3></h3>
<h4></h4>
<p>●</p>        会变色
<p>●</p>        会变色
<div>
    <p>●</p>
</div>

jQuery中，借用了这几个符号，> 、 + 、 ~ 都能够用于$()函数中，都是IE6也兼容的。

$("div>p").animate({"width":656},454);
IE6也能够兼容

$("div>p")
    等价于
$("div").children("p")

$("div~p")
    等价于
$("div").nextAll("p")

2.2 属性选择器

哲学上讲，CSS2.1层面，只能通过id属性、class属性选择元素。CSS3中，可以通过任意属性选择元素了。

选择器img标签中所有src属性为images/2.png的：

    img[src="images/2.png"]{
        border:10px solid red;
    }

属性选择器用来选择包含指定属性的标签。

方括号就是属性选择器，可以把任何HTML标签的属性当做选择器。

    <img src="images/0.png" alt="11" kaola="你"/>
    img[kaola="你"]{
        transform:rotate(45deg);
    }

#box    等价于  [id="box"]

三、伪类

CSS2.1中，只能给a标签增加伪类。a:link、a:hover、a:visited、a:active。

3.1 :hover能够给所有元素使用了

:hover这个选择器，在CSS3中，能够给任何元素使用了。 IE7兼容各种元素:hover

3.2 :focus得到焦点时

当一个表单元素有焦点，那么就能够被 :focus伪类选中。
input:focus{
/*动画*/
animation:haha 1s ease 0s infinite alternate;
}

3.3 :not反着选

没有.haha类的p，IE9兼容
p:not(.haha)

3.4 :only-child 唯一的儿子

如果一个p是某一个元素的唯一的儿子，那么选择它。IE9兼容。
p:only-child {
color:red;
}

3.5 :empty 空标签

当一个标签是完全首尾相接，没有任何的空格、tab、换行、文字，就是:empty
<div></div> → 满足div:empty
<div> </div>
<div>
</div>
<div>我</div>

3.6 :checked 选中的

单选按钮、复选框，如果被勾选，那么能被伪类:checked选中
input[type=”radio”]:checked

3.7 :disabled和:enabled

IE9兼容
无效和有效的input控件。
<input type="text" disabled/>
<input type="text" />
<input type="button" disabled value="adsfdsaf"/>
<input type="button" value="adsfdsaf"/>
input:disabled

3.8 结构伪类选择器

nth-child（n）

• n 可以是数字，关键字和公式
• n 如果是数字，就是选择第 n 个
• 常见的关键词 even 偶数 odd 奇数
• 常见的公式如下 ( 如果 n 是公式，则从 0 开始计算，n是从 0 ，1，2，3.. 一直递增）
• 但是第 0 元素或者超出了元素的个数会被忽略

E:nth-child(n) 和 E:nth-of-type(n) 的区别

• E:nth-child(n) 匹配父元素的第 n 个子元素 E，同时需要满足两个条件。
• E:nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素 E，会忽视其他同级的非同类型元
素。

四、伪元素

新增伪元素

4.1 ::before 、 ::after

两个冒号表示伪元素。
p::before{
content:">>>>";
}
content表示内容，所有的 ::before 必须有content属性，否则语法错误。
如果没有content，那么也要写content:""
注意 ::before 、::after都是行内元素，必须转块或者脱标才能设置宽度高度。

before的诞生，方便了很多：

after可以用来清除浮动。
.cl::after{
content:"";
display: block;
clear: both;
}

IE8不兼容::after，但是兼容:after。所以为了更大的兼容，写成:after即可。

4.2 ::selection 被选中的文字样式

p::selection{
background-color: orange;
color:white;
}

4.3 ::first-letter 、::first-line 第一个文字和第一行

IE9开始兼容

h5 写法和传统写法区别

• 1. 单冒号 E:before
• 2. 双冒号 E::before • 浏览器对以上写法都能识别，双冒号是 h5 的语法规范。

伪元素的注意事项

• 伪元素只能给双标签添加，不能给单标签添加
• 伪元素的冒号前不能有空格，如 E ::before 这个写法是错误的
• 伪元素里面必须写上属性 content:"";
• before 和 after 创建一个元素，但是属于行内元素
• 因为在 DOM 里面看不见刚才创建的元素，所以我们称为伪元素。