css —— 选择器优先级及jQuery遍历元素常用方法

一、部分常用css选择器

1、子元素选择器：>

作用：只选取直接子元素。

优点：使html元素层次很清晰的呈现。

2、相邻兄弟元素选择器：+

作用：选取相邻兄弟元素中的第二个。适用于兄弟元素(可以是不同元素)第一个与后面的(某个或所有)样式不一样的场合。

例：

<div>

<a>背景1</a>

<span>背景2</span>

</div>

择若为div内部两个标签设置不同背景，css可为：

div a { background：url（）；}

div > a+ span{ background：url（）；}

3、属性选择器：[attribute]、[attribute=value]

(1)、[attribute]：选取具有某个属性的元素，元素范围可在中括号前添加，但不能有空格，如a[title]：选取具有title属性的a标签。

(2)、[attribute=value]：选取某个属性值为value的标签（value没有引号）。同样可有元素范围限制。

二、jQuery遍历元素常用方法（参考w3cshool）

1、祖先元素

(1)、parent()：被选元素直接父元素。

(2)、parents()：被选元素的所有父元素。可加元素范围，如：parents("ul")，选取父类元素中的所有ul元素。

(3)、parentsUntil("x")：返回所有介于被选元素与x元素之间(不包含)的所有元素。

2、后代元素

(1)、children()：返回被选元素的所有直接子元素,同样可加元素范围，如children("p .red")。

(2)、find("x")：返回被选元素的所有后代元素中的x元素，范围x必填，可为*。与children()不同之处，children()只找直接子元素。

3、同胞元素

(1)、prev()：前一个同胞元素。

(2)、prevAll()：前面所有同胞元素。

(3)、next()：紧跟的后一个同胞元素。

(4)、nextAll()：后面所有同胞元素。

(5)、siblings()：返回被选元素的所有同胞元素。

4、过滤

(1)、eq()；

(2)、filter(过滤条件)：返回符合过滤条件的被选元素，如filter(".red")，返回带有类red的被选元素。

(3)、first()；

(4)、last()；

(5)、not(条件)：与filter相反。

三、css选择器优先级

(1)、:hover等伪类高于自定义的class，若定义了：hover，则无法通过增删class达到实现相应的mouseenter、mouseover等事件。

解决方法，不用：hover，也将本来的hover效果定义为class，通过js控制。

(2)、若有多处同名的class，寻找某处的具有该class的元素应该在前面添加某个父类元素作定位。

四、css体会

(1)、对于同级的具有同种class或相同的元素，其基本样式一般相同，也正因此，可单独定义为一个class，或通过派生查找规定统一样式。若此时个别元素具有特殊样式，可将特殊样式单独分离(不写在统一样式中，此时统一样式的此样式值为默认值)，单独设置另一个class，并通过该class设置特殊样式。

如，假设有一个水平的列表：

<ul>

<li class="floatLeft"><li>

<li class="floatLeft"><li>

<li class="marginLeft"><li>

</ul>

ul{

list-style:none;

width:206px;

height:52px;

line-height:30px;

}

对应公有属性设置：
.ul>li{
/*公有属性中不设置私有属性设置，结构清晰同时也避免一些错误*/

width: 50px;
height: 30px;
border:1px solid #ccc;
}
对应私有属性设置：
.floatLeft{
float: left;

}
.marginLeft{

margin-left:150px;

}

五、css注意事项

(1)、使用元素名与class名或属性等组合查找时，元素名与class的点号之间不能有空格，否则查找不到！！！如：

div.panel{/*找class为panel的div并设置样式*/}

div#panel{/*找id为panel的div并设置样式*/}

div[style]{/*找具有style属性的div并设置样式*/}

。。。