`
阅读更多

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; } 属性选择器

 

 

 

分享到:
评论

相关推荐

    react-React组件的css选择器

    React组件的css选择器

    CSS选择器-.pdf

    CSS选择器-.pdf

    CSS选择器.txt

    css选择器里面有css的几十种选择、获取、什么都有.

    css选择器的应用

    各类css选择器的应用及代码效果展示,字体属性和文本属性的应用。

    CSS选择器的介绍和使用.pdf

    CSS选择器的介绍和使用,什么是CSS选择器?CSS选择器可以用于我们需要添加的样式的标签。想要在HTMLl页面中的元素实现一对一,一对多或者多对一的控制,就得要使用css选择器,css选择器进控制着HTML页面中的元素。

    css选择器的讲解.pdf

    讲解了css选择器的要点和应用,分别写出了在什么场景用什么选择器,每个选择都有他自己书写规范和应用。

    scrapy爬虫之CSS选择器(比前面两个更全)

    一个使用css选择器的完整爬虫工程,比本人前面两个相应资料更完整,与博文同步分享。

    前端必须掌握的css选择器方法

    前端必须掌握的css选择器方法

    css选择器apolo

    * css选择器 * 冒泡原理 * 如果后面的表达式无效,只返回有效表达式匹配的结果 * author chenyipeng * e-mail: yia0223@gmail.com * ps: 如有bug请多多包涵 * 参考: jquery css选择器 * 目前实现 * #id ...

    CSS选择器Q.js.zip

    div h1~div: 应返回一个节点,但是Sizzle没有找到节点另外div.querySelectorAll("body *")会返回节点所以在以元素为context的查询中不使用querySelectorAll进行优化3, 性能将选择器编译成函数再进行查询,除了第一次...

    jQuery 遍历css选择器

    jQuery 遍历css选择器 学习

    JSoup CSS选择器用法大全

    备查,搞爬虫开发者必备

    CSS选择器笔记

    CSS选择器笔记

    30个最常用css选择器解析

    30个最常用css选择器解析 CSS

    css选择器.xmind

    脑图形式的css选择器和层叠规则整理,包括css选择器的类型以及css层叠规则的影响因素(重要性、来源、特殊性、顺序等等),属于前端基础技术的资源

    详解CSS选择器HTML标签

    详解CSS选择器标签HTML 选择器 类别CLASS 选择器

    python爬虫之css选择器

    python爬虫 css提取网页内容的详细方法,有助于新手可以轻松上手,内容简单易懂,轻松掌握css的使用

    CSS选择器-xmind

    CSS选择器 xmind - 选择器分类(ID选择器,类选择器,标签选择器,通配选择器,属性选择器,伪类选择器)。 - 选择器关系(分组,后代,子元素,相邻兄弟,后续兄弟)。 - CSS特性(优先级,继承,层叠)。

Global site tag (gtag.js) - Google Analytics