css笔记（二）选择器

来源：互联网发布：java调用webkit内核编辑：程序博客网时间：2024/05/23 19:59

5 选择器

5.1 类型选择 element

根据元素的类型进行选择,如：p,div,h1等。

5.2 类选择器.class

根据元素class属性进行选择。如：.myclass。

5.3 id选择器 #id

根据元素的id属性进行选择。如：#1221，#abc。可与元素类选择合用，如div#1221表示选择id为1221的div元素。

5.4 *选择器

选择所有元素。

5.5 并选择器element,element

如，“p,h1”。

有一个有趣的往事，由于CSS的继承性，以下第一条规则将使body元素的子元素都将继承其字体属性，但由于Netscape 4浏览器（约于1997年发布）不支持继承，所以还必须再增加以下的第二条规则，然而这些都已成为往事。

body {

font-family: Verdana, sans-serif;

}

p, td, ul, ol,li, dl, dt, dd {

font-family: Verdana, sans-serif;

}

5.6 后代选择器element element

如，“div p”表示选择div类型元素下的所有p类型元素，包括下一级、下二级、下n级p类型元素。

5.7 子选择器element>element

如，“div>p”表示父元素为div元素的p元素。只包括下一级的类型元素。

如<div><span><p>test</p></span></div>中的p类型元素不能被div>p选择器选中。

5.8 后邻选择器element+element

如，“div+p”表示紧接在div类型元素后的p类型元素。

如，<div><h1>Test</h></div><p>Thisis a test</>中的p元素将被div+p所选。

5.9 后面兄弟选择器 element1~element12

element1和element2同属共同的父元素且平级，element2位于element1之后（不一定紧邻），element2具有所有性，不单指第一个满足上条件的元素，而是指所有满足上述条件的元素。如：

p~ul

{

background:#ff0000;

}

5.10 属性选择器[attribute]

选择带有某一属性的元素，如,[target]，又如[style]等。

如，<a href="http://www.disney.com" target="_blank">disney.com</a>元素将被[target]选择器选中。

5.11 属性值选择器[attrubit=value]

选择某一属性为某值的元素。如a[target=_blank],可选中target="_blank" 的 <a> 元素。

5.12 属性值包含词选择器[attrubit~=value]

选中某属性包含某词的元素，如[title~=flower]可选中 <imgsrc="/i/eg_tulip.jpg" title="tulip flower" />或<img src="/i/eg_tulip.jpg" title="flower"/>，但[title~=flow]则不能选中，因为在这两个元素的的title属性中虽包含"flow"这个字符串，却不包含“flower”这个词。另外，[style~="#ff00ff"]是无效的，该选择器可能只适用于设置为文字性内容的属性。

5.13 属性值以词开头选择器[attrubit|=value]

选中某属性以某词开头的元素，如[lang|=en]可选中 <p lang="en">Hello</p>或<p lang="en-us">Hello</p>。但不能选中<p lang="ena">Hello</p>或<p lang="en us">Hello</p>，value必须是一个完整的词。

5.14 属性值以串开头选择器[attribute^=value]

选中属性值以某几个字符开头的元素，这些字符不必是一个完整的词。

5.15 属性值以串结尾选择器[attribute$=value]

属性值以某几个字符结尾，不必是一个词。

5.16 属性值包含串选择器[attribute*=value]

属性值包含某几个字符结尾，不必是一个词。

5.17 :nth-child(n)选择器

:nth-child(n) 选择器匹配属于其父元素的第n 个子元素，不论元素的类型。最高级别的父元素为body， n除了可以用数字表示外，还可以用odd（奇数）或even（偶数）表示，也可以用带n的表达式表示，如4n+1表示第5，9，13等元素。

如：p:nth-child(1),表示，类型为p,且为父元素的第1个子元素。

<style>

p:nth-child(1)

{

color:#ffff00;

background-corlor:#ff0000;

}

</style>

...

<body>

<div>

<p>我是，我是父元素的第一个p元素。</p>

<p>我不是,因为我不是父元素的第一个p元素。</>

</div>

<div>

<h3>我不是，因为我不是p元素，我是h3元素</h3>

<p>我不是，因为我不是父元素的第一个子元素，第一个子元素是h3元素</p>

<div>

</body>

结果如下：

把上例的p:nth-child(1)改为nth-child(1),则结果如下：

很奇怪，第二行的底色也变成了红色，其实不是第二行的底色变成了红色，而是第一行和第二行所共有的div元素作为body的第一个子元素，所以其底色变红，就造成了第二行的底色变成了红色错觉。

个人理解什么是nth,nth就是第n个，就是序数，在英语中th表序数，除了第1、2、3以外，其他序数都是以th结尾的，比如fourth、fifth、sixth、tenth等。所以:nth-child(n)就是第n个子元素。

5.18 :nth-of-type()选择器

在任一层级中同类型元素中的的第n个元素(包括body元素)。

分析如下代码：

<!DOCTYPE html>

<html>

<head>

<style>

:nth-of-type(1)

{

background:#ff0000;

}

:nth-of-type(2)

{

background:#ffff00;

}

</style>

</head>

<body >

<div>

<p>第一区第一个段落。</p>

<p>第一区第二个段落。</p>

<p>第一区第三个段落。</p>

</div>

<div>

<p>第二区第一个段落。</p>

<p>第二区第二个段落。</p>

<p>第二区第三个段落。</p>

</div>

</body>

</html>

代码定义了两个CSS规则，第一个规定在任一层级中同类型元素中的第一个元素的背景色为红，为方便描述，称为规则一，第二个规则规定了在任一层级中同类型元素中的第二个元素的背景色为黄，称之为规则二。

先看第一层，由于body元素是该层级中的第一个body类型元素，符合规则一，所以body的背景色将为红色，background-color 不能继承，body元素内的所有没有定义背景色属性的子元素的背景色属性都将取默认值即transparent（透明）。

再来第二层，有两个div元素，其中的第一个div符合规则一，故其背景色为红色，而第二个div符合规则二，所以第二个div元素的背景色为黄色。

再来看第三层，第一个div中的第一个p元素符合规则一，故其背景色为红色，第二个p元素符合规则二，故其背景色为黄色，第三个p元素既不符合规则一，也不符合规则二，故取默认值透明。第二个div中的第一个p元素符合规则一，故背景色为红色，第二个p元素符合规则二，故其背景色为黄色，第三个p元素既不符合规则一，也不符合规则二，故取默认值透明。实际显示如下图所示：

阅读全文

0 0