CSS定义选择器

  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:[email protected]

    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来控制布局.

时间: 2024-10-20 14:24:03

CSS定义选择器的相关文章

20, CSS 定义选择器

1. ID 与类 2. 层叠 3. 分组 4. 继承 5. 上下文选择器 6. 子类选择器 7. 其他选择器 8. 结构与注释 20.1 ID 与类 选择器是用于控制页面设计的样式.即 ID 选择器何类选择器. 一直以来,许多开发人员经常将 ID 与类混淆,或者不能正确的使用这两种选择器,或者简 单的认为是一个代替另一个.这种认知是及其错误的. (1). 应用 ID 每个 ID 在一个页面中只能使用一次,作为某个元素的唯一标识符 . 一般情况下,ID 只 用于页面的唯一元素,如页眉,主导航条 ,

[2016-01-16][CSS][定义样式表(样式选择器)]

Class 定义:.classname{ 属性:属性值;} 使用:<p class = "classname"></p> ID 定义: #IDNUM{ 属性:属性值; } 使用:<p id = "IDNUM"></p> 组合选择器 定义:标记1,标记2...标记n{属性:属性值;} 使用:直接正常使用上面存在标记即可 伪选择器 calss的使用 ID的使用 组合选择器h1 h2 h3 伪选择器 1 2 3 4 5 6

CSS学习(八)——定义选择器

ID定义型与class定义型排版样式 (1) 对于ID定义型,每个ID在页面中只能用一次.尽管一个ID在页面内多次使用也能实现效果,但是这样写不规范.如果同一个样式页面内多次使用,应该用class定义型. (2) ID可与标记定义型结合使用,例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio

浅谈css中选择器的优先级

学习web前端,主要学习的课程html5,css,js,ajax等一些基本的编程语言,当然这是一门高深的学问.而这篇文章主要是谈谈我对css中选择器优先级的一些简单的理解与看法,希望对您的学习提供一些帮助.好了,废话不多说了,让我们开始进入主题吧. css中文解释是“层叠式样式表”,在这里我要说一下,所谓层叠样式表的意思就是说我们可以给一个标签或者文本内容同时添加许多种样式,简单点说就是可以通过多种方式去支配同一个东西.那么就会出现这样的问题了——选择优先级的问题.就是谁的属性能起到控制的最终目

css:hover选择器

:hover 选择器用于选择鼠标指针浮动上面的元素. :hover选择器可以用于所有的元素,不单是链接. 提示::link选择器设置指向未被访问页面的链接的样式,:visited选择器用于设置指向已被访问的页面的链接,:active选择器用于活动链接. 注释:在CSS定义中,:hover必须位于:link和:visited之后(如果)存在的话,这样的样式才能生效.

css以及选择器基础

CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px:margin-right:10px"></p><标签名 style="属性:属性值;属性:属性值;" 属性="属性值"></标签名>内部样式表(位于 <head> 标签内部)<style type=&

CSS 包含选择器(九)

一.包含选择器 包含选择器中前后两部分之间以空格隔开,根据左侧选择符指定的祖先元素,然后在该元素下寻找匹配右侧的选择侧符的下级元素 定义包含选择器时,必须保证在HTML结构中第一个对象能够包含第二个对象. 二.简单例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&g

【css】css常用选择器

css常用选择器 * 通配选择器 选择文档中所以HTML元素 E 元素选择器  选择指定类型的HTML元素 #id ID选择器  选择指定ID属性值为"id"的任意类型元素 .class 类选择器   选择指定class属性值为"class"的任意类型的任意多个元素 selector1,selectorN 群组选择器 将每一个选择器匹配的元素集合并 E F 后代选择器(包含选择器)  选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 E>F 子选择器 选

css中选择器的使用

css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻为树干的时候,css比喻为叶子,花.那要控制这些样式,则要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器.HTML页面中的元素就是通过CSS选择器进行控制的. css的选择器可分为:1.id选择器:2.class类别选择器:3.元素选择器:4.属性选择器