CSS基础学习（选择器）（一）

CSS样式选择器

对大多技术人员来说都比较熟悉 CSS 选择器，举一例子来说，假设给一个 p 标签增加一个类（class），可是执行后该 class 中的有些属性并没有起作用。通过 Firebug 查看，发现没有起作用的属性被覆盖了，这个时候突然意识到了 CSS 选择器的优先级问题。严格来讲，选择器的种类可以分为三种：标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而在标签内写入 style="" 的方式，应该是 CSS 的一种引入方式，而不是选择器，因为根本就没有用到选择器。而一般人们将上面这几种方式结合在一起，所以就有了5种或6种选择器了。

CSS 选择器效率从高到低的排序如下：

选择器	用法
id选择器	#myid
类选择器	.myclassname
标签选择器	div,h1,p
相邻选择器	h1+p
子选择器	ul > li
后代选择器	li a
通配符选择器	*
属性选择器	a[rel="external"]
伪类选择器	a:hover, li:nth-child

选择器的优先级是怎么规定的呢？

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级，用10表示类选择器的优先级，用 100 标示 ID选择器的优先级。比如上例当中 .polaris span {color:red;}的选择器优先级是 10 + 1 也就是11；而 .polaris 的优先级是10；浏览器自然会显示红色的字。理解了这个道理之后下面的优先级计算自是易如反掌：

div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级1+100 + 10 + 1
#xxx li 优先级 100 + 1
<div style="color:red">polaris</div> 优先级 1000 不推荐使用

必须记住的20类CSS选择器

1.*   

将页面上所有每一个元素都选到

*{
margin: 0;
padding: 0;}

* 也可以用来选择某元素的所有子元素。（不推荐使用）

#container * {
border: 1px solid black;}

2.#X   

找用 id 来定位某个元素

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

3..X   

找用 class来定位某个元素

.error {
color: red;}

4.X Y   

定位li标签下的 a 标签

li a {
text-decoration: none;}

5.X   

定位页面上所有的某标签

a { color: red; }
ul { margin-left: 0; }

6.X:visited and X:link   

我们使用:link这个伪类来定位所有还没有被访问过的链接。

另外，我们也使用:visited来定位所有已经被访问过的链接。

a:link {color:red;}
a:visited {color: purple;}

7.X+Y

这个叫相邻选择器。它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有ul标签后面的第一段，并将它们的颜色都设置为红色。

ul + p {
color: red;}

 8.X>Y

div#container > ul {
border: 1px solid black;}

 X Y 和 X > Y的差别就是后面这个指挥选择它的直接子元素。看下面的例子：

.parent>div{ /*选中直接子元素    就是选中 child*/
				width: 100px;
				height: 100px;
				background: #FFC0CB;
			}	
<div class="parent">
	<div class="child">
		<div class="sunzi"></div>
	</div>
</div>

  9.X ~ Y

兄弟节点组合选择器跟 X+Y 很相似，然后它又不是那么的严格。ul + p选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器，会选择跟在目标元素后面的所有匹配的元素。

ul ~ p {
color: red;}

10.X[title]

这个叫属性选择器，上面的这个例子中，只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。

a[title] {
 color: green;}

11.X[href="foo"]

上面这片代码将会把 href 属性值为http://strongme.cn 的锚点标签设置为绿色

a[href="http://strongme.cn" rel="external nofollow" target="_blank" ] {
color: #1f6053; /* nettuts green */}

12.X[href="strongme"]

这样，就指定了strongme这个值必须出现在锚点标签的href属性中，不管是strongme.cn还是strongme.com还是www.strongme.cn都可以被选中。

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

13. X:after  X:before

:before,在元素内部创建1个最前面假的子元素
:after，在元素内部的最后面创建1个假的子元素

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }

.clearfix { 
   display: inline-block; 
   _height: 1%;
}

14. X:hover

如果想在用户鼠标飘过的地方涂点儿彩，那这个伪类写法可以办到。

div:hover {
background: #e3e3e3; }

15. X:not(selector)

取反伪类是相当有用的，假设我们要把除id为container之外的所有div标签都选中。那上面那么代码就可以做到。

或者说我想选中所有出段落标签之外的所有标签。

div:not(#container) {
   color: blue;
}
:not(p) {
  color: green;
}

16. X:nth-child(n)

请注意nth-child接受一个整形参数，然后它不是从0开始的。如果你想获取第二个元素那么你传的值就是li:nth-child(2).

我们甚至可以获取到由变量名定义的个数个子标签。例如我们可以用li:nth-child(4n)去每隔3个元素获取一次标签。

li:nth-child(3) {
   color: red;
}

17. X:nth-child(n)

假设你在一个ul标签中有N多的元素，而你只想获取最后三个元素，甚至是这样li:nth-child(397)，你可以用nth-last-child伪类去代替它。

li:nth-last-child(2) {
   color: red;
}

18. X:first-child

这个结构性的伪类可以选择到第一个子标签，你会经常使用它来取出第一个和最后一个的边框。

ul li:first-child {
   border-top: none;
}

19. X:last-child

跟first-child相反，last-child取的是父标签的最后一个标签。

ul > li:last-child {
   color: green;
}

20. X:only-of-type

li:only-of-type {
   font-weight: bold;
}

结构性伪类可以用的很聪明。它会定位某标签只有一个子标签的目标。设想你想获取到只有一个子标签的ul标签？

使用ul li会选中所有li标签。这时候就要使用only-of-type了。

ul > li:only-of-type {
   font-weight: bold;
}