CSS中的选择器规则非常重要,种类也比较多,而jquery中的元素选择器与之也非常类似,所以很有必要进行学习总结一番。
1.元素选择器:
例:选择所有p元素
p {background-color:gray}
以上p可以是任意的html元素名字,如body,h1,h2,div,span等。
2.选择器分组
例:选择所有p元素和h2元素
p,h2 {background-color:red}
3.类选择器
例:选择所有class=‘demo‘的元素
.demo {background-color:gray}
4.类结合元素选择器
例:选择所有class=‘demo‘的h1元素
h1.demo {background-color:red}
5.多类选择器
例:选择同时class标记为demo1,demo2的元素
.demo1.demo2{background-color:red}
6.ID选择器
例:选择ID=demo的元素
#demo {background-color:red}
这里需要注意的是:(1)ID在整个html文档中是唯一的,而class不唯一(2)类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写,所以类和 ID 值的大小写必须与文档中的相应值匹配。
7.属性选择器
(a)简单属性选择器
例:选择含有demo的属性的所有元素
*[demo] {color:red}
例:只选择有 href 属性的锚(a 元素)
a[href] {color:red}
例:选择同时有 href 和 title 属性的 HTML 超链接
a[href][title] {color:red}
(b)根据具体属性值选择
例:选出title是‘demo1‘,href是‘#‘的超链接
a[title=‘demo‘][href=‘#‘] {color:red}
需要注意的是title必须是‘demo‘,不能多也不能少。
(c)根据部分属性值进行选择
例:选出title属性里包含‘demo‘的超链接,比如title本来是‘demo1‘
a[title~=‘demo‘] {color:red}
需要注意的是省略了‘~’,将找出‘title‘属性值只能是‘demo‘的超链接。
(d)字串匹配属性选择器
利用几个正则符号来表示如下:
[abc^="def"] 表示选择 abc 属性值以 "def" 开头的所有元素;
[abc$="def"] 表示选择 abc 属性值以 "def" 结尾的所有元素;
[abc*="def"] 表示选择 abc 属性值中包含子串 "def" 的所有元素;
(e)特定属性类型
例:选择 lang 属性等于 en 或以 en- 开头的所有元素
*[lang|="en"] {color: red;}
所以,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:
<p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-au">G‘day!</p> <p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p>
8.后代选择器
h1 em {color:red;}
例:上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中:
<h1>This is a <em>important</em> heading</h1> <p>This is a <em>important</em> paragraph.</p>
需要注意的是,后代选择器有一个易被忽视的方面,即两个元素之间的层次间隔可以是无限的,例如,如果写作 ul em,这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深。
9.子元素选择器
如果希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器。
例:把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响,因为第二个h1的子元素只有em,而strong是其孙子元素。
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>
h1 > strong {color:red;}
10.相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。
例:如果要增加紧接在 h1 元素后出现的段落的上边距
h1 + p {margin-top:50px;}
请看下面这个文档树片段:
<div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> </div>
在上面的片段中,div 元素中包含两个列表:一个无序列表,一个有序列表,每个列表都包含三个列表项。这两个列表是相邻兄弟,列表项本身也是相邻兄弟。不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。
li + li {font-weight:bold;}
因此,上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。
11.伪类
(a)锚伪类
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */
需要注意的是:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的;a:active 必须被置于 a:hover 之后,才是有效的。
(b)first-child类
例:给定以下规则
p:first-child {font-weight: bold;} li:first-child {text-transform:uppercase;}
第一个规则将作为某元素第一个子元素的 p 元素(如果不是p元素就是没找到)设置为粗体。第二个规则将作为某个元素(在 HTML 中,这肯定是 ol 或 ul 元素)第一个子元素的li 元素(如果不是i元素就是没找到)变成大写。
<div> <p>These are the necessary steps:</p> <--!>是<div>第一个元素,并且还是<p>元素。 <ul> <li>Intert Key</li> <--!>是<ul>第一个元素,并且还是<li>元素 <li>Turn key <strong>clockwise</strong></li> <li>Push accelerator</li> </ul> <p>Do <em>not</em> push the brake at the same time as the accelerator.</p> </div>
最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。必须声明 <!DOCTYPE>,这样 :first-child 才能在 IE 中生效。
又例如:
<html> <head> <style type="text/css"> p > i:first-child { font-weight:bold; } </style> </head> <body> <p>some <i>text</i>. some <i>text</i>.</p> <p>some <i>text</i>. some <i>text</i>.</p> </body> </html>
首先p>i是p元素下的所有子元素i, 然后first-child,即图中加粗的部分。
再例如:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p:first-child i {
color:blue;
}
</style>
</head>
<body>
<h1>kdsk</h1>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
<div>
<p>some<i>text</i><span><i>test</i></span></p>
<p>some<i>text</i></p>
</div>
</body>
</html>
首先p:first-child是某元素第一个<p>元素,所有<body>下没找到,而<div>找到了,因为它第一个子元素就是p;然后再在该p元素下找出所有后代子元素i,即上面代码块中标蓝色的两个text。
12.伪元素
(a):first-line
用于向文本的首行设置特殊样式,注意只能用于块级元素,下面的属性可应用于:first-line.
font color background word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear
例:根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化
p:first-line { color:#ff0000; font-variant:small-caps; }
(b) :first-letter
用于向文本的首字母设置特殊样式,只能用于块级元素。下面属性可应用于:first-letter.
font color background margin padding border text-decoration vertical-align (仅当 float 为 none 时) text-transform line-height float clear
例:向文本的首字母设置特殊样式
p:first-letter { color:#ff0000; font-size:xx-large; }
(c):before
可以在元素的内容前面插入新内容.
例:在每个 <h1> 元素前面插入一幅图片
h1:before { content:url(logo.gif); }
(d):after
以在元素的内容之后插入新内容
例:在每个 <h1> 元素后面插入一幅图片
h1:after { content:url(logo.gif); }