说明:本文只是自己的一个笔记,对于CSS3以前的选择器有我自己的一些理解在里边,CSS3的选择器只是列举(目前还未详细学习),然后解释各个选择器的优先级。
一、ID选择器
定义<div id="box"></div>
CSS#box{color:red;}
JSgetElementById("box");
JQuery$("#box")
一个文档中同名ID选择器只允许出现一次,一般用于文档标志性的地方,例如id=header
、id="content"
、id="footer"
等等。
二、类选择器
定义<div class="box"></div>
CSS.box{color:red;}
JSgetElementsByClassName("box")
JQuery$(".box")
一个文档允许使用多个同名类选择器,通过JS调用(getElements复数)得到的是一个数组。
三、元素选择器
定义<p></p>
CSSp{color:red}
JSgetElementsByTagName("p")
JQyery$("p")
四、属性选择器
选择器 | 描述 |
---|---|
[attribute] | 用于选取带有指定属性的元素。 |
[attribute=value] | 用于选取带有指定属性和值的元素。 |
[attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
[attribute=value] | 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 |
[attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
[attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
[attribute=value*] | 匹配属性值中包含指定值的每个元素。 |
可多个属性叠加:a[href][title] {color:red;}//将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
五、其它选择器
1.后代选择器(descendant selector)祖先与后代之间用空格隔开。
2.子元素选择器(parent>firstChild)指的是父元素下的第一个符合条件的子元素。
3.相邻兄弟选择器(sid+sid)指的是选择元素的下一个紧邻的兄弟元素,只是后一个,且两个具有相同的父元素
4.兄弟选择器(sid~sid)与上一个选择器类似,选择的是元素之后的兄弟元素,后一个或者多个。
六、选择器优先级
特指度表示一个css选择器表达式的重要程度,可以通过一个公式来计算出一个数值,数越大,越重要。
这个计算叫做“I-C-E”计算公式,
I——Id;ID选择器特指度100
C——Class;类选择器特指度10
E——Element;元素选择器特指度1
注意:!important优先级最高,高于上面一切。*** **选择器最低,低于一切。