CSS 选择器

最新推荐文章于 2021-03-20 05:32:40 发布

ankyhe

最新推荐文章于 2021-03-20 05:32:40 发布

阅读量117

点赞数

分类专栏：技术_网页设计_CSS 文章标签： CSS 浏览器 HTML Firefox JavaScript ViewUI

技术_网页设计_CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS 选择器，就是说CSS里面所有Style的内容对哪些模块起作用，譬如如果我们简单的写：p {color: red}，那么对所有的<p>都会起作用。很多时候，这么简单的用法不能满足网页设计的需求，于是很多中选择器就产生了。

1. tag选择器

这个没什么特别好说的，就如同前面说的，h1{font-size: 4em}，这种一次性对所有某个tag都起作用的选择器

2. class选择器

这个可以理解为一种分类选择器。不同种类的tag可以有相同的class，那么他们的外观会一样；相同的tag可以有不同的class，他们的外观会不同。例如

.note {

font-size: .85em;

color:#294e56;

margin: 0 100px;

padding: 10px;

border: 1px solid #73afb7;

background-color: #fbef99;

}

注意那个小点。

使用的时候，可以简单的说<p class="note">, <h2 class="note">这样就OK了。

3. id选择器

id选择器主要是为了唯一的表示网页中某部分内容，一般情况下是为了和Javascript一起使用。

#wrapper {

width:680px;

margin: 0 auto;

padding: 0 20px;

border-left: 1px solid #666666;

border-right: 1px solid #666666;

}

使用的时候，可以简单的说<div id="wrapper">这样就OK了。

4. 组选择器

这个很好理解，说白了就是对一组选择器指定样式，譬如

h1, p, .copyright, #banner { color: #F1CD33; }

还一种更好玩，就是*通配所有的tag

5. 层次选择器

这个稍微复杂一些，首先你要理解HTML的层次结构。譬如下面这段HTML代码

<html>
    <head>
        <title>示例</title>
    </head>
    <body>
        <h1><strong>CSS</strong>使用手册</h1>
        <p>这本书讲得是<strong>CSS</strong>的......
    </body>
</html>

那么html这个tag就是head的父亲或者先祖tag，也是body的父亲或者先祖。同理，body和head是html的儿子或者是后代。title只是html的后代，而不是儿子；html只是tag的先祖而不是父亲。head和body是兄弟。

有了这个基础，下面的就好理解了。

如果我们仅仅是想把h1里面的strong的内容变成红色，而其他的strong里面的我保持默认的方法。那么我就可以定义如下的选择器：

h1 strong {color: red}

当然这个可以更复杂一些，譬如：

p.intro strong {color: red} 可以使嵌于tag p并且这个p的class是intro的strong变成红色。

6. 高级选择器

这些选择器一般的情况可能不会用，而且有些浏览器可能不支持^_^

a:link a:visited a:hover a:active

p:hover div:hover (-IE6)

:before

:after

:first-child

:focus

后四种的支持度现在我还没有弄清楚，顺便再强调一下，平时我用Mac+Safari4或者是Windows+IE7（我不喜欢 Firefox是因为他的理念是用内存换速度，我不喜欢）。

h1 > strong 儿子选择器

h1 + table 兄弟选择器

a[href="http://www.cosmofarmer.com"]{ color:red; font-weight:bold; } 属性选择器

ankyhe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 选择器

CSS 选择器，就是说CSS里面所有Style的内容对哪些模块起作用，譬如如果我们简单的写：p {color: red}，那么对所有的&lt;p&gt;都会起作用。很多时候，这么简单的用法不能满足网页设计的需求，于是很多中选择器就产生了。 1. tag选择器这个没什么特别好说的，就如同前面说的，h1{font-size: 4em}，这种一次性对所有某个tag都起作用的选择器 2. c...
复制链接

扫一扫

专栏目录