css3选择器的优先级机制(html选择器优先级)
各位老铁们，大家好，今天由我来为大家分享css3选择器的优先级机制，以及html选择器优先级的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！
CSS3中选择器
css3中的属性选择器
选择器：：root根选择器（相当于html）：not取反选中器（否定选择器）：empty空选择器（选中没有任何元素的标签）：target目的选择器
选择器：（同级元素标签，标签相同）：first-child第一个子元素：last-child最后一个子元素：nth-child（n）：only-child只有一个子元素时：nth-last-child（n）倒数 n：数字/表达式/奇odd/偶even
选择器：（同级元素标签，标签不同）：first-of-type第一个子元素：last-of-type最后一个子元素：nth-of-type（n）：only-of-type只有一个子元素时：nth-last-of-type（n）倒数 n：数字/表达式/奇odd/偶even
选择器：（表单）：disabled禁用：enabled可用：checked默认选中菜单
选择器：：：selection默认选中：read-only只读：read-write可写
选择器：（举例div中class名） div [class=' a' ]{} class名必须有a的 div [class*=' a' ]{} class名中包含a的 div [class^=' a' ]{} class名中以a开头 div [class$=' a' ]{} class名中以a结尾
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;
css3有哪些选择器
css3选择器如下：
一、通配符选择器（＊）
通配符选择器是用来选择所有元素，，也可以选择某个元素下的所有元素。
二、元素选择器(E)
元素选择器，是css选择器中最常见而且最基本的选择器。
三、类选择器（.className）
类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名
四、id选择器（#ID）
ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用"#"如(#id),
五、后代选择器（E F）
后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素，比如说:E
F，前面E为祖先元素，F为后代元素，所表达的意思就是选择了E元素的所有后代F元素，请注意他们之间需要一个空格隔开。
六、子元素选择器(E>F)
子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F所表示的是选择了E元素下的所有子元素F。这和后代选择器（E
F）不一样，在后代选择器中F是E的后代元素，而子元素选择器E> F，其中F仅仅是E的子元素而以。
七、相邻兄弟元素选择器(E+ F)
相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且F元素在E元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择F元素。
OK，本文到此结束，希望对大家有所帮助。