常见css选择器

1、通用选择器

*　：选择页面所有元素

建议不使用，会给浏览器带来太多的负担

* {margin: 0; padding: 0;}

通用选择器也可以用到子选择器上
#container * {border: 1px solid black;}

2、标签选择器

Tag　：选择页面中指定的标签

a {color: red; }

3、类选择器

.className ：选择具有指定类名的所有元素

.error {color: red;}

4、ID选择器

\#idName　：选择具有指定ID的元素

id选择器不能重复使用，不过id选择器的渲染速度是最快的。

#container {width: 960px; margin: auto;}

5、组合选择器

.class#id ：两个或多个类或ID连续，选择具有所有指定类和ID的元素

.demo#test{}
p.demo#test{}

6、多重选择器

使用逗号将多个选择器声明分开，可以将相同的样式应用于多个选择器声明

.demo,#test{}
p,.demo,#test{}

7、后代选择器

X Y Z　：使用空格将多个选择器隔开，选择某个元素的所有后代元素，即位于该元素内部的所有子孙元素

后代选择器的渲染速率不快，特别是在有很长的前缀元素时

li a{text-decoration: none;}

8、相邻选择器

X+Y ：选择紧接在一个元素后面的紧邻的第一个同级元素，只作用于同一父级元素下

ul+p {color: red;}

猫头鹰选择器

*+* ：相邻选择器的运用，选择所有具有前置兄弟元素的元素，用来在一个容器内的元素之间添加间距，但不包括第一个元素

9、子选择器

X>Y　：选择元素的直接子元素，不含孙元素

p>ul{border: 1px solid black;}

10、兄弟选择器

X~Y　：选择在第一个选择器之后的所有指定的同级元素

ul~p {color: red;}

11、属性选择器

[attribute] ：选择具有特定属性的元素

a[title]{color:green;}  //带有title属性的a标签

[src]{color:green;}     //所有带有src属性的元素

[attribute=value] ：选择具有特定属性且值为指定值的元素

img[alt="des"] {display:block;}

[attribute~=value]：选择属性值用空格分割后包含指定值的元素

<a href="/to/image.jpg" data-info="external image">link</a>

a[data-info~="image"] {border: 1px solid black;}

[attribute*=value]：选择属性值包含指定字符片段的元素

a[href*="tuts"] {color:#1f6053;}

[attribute^=value]：选择属性值以指定值开头的元素

a[href^="http"] {padding-left: 10px;}

[attribute$=value]：选择属性值以指定值结尾的元素

img[href$="png"] {padding-left: 10px;}

12、 伪类选择器，这个我们单独学习，点击查看

选择器的权重

普通情况下id>class>tag

但是当id、class、tag、属性、伪类、伪元素等多种选择器组合后的权重怎么计算呢？

在CSS3中，每次计算权重会计算三个值(x,y,z)

x表示id选择器的数量
y表示class、伪类和属性选择器的数量
z表示tag、伪元素选择器的数量
然后依次比较x，y和z的值
x大的权重大，当x相同时继续比较y
y大的权重大，当y相同时继续比较z
z大的权重大，当z相同时按顺序，后面的权重大

.demo #list::befer{}              // (1,1,1)
.demo #list a::befer{}            // (1,1,2)
.demo .test input[type='text']{}  // (0,3,1)
.demo ul a:hover{}                // (0,2,2)
那么很容易就会比较出上面四个的权重2>1>3>4