今天给各位分享css3选择器有哪些的知识，其中也会对标签选择器的使用方法进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
一、html 5 的CSS3新增的伪类选择器还包括哪些
1、:first-of-type p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素。
2、:last-of-type p:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素。
3、:only-of-type p:only-of-type选择属于其父元素唯一的<p>元素的每个<p>元素。
4、:only-child p:only-child选择属于其父元素的唯一子元素的每个<p>元素。
5、:nth-child(n) p:nth-child(2)选择属于其父元素的第二个子元素的每个<p>元素。
6、:nth-last-child(n) p:nth-last-child(2)同上，从最后一个子元素开始计数。
7、:nth-of-type(n) p:nth-of-type(2)选择属于其父元素第二个<p>元素的每个<p>元素。
8、:nth-last-of-type(n) p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。
9、:last-child p:last-child选择属于其父元素最后一个子元素每个<p>元素。
10、:empty p:empty选择没有子元素的每个<p>元素（包括文本节点）。
11、:target#news:target选择当前活动的#news元素。
12、:enabled input:enabled选择每个启用的<input>元素。
13、:disabled input:disabled选择每个禁用的<input>元素
14、:checked input:checked选择每个被选中的<input>元素。
15、:not(selector):not(p)选择非<p>元素的每个元素。
16、::selection::selection选择被用户选取的元素部分。
二、css3 新增选择器有哪些
1、伪类选择器（:link,visited,hover,active,focus,first-child）
2、伪元素选择器（::first-line,first-letter,before,after）
3、属性选择器(foo[name='martin'])
4、E[foo^='bar']匹配E元素，该元素包含foo属性，且foo属性值以bar开头
5、E[foo$='bar']匹配E元素，该元素包含foo属性，且foo属性值以bar结尾
6、E[foo*='bar']匹配E元素，该元素包含foo属性，且foo属性值包含bar字符串
7、E:nth-child(n)匹配E所在父元素第n个匹配E的元素，非E的子元素也参与排序，若第n个子元素不是E元素，则该语句没有效果（注意这里的n从1开始）
8、E:nth-last-child(n)匹配E所在父元素倒数第n个匹配E的元素
9、E:nth-of-type(n)匹配E所在父元素第n个匹配E的元素，非E的子元素不参与排序(n同样是从1开始）注意区别nth-child(n)
10、另外，使用前要考虑浏览器版本，新增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匹配用户当前选中的元素
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;}
21 E:target匹配文档中特定"id"点击后的效果
-moz-box-shadow: 20px 10px 0#000;
-webkit-box-shadow: 20px 10px 0#000;
二. border-colors(为边框设置多种颜色)
-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;
-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值.
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: inherit| ellipsis| clip;
-o-text-overflow: inherit| ellipsis| clip;
(1)还有一个属性ellipsis-word,但各浏览器均不支持.
IE6+, Safari4, Chrome3, Opera10
word-wrap: normal| break-word;
IE6+, FF 3.5, Safari 4, Chrome 3
filter: alpha(opacity=50);/* for IE6, 7*/
-ms-filter(opacity=50);/* for IE8*/
九. box-sizing(控制盒模型的组成模式)
box-sizing: content-box| border-box;// for opera
-moz-box-sizing:content-box| border-box;
-webkit-box-sizing:content-box| border-box;
使用此值时,盒模型的组成模式是,元素宽度= content+ padding+ border;
使用此值时,盒模型的组成模式是,元素宽度= content(即使设置了padding和border,元素的宽度
FF3+, Opera 10, Safari 4, Chrome 3
resize: none| both| horizontal| vertical;
1.必须将元素的overflow属性设置为auto或hidden,该属性才能起作用(overflow设置为visible时,无效);
(2). both-->可同时缩放宽度和高度;
(3). horizontal-->仅能缩放宽度;
(4). vertical-->仅能缩放高度;
outline:边框厚度边框样式边框颜色;
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.
十三. 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属性之前,
十四. 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区域向外裁剪背景;
1.必须先指定background属性,然后才能指定该属性,如果该属性出现在background属性之前,
十五. 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;
十六. 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%);
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来设置透明度)
(5)正整数在0到255之间,百分数在0%到100%之间.
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;
关于本次css3选择器有哪些和标签选择器的使用方法的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。
