1. ID与类
  2. 层叠
  3. 分组
  4. 继承
  5. 上下文选择器
  6. 子类选择器
  7. 其他选择器
  8. 结构与注释

    20.1 ID与类

    选择器是用于控制页面设计的样式.即ID选择器何类选择器.

    一直以来,许多开发人员经常将ID与类混淆,或者不能正确的使用这两种选择器,或者简单的认为是一个代替另一个.这种认知是及其错误的.

    (1).应用ID

    每个ID在一个页面中只能使用一次,作为某个元素的唯一标识符.一般情况下,ID只用于页面的唯一元素,如页眉,主导航条,布局区块等.

    示例:<p id="hightlight">This paragraph has red text.</p>

    相应的CSS代码:

    #hightlight{

    color:#FFFFFF;

    }

    (2).将ID与选择器结合

    /*适合所有h2标题*/

    h2{

    color:#333;

    font-size:16px;

    }

    /*只适合title的h2标题*/

    h2#title {

    color:#eee;

    }

    相应的XHTML代码:<h2>Title Of My Article</h2>

    <h2 id="title">Title Of My Article</h2>

    (3).ID的使用场合

    对于每个ID,每个页面只能有一个元素使用该样式,因此ID应该为每个页面唯一存在并仅使用一次的元素不保留,

    (4).避免使用ID的场合

    当一个以上的地方需要使用同一CSS规则时,不应该使用ID.

    (5).应用类

    类可以无限次的使用,因此它是应用CSS的非常灵活的方法.

    <p class="hightlight">his paragraph has red text.</p>

    相关CSS代码:

    .hightlight {

    color:FFFFFF;

    }

    (6).结合多个类和ID

    范例:

    <ul id="drinks">

    <li class="mix">Beer</li>

    <li class="mix">Spirtis</li>

    <li class="hot">Cola</li>

    <li class="hot">Lemonade</li>

    </ul>

    相应的CSS代码:

    ul#drinks {

    color:FF6600;

    }

    .mix {

    Color:#999999;

    }

    .hot {

    Color:#333333;

    }

    (7).利用类改写基本样式:

    p{

    Color:#ff6600;

    }

    .bleached {

    Color:#ccc;

    }

    相应的XHTML代码:

    <p>This paragraph has red text.</p>

    <p class="bleached">This paragraph has red text.</p>

    (8).直接将类链接到元素上

    p.bleached {

    color:red;

    }

    相应的XHTML代码:

    <p class="bleached">This paragraph has red text.</p>

    (9).避免,适合

    对于class,如果多次重复使用或者使用子类选择器,那么就选择class,如果是定义唯一性的标记,比如布局,那么用id。

    20.2 层叠

    (1).外部链接实现层叠

    <link rel="stylesheet" type="text/css" href="css/one.css">

    <link rel="stylesheet" type="text/css" href="css/two.css">

    <link rel="stylesheet" type="text/css" href="css/three.css">

    (2).导入样式实现层叠

    @import url("one.css")

    @import url("two.css")

    @import url("three.css")

    注意点:必须牢记一个规则,越晚给的规则越重要.

    20.3 分组

    h1{

    Font-family:隶书,宋体,楷体;

    Line-height: 140%;

    Color:#333;

    }

    h2{

    Font-family:隶书,宋体,楷体;

    Line-height: 140%;

    Color:#333;

    }

    h3{

    Font-family:隶书,宋体,楷体;

    Line-height: 140%;

    Color:#333;

    }

    /*分组后*/

    h1,h2,h3{

    Font-family:隶书,宋体,楷体;

    Line-height: 140%;

    Color:#333;

    }

    /*分组例外*/

    h1{

    Font-style:italic;

    }

    20.4 继承

    h1 {

    Color:#333;

    }

    <h1>This is the greatest heading <i>in the world</i></h1>

    从BODY继承

    Body {

    Margin:10px;

    Font-family:隶书;

    Background:#000;

    Color:#fff;

    }

    20.5 上下文选择器

    h1{

    Color: #ccc;

    }

    i {

    Color:#000;

    }

    /*使用上下文选择器*/

    h1 I {

    Color:#000;

    }

    20.6 子类选择器

    .box {

    color:red;

    }

    .box1 {

    font-weight:bold;

    }

    .box2 {

    font-style:italic;

    }

    <div class="box">Box</div>

    <div class="box box1">Box1</div>

    <div class="box box2">Box2</div>

    20.7 其他选择器

    (1).类型选择器

    p{color:black;}

    a{text-decoration:underline;}

    h1{font-weight:bold;}

    (2).后代选择器

    h2 i{

    color:red;

    }

    li a{

    text-decoration:none;

    }

    #main h1{

    Color:red;

    }

    (3).伪类

    a:link{color:blue;}

    a:visited{color:green;}

    a:hover,a:active{color:red;}

    input:focus{background-color:yellow;}

    (4).通用选择器

    *{

    Padding:0;

    Margin:0;

    }

    (5).高级选择器

    高级选择器,目前支持还不太完善,所以,对于站点功能很重要的任何元素上,应该避免使用这些高级选择器.

    1.子选择器和相邻同胞选择器

    子选择器(只有其儿子才有效果,孙子没有效果)

    #nav > li {background:url(bg.gif) no-repeat left top;}

    <ul id="nav">

    <li>Home</li>

    <li>Server

    <ul>

    <li>Development</li>

    <li>Consultancy</li>

    </ul>

    </li>

    <li>Contact Us</li>

    </ul>

    相邻同胞选择器:

    h1+p{font-weight:bold;}

    <h1>Main Heading</h1>

    <p>First Paragraph</p>

    <p>Second Paragraph</p>

    2.属性选择器

    <strong title="Cascading Style Sheets">CSS</strong>

    strong[title] {border-bottom: 1px dotted #999;}

    strong[title]:hover {cursor:help;background:#ccc}

    20.8 代码注释与结构

    /*body styles*/

    body {

    Font-size:67.5%;

    }

    1.添加结构性注释

    /*---------------------------------------------------

    Version: 1.1

    Author: andy budd

    Email:info@andybudd.com

    Website:http:www.andybudd.com

    -----------------------------------------------------*/

    2.自我提示

    /*

    Use the star selector hack to give IE a different font size

    http://www.info.co.ph

    */

    布局结构:使用有意义的标记。

    表格成了一种布局工具而不是显示数据的方式,人们使用块引用(blockquote)来添加空白而不是表示引用.Web很快就失去了意义,成了字体和表格标签的大杂烩.而现在我们可以使用DIV+CSS来控制布局.

CSS定义选择器的更多相关文章

  1. 20, CSS 定义选择器

    1. ID 与类 2. 层叠 3. 分组 4. 继承 5. 上下文选择器 6. 子类选择器 7. 其他选择器 8. 结构与注释 20.1 ID 与类 选择器是用于控制页面设计的样式.即 ID 选择器何 ...

  2. 用Less CSS定义常用的CSS3效果函数

    定义圆角及调用 /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @ ...

  3. CSS 后代选择器

    后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...

  4. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  5. css中选择器的使用

    css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...

  6. CSS 派生选择器

    派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...

  7. CSS id 选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...

  8. CSS 包含选择器(九)

    一.包含选择器 包含选择器中前后两部分之间以空格隔开,根据左侧选择符指定的祖先元素,然后在该元素下寻找匹配右侧的选择侧符的下级元素 定义包含选择器时,必须保证在HTML结构中第一个对象能够包含第二个对 ...

  9. CSS样式选择器

    <!-- css样式选择器 HTML选择器 类选择器 ID选择器 关联选择器 组合选择器 伪元素选择器 selector{ /* selector是样式选择器 property:value; / ...

随机推荐

  1. PLS-00215:字符串长度限制在范围

    在Oracle中有一张people表 创建跟新表的存储过程 修改定义字段长度 总结:在Oracle中执行存储过程时,输出参数的长度要与原表中字段长度一致!

  2. 102. Binary Tree Level Order Traversal

    题目: Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to ri ...

  3. 数据备份--dump

    数据中 心操作大量的数据.当遭到破坏时,这就是一场灾难.这时候需要备份来恢复,及时你又大量的备份数据都没用,备份也肯定不是在浪费时间.你也许很幸运从 来没有经历过数据丢失.但是, 由于这种事情极少发生 ...

  4. Redis文档

    http://manual.csser.com/redis/connection/auth.html

  5. poj2823

    这是一道题意简单,数据较大的题(喜闻乐见): 一开始可能会想到RMQ问题,ST,线段树都是O(nlogn),应该勉强能过(没试过): 由于这道题区间是滚动连续的,所以,可以使用单调队列! 以最小值为例 ...

  6. 重装sql server2008数据库安装不上原因

    因为注册表已经存在了sql server的信息,所以重新安装时需要删除注册表的一些信息 打开注册表:regedit 删除 HKEY_LOCAL_MACHINE\system/CurrentContro ...

  7. Apache HTTP Server多个拒绝服务漏洞

    漏洞版本: Apache Group Apache HTTP Server < 2.4.9 漏洞描述: BUGTRAQ ID: 66303 CVE ID: CVE-2013-6438,CVE-2 ...

  8. ZJOI2010网络扩容

    无限orz hzwer神牛…… 第一问很简单,按数据建图,然后一遍最大流算法即可.     第二问则需要用最小费用最大流算法,主要是建图,那么可以从第一问的残留网络上继续建图,对残留网络上的每一条边建 ...

  9. MySQL索引的查看创建和删除

    1.索引作用 在索引列上,除了上面提到的有序查找之外,数据库利用各种各样的快速定位技术,能够大大提高查询效率.特别是当数据量非常大,查询涉及多个表时,使用索引往往能使查询速度加快成千上万倍. 例如,有 ...

  10. CDN-内容推送网络

    前段时间介绍了浏览器缓存机制,通过浏览器缓存一方面可以改善用户的体验,而不用漫长地等待从服务器下载资源:另一方面减轻服务器压力.节省流量.CDN是另一种可以大幅度优化用户体验,且减轻服务器压力的技术. ...