css选择器以及权重问题

css选择器 【The selector】

---

1 css基础选择器

$("#home")  
$(".slide")
$("ul li a")
$(".box > h2")
$("span.sex")

通用兄弟选择器E ~ F

通用兄弟元素选择器是CSS3新增加一种选择器，用于选择某元素后面的所有兄弟元素。它和相邻兄弟元素选择器用法相似，但不同于前者只是选择相邻的后一个元素，而通用兄弟元素选择器是选择所有元素。

h1 ~ p {
    margin-top:5px;
}

<div>
    <h1>标题</h1>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
</div>

▲ 将会选择h1元素后面的所有的兄弟元素p

2 css属性选择器

$("input[type]") //具有type属性的input
$("input[type="text"]") 
$("height=20px")
$("a[href^='http://']") // 以http开头的http
$("img[src $='jpg']") //  以 jpg结尾的img
$("input *=name") //包含name属性的input

3 伪类选择器

E:link 匹配所有未被点击的链接

E:visited 匹配所有已被点击的链接

E:active 匹配鼠标已经其上按下、还没有释放的E元素

E:hover 匹配鼠标悬停其上的E元素

E:focus 匹配获得当前焦点的E元素

---

E:enabled 匹配表单中激活的元素

E:disabled 匹配表单中禁用的元素

E:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素

E::selection 匹配用户当前选中的元素

---

E:root 匹配文档的根元素，对于HTML文档，就是HTML元素

E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1

E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1

E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素

E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素

E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)

E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)

E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)

E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)

E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)

E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素

---

权重 【】

---

CSS中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先。

<section id="main" class="sex" >
  <p style="border:none;"></p>
</section> 

css特殊性分为4个等级，每个等级代表一类选择器，4个等级的定义如下：
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#main，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div ，权值为1。

   #nav .navs ul li a span.other 
// 100   10   1  1  1    1 10  权重是124

总而言之：

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

---

简洁、高效的CSS

所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误：

◆不要在ID选择器前使用标签名

一般写法：DIV#divBox

更好写法：#divBox

解释： 因为ID选择器是唯一的，加上div反而增加不必要的匹配。

◆不要再class选择器前使用标签名

一般写法：span.red

更好写法：.red

解释：同上

◆尽量少使用层级关系

一般写法：#divBox p .red{color:red;}

更好写法：.red{..}

◆使用class代替层级关系

一般写法：#divBox ul li a{display:block;}

更好写法：.block{display:block;}

---

关于媒介查询
估计很多人在响应式的网站CSS很经常看到类似下面的这段代码：

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

这个应该算是一个media的一个标准写法，上面这段CSS代码意思是：当页面小于960px的时候执行它下面的CSS.这个应该没有太大疑问。

应该有人会发现上面这段代码里面有个screen，他的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时，你可以直接这样写：

@media (max-width: 960px){
    body{
        background: #000;
    }
}