css选择器
2013-12-13 14:08
197 查看
1、元素选择器
最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器html {color:black;} h1 {color:blue;} h2 {color:silver;}
在 W3C 标准中,元素选择器又称为类型选择器(type selector)
2、组选择器
h1,h2,h3,h4,h5,h6{
color: green;
}[/code]
3、类选择器
类选择器允许以一种独立于文档元素的方式来指定样式,该选择器可以单独使用,也可以与其他元素结合使用。.important {color:red;}
结合元素选择器,类选择器可以结合元素选择器来使用。
例如,您可能希望只有段落显示为红色文本:
p.important {color:red;}
多类选择器
我们假设
class 为 important 的所有元素都是粗体,而 class 为 warning 的所有元素为斜体,class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 ,就可以写作:
.important {font-weight:bold;} .warning {font-style:italic;} [code].important.warning {background:silver;}
4、ID选择器
在某些方面,ID选择器类似于类选择器,不过也有一些重要差别;
首先,ID
选择器前面有一个 # 号 - 也称为棋盘号或井号
#intro {font-weight:bold;}
第二个区别是
ID 选择器不引用 class 属性的值,毫无疑问,它要引用 id 属性中的值
<p id="intro">This is a paragraph of introduction.</p>
ID选择器还是类选择器
区别 1:只能在文档中使用一次
与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。
区别 2:不能使用 ID 词列表
不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。
区别 3:ID 能包含更多含义
类似于类,可以独立于元素来选择 ID。有些情况下,您知道文档中会出现某个特定 ID 值,但是并不知道它会出现在哪个元素上,所以您想声明独立的 ID 选择器。例如,您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容,它可能在任何元素中,而且只能出现一个。在这种情况下,可以编写如下规则:#mostImportant {color:red; background:yellow;}
5、派生选择器,也称后代选择器
li strong{
font-style: italic;
font-weight: normal;
}[/code]
这里strong元素表示的是所有的li的strong,而不管嵌套程度有多深。
6、子元素选择器
如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)h1 > strong {color:red;}
结合后代选择器和子选择器
table.company td > p
7、相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器h1 + p {margin-top:50px;}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。
结合其他选择器
html > body table + ul {margin-top:20px;}
8、属性选择器
简单属性选择器*[title] { color:red; } a[href] { color:red; }
还可以根据多个属性进行选择,只需将属性选择器链接在一起即可,例如,为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:
a[href][titile] { color:red; }
为xml元素使用属性元素选择器
属性选择器在 XML 文档中相当有用,因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。
假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素,使之显示为红色,以便能更关注有 moons 的行星,就可以这样写:
planet[moons] { color:red; }
这会让以下标记片段中的第二个和第三个元素的文本显示为红色,但第一个元素的文本不是红色:
<planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet>
根据具体属性值选择
a[href="http://www.w3school.com.cn/about_us.asp"] { color:red; }
根据部分属性值选择
p[class~="important"] { color:red; }
字串匹配属性选择器:
[abc^="def"]:选择abc属性值以"def"开头的所有元素
[abc$="def"]:选择abc属性值以"def"结尾的所有元素
[abc*="def"]:选择abc属性值包含"def"的所有元素
特定属性选择器:
假设一个 HTML 文档中有一系列图片,其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像:
img[src|="figure"] { border:1px solid gray; }
9、伪类
伪类的语法:selector:psedu-class{property:value}
CSS 类也可与伪类搭配使用
selector.class : psedu-class { property:value}
锚伪类:
a:link { color:#f00; } a:visited { color:#0f0; } a:hover { color:#f0f; } a:active { color:#00f; }
伪类和css类:
a.red:visited { color:#f00; }
:first-child伪类:
您可以使用 :first-child 伪类来选择元素的第一个子元素。
<div> [code]<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</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>[/code]
在上面的例子中,作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。
给定以下规则:
p:first-child { font-weight:bold; } li:first-child { text-transform:uppercase; }
第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素(在 HTML 中,这肯定是 ol 或 ul 元素)第一个子元素的所有 li 元素变成大写。
提示:最常见的错误是认为
p:first-child 之类的选择器会选择 p 元素的第一个子元素。
在下面的例子中,选择器匹配所有
<p> 元素中的第一个 <i> 元素
p > i : first-child { font-weight:bold; }
lang伪类:
:lang
伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中,:lang 类为属性值为 no 的 q 元素定义引号的类型:
<html> <head> <style type="text/css"> [code]q:lang(no) { quotes: "~" "~" }
</style>
</head>
<body>
<p>文字<q
lang="no">段落中的引用的文字</q>文字</p>
</body></html>[/code]
相关文章推荐
- 教程:设计中最常用的五类CSS选择器
- 目前最全的浏览器/CSS选择器兼容性总结(包括Safari 4 beta)
- 驯服CSS选择器
- 微软官网给出CSS选择器支持列表
- CSS选择器
- CSS选择器笔记
- CSS选择器
- CSS选择器的命名规范
- 30个最常用CSS选择器解析
- css3学习 之 css选择器(结构性伪类选择器)
- css选择器
- CSS选择器(下)——高级选择器再续
- 转:CSS选择器笔记
- [译]XPath和CSS选择器
- 30个你必须记住的css选择器
- 基本CSS选择器,复合选择器,后代选择器
- 详解CSS选择器、优先级与匹配原理
- css选择器优先级
- CSS选择器
- CSS第一讲 CSS发展史与CSS选择器