css3新增选择器，css选择器怎么使用
大家好,今天小编来为大家解答以下的问题，关于css3新增选择器，css选择器怎么使用这个很多人还不知道，现在让我们一起来看看吧！
css3 新增选择器有哪些
一、css3之前的选择器
ID选择器，#
类选择器，.
包含选择器(E F)
伪类选择器（:link,visited,hover,active,focus,first-child）
伪元素选择器（::first-line,first-letter,before,after）
通配选择器(.)
属性选择器(foo[name='martin'])
子包含选择器(E>F)
相邻兄弟选择器(E+F)
二、css3新增选择器
新增属性选择器：
E[foo^='bar']匹配E元素，该元素包含foo属性，且foo属性值以bar开头
E[foo$='bar']匹配E元素，该元素包含foo属性，且foo属性值以bar结尾
E[foo*='bar']匹配E元素，该元素包含foo属性，且foo属性值包含bar字符串
新增结构伪类选择器：
E:root匹配文档所在的根元素
E:nth-child(n)匹配E所在父元素第n个匹配E的元素，非E的子元素也参与排序，若第n个子元素不是E元素，则该语句没有效果（注意这里的n从1开始）
E:nth-last-child(n)匹配E所在父元素倒数第n个匹配E的元素
E:nth-of-type(n)匹配E所在父元素第n个匹配E的元素，非E的子元素不参与排序(n同样是从1开始）注意区别nth-child(n)
E:last-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
另外，使用前要考虑浏览器版本，新增css3选择器存在兼容性问题。平时多多练习，多动手。
CSS3新增的哪些选择器和常见的属性是哪些
一、新增的选择器
CSS3新增的属性选择器{除ie6外的大部分浏览器支持）
1 E[att^="val"]属性att的值以"val"开头的元素 div[id^="nav"]{ background:#ff0;}
2 E[att$="val"]属性att的值以"val"结尾的元素
3 E[att*="val"]属性att的值包含"val"字符串的元素
结构伪类选择器（过滤选择器）
(注：FireFox 1.5/2.0/3.0支持E:root，FireFox 3.0支持E:last-child、E:only-child、E:empty。
由于IE6/7/8不支持，没办法，选择合适的场合用吧。)
4 E:root匹配文档的根元素，对于HTML文档，就是HTML元素
5 E:nth-child(n)匹配其父元素的第n个子元素，第一个编号为1 p:nth-child(3){ color:#f00;}
6 E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个编号为1 p:last-child{ background:#ff0;}
7 E:nth-of-type(n)与:nth-child()作用类似，但是仅匹配使用同种标签的元素 p:nth-of-type(2){color:red;}选择父元素的第n个子元素p
8 E:nth-last-of-type(n)与:nth-last-child()作用类似，但是仅匹配使用同种标签的元素
9 E:last-child匹配父元素的最后一个子元素，等同于:nth-last-child(1)
10 E:first-of-type匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
11 E:last-of-type匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
12 E:only-child匹配父元素下仅有的一个子元素，等同于:first-child:last-child或:nth-child(1):nth-last-child(1) p:only-child{ background:#ff0;}
13 E:only-of-type匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)
14 E:empty匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 p:empty{ background:#ff0;}
与用户界面(UI)有关的伪类(ie6 7 8不支持)
15 E:enabled匹配表单中激活的元素
16 E:disabled匹配表单中禁用的元素 input[type="text"]:disabled{ background:#ddd;}
17 E:checked匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
18 E::selection匹配用户当前选中的元素
级元素通用选择器
ie6不支持
19 E~ F匹配任何在E元素之后的同级F元素 p~ ul{ background:#ff0;}
反选伪类
(ie6 7 8 firefox3.0以下 Opera9.0不支持)
20 E:not(s)匹配不符合当前选择器的任何元素:not(p){ border:1px solid#ccc;}
:target伪类
(ie6 7 8不支持)
21 E:target匹配文档中特定"id"点击后的效果
二、css3新增属性
一. box-shadow(阴影效果)
使用:
box-shadow: 20px 10px 0#000;
-moz-box-shadow: 20px 10px 0#000;
-webkit-box-shadow: 20px 10px 0#000;
支持:
FF3.5, Safari 4, Chrome 3
二. border-colors(为边框设置多种颜色)
使用:
border: 10px solid#000;
-moz-border-bottom-colors:#555#666#777#888#999#aaa#bbb#ccc;
-moz-border-top-colors:#555#666#777#888#999#aaa#bbb#ccc;
-moz-border-left-colors:#555#666#777#888#999#aaa#bbb#ccc;
-moz-border-right-colors:#555#666#777#888#999#aaa#bbb#ccc;
说明:
颜色值数量不固定,且FF的私有写法不支持缩写:-moz-border-colors:#333#444#555;
支持:
FF3+
三. boder-image(图片边框)
使用:
-moz-border-image: url(exam.png) 20 20 20 20 repeat;
-webkit-border-image: url(exam.png) 20 20 20 20 repeat;
说明:
(1). 20 20 20 20--->边框的宽度,分别对应top, right, bottom, left边框,改变宽度可以实现不同的效果;
(2).边框图片效果(目前仅实现了两种):
repeat---边框图片会平铺,类似于背景重复;
stretch---边框图片会以拉伸的方式来铺满整个边框;
(3).必须将元素的边框厚度设置为非0非auto值.
支持:
FF 3.5,Safari 4, Chrome 3
四. text-shadow(文本阴影)
使用:
text-shadow:[<颜色><水平偏移><纵向偏移><模糊半径>]||[<水平偏移><纵向偏移><模糊半径><颜色>];
说明:
(1)<颜色>和<模糊半径>是可选的,当<颜色>未指定时,将使用文本颜色;当<模糊半径>未指定时,半径值为0;
(2)shadow可以是逗号分隔的列表,如:
text-shadow: 2px 2px 2px#ccc, 3px 3px 3px#ddd;
(3)阴影效果会按照shadow list中指定的顺序应用到元素上;
(4)这些阴影效果有可能相互重叠,但不会叠加文本本身;
(5)阴影可能会跑到容器的边界之外,但不会影响容器的大小.
支持:
FF 3.5, Opera 10, Safari 4, Chrome 3
五.text-overflow(文本截断)
使用:
text-overflow: inherit| ellipsis| clip;
-o-text-overflow: inherit| ellipsis| clip;
说明:
(1)还有一个属性ellipsis-word,但各浏览器均不支持.
支持:
IE6+, Safari4, Chrome3, Opera10
六. word-wrap(自动换行)
使用:
word-wrap: normal| break-word;
支持:
IE6+, FF 3.5, Safari 4, Chrome 3
七. border-radius(圆角边框)
使用:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
支持:
FF 3+, Safari 4, Chrome 3
八. opacity(不透明度)
使用:
opacity: 0.5;
filter: alpha(opacity=50);/* for IE6, 7*/
-ms-filter(opacity=50);/* for IE8*/
支持:
all
九. box-sizing(控制盒模型的组成模式)
使用:
box-sizing: content-box| border-box;// for opera
-moz-box-sizing:content-box| border-box;
-webkit-box-sizing:content-box| border-box;
说明:
1. content-box:
使用此值时,盒模型的组成模式是,元素宽度= content+ padding+ border;
2. border-box:
使用此值时,盒模型的组成模式是,元素宽度= content(即使设置了padding和border,元素的宽度
也不会变).
支持:
FF3+, Opera 10, Safari 4, Chrome 3
十. resize(元素缩放)
使用:
resize: none| both| horizontal| vertical;
说明:
1.必须将元素的overflow属性设置为auto或hidden,该属性才能起作用(overflow设置为visible时,无效);
2.属性值说明:
(1). none-->禁用缩放;
(2). both-->可同时缩放宽度和高度;
(3). horizontal-->仅能缩放宽度;
(4). vertical-->仅能缩放高度;
支持:
safari 4, chrome 3
十一. outline(外边框)
使用:
outline:边框厚度边框样式边框颜色;
outline-offset:偏移值;
说明:
outline-offset需要独立写,简写是无效的.
支持:
FF3+, safari 4, chrome 3, opera 10
十二. background-size(指定背景图片的尺寸)
使用:
-o-background-size: [length| percentage]{1, 2};
-webkit-background-size:[length| percentage]{1, 2};
例如:
-o-background-size: 50px 60px;
-webkit-background-size:50px 60px;
这会将背景图片的宽设置了50px,高60px.
支持:
safari 4, chrome 3, opera 10
十三. background-origin(指定背景图片从哪里开始显示)
使用:
-webkit-background-origin: border| padding| content;
-moz-background-origin: border| padding| content;
说明:
(1) border-->从border区域开始显示背景;
(2) padding-->从padding区域开始显示背景;
(3) content-->从content区域开始显示背景;
注意:
1.必须先指定background属性,然后才能指定该属性,如果该属性出现在background属性之前,
会无效.
支持:
safari 4, chrome 3, FF 3+
十四. background-clip(指定背景图片从什么位置开始裁切)
使用:
-webkit-background-origin: border-box| padding-box| content-box| no-clip;
说明:
(1)border-box-->从border区域向外裁剪背景;
(2)padding-box-->从padding区域向外裁剪背景;
(3)content-box-->从content区域向外裁剪背景;
(4) no-clip-->不裁切背景.
注意:
1.必须先指定background属性,然后才能指定该属性,如果该属性出现在background属性之前,
会无效.
支持:
safari 4, chrome 3
十五. background(为一个元素指定多个背景)
使用:
background: [background-image]| [background-origin]| [background-clip]| [background-repeat]| [background-size]| [background-position]
例子:
background: url(bg1.png) no-repeat left top, url(bg2.png) no-repeat right bottom;
支持:
safari 4, chrome 3
十六. hsl(通过色调,饱和度,亮度来指定颜色值)
使用:
hsl:(<length>||<percentage>||<percentage>);
说明:
(1) length: h(色调), 0(或360)表示红色, 120表示绿色, 240表示蓝色;
(2) percentage: s(饱和度),取值为0%到100%之间的值;
(3) percentage: l(亮度),取值为0%到100%之间的值;
例子:
background: hsl(240, 50%, 100%);
color: hsl(100, 80, 100%);
支持:
safari 4, chrome 3, FF3, opera 10
十七. hsla(在hsl的基础上上增加了一个透明度设置)
使用:
hsla:(<length>||<percentage>||<percentage>||<opacity>);
说明:
(1) opacity: a(透明度),取值在0到1之间;
例子:
background: hsl(240, 50%, 100%, 0.5);
color: hsl(240, 50%, 100%, 0.5);
支持:
safari 4, chrome 3, FF3, opera 10
十八. rgba(基于r,g,b三个颜色通道来设置颜色值,通过a来设置透明度)
使用:
rgba:(r, g, b, opacity);
说明:
(1) r:红色,正整数|百分数;
(2) g:绿色,正整数|百分数;
(3) b:蓝色,正整数|百分数;
(4) a:透明度,取值在0到1之间;
(5)正整数在0到255之间,百分数在0%到100%之间.
例子:
rgba:(100%, 244, 0, 0.5);
支持:
safari 4, chrome 3, FF3, opera 10
十九、transition（a标签hover渐隐效果）
a:hover{transition: color 0.15s linear 0s, background-color 0.3s linear 0s;}
-webkit-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
-moz-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
-o-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
-ms-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
html 5 的CSS3新增的伪类选择器还包括哪些
:first-of-type p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素。
:last-of-type p:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素。
:only-of-type p:only-of-type选择属于其父元素唯一的<p>元素的每个<p>元素。
:only-child p:only-child选择属于其父元素的唯一子元素的每个<p>元素。
:nth-child(n) p:nth-child(2)选择属于其父元素的第二个子元素的每个<p>元素。
:nth-last-child(n) p:nth-last-child(2)同上，从最后一个子元素开始计数。
:nth-of-type(n) p:nth-of-type(2)选择属于其父元素第二个<p>元素的每个<p>元素。
:nth-last-of-type(n) p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。
:last-child p:last-child选择属于其父元素最后一个子元素每个<p>元素。
:root:root选择文档的根元素。
:empty p:empty选择没有子元素的每个<p>元素（包括文本节点）。
:target#news:target选择当前活动的#news元素。
:enabled input:enabled选择每个启用的<input>元素。
:disabled input:disabled选择每个禁用的<input>元素
:checked input:checked选择每个被选中的<input>元素。
:not(selector):not(p)选择非<p>元素的每个元素。
::selection::selection选择被用户选取的元素部分。
文章到此结束，如果本次分享的css3新增选择器和css选择器怎么使用的问题解决了您的问题，那么我们由衷的感到高兴！