一、ID选择器

ID选择器使用"#"前缀标识符进行标识，后面紧跟指定的元素的ID名称。

如

#box{ width:100px; height:100px;}

元素的ID名称是唯一的，只能对应于文档中一个具体的元素。在HTML中，用来构建整体框架的标签应该定义ID属性，因为这此对象一般在页面中都是比较唯一的，固定的，不会重复，如Logo包含框，导航条，主体包含框，版权区域等。

二、ID设置页面布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

<title>测试ID</title>

</head>

<body>

<div id="header"><!--头部模块-->

    <div id="logo"></div><!--网站logo-->

    <div id="banner"></div><!--广告条-->

    <div id="nav"></div><!--导航条-->

</div>

<div id="main"><!--主体模块-->

<div id="left"></div><!--左侧通栏-->

<div id="content"></div><!--内容-->

</div>

<div id="footer"><!--底部模块-->

<div id="copyright"></div><!--版权信息-->

</div>

</body>

</html>
@charset "utf-8";

/* CSS Document */

#header{

    margin:0 auto;

    width:960px;

    height:210px;

    border:solid 1px #000000;

}

#logo{

    width:100px;

    height:100px;

    border:solid 1px #000000;

    float:left;

}

#banner{

    margin-left:30px;

    float:left;

    width:800px;

    height:100px;

    border:solid 1px #000000;

}

#nav{

    clear:both;

    margin:0 auto;

    width:800px;

    height:100px;

    border:solid 1px #000000;

}

三、外部ID内部class属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

<title>ID选择器</title>

</head>

<body>

<div id="father">

<div class="child1"></div>

<div class="child2"></div>

<div class="child3"></div>

</div>

</body>

</html>
@charset "utf-8";

/* CSS Document */

/* 父级样式*/

#father{

    width:500px;

    height:500px;

    border:solid 2px blue;

    margin:5px;

}

/* 通过父级样式设置父级样式下的标签div模式*/

#father div{

    width:100px;

    height:100px;

    border:solid 1px red;

    padding:10px;

    margin:10px;

    background-color:#0000FF;

}

/* 通过父级样式设置父级样式下的类*/

#father .child1{

    width:100px;

    height:100px;

    margin:20px;

    padding:10px;

    border:solid 5px #FF00FF;

    background-color:#66FF00;

}

/* 通过父级样式设置父级样式下的类*/

#father .child2{

    width:100px;

    height:100px;

    margin:10px;

    padding:10px;

    border:solid 5px #00FF00;

    background-color:#FF0000;

}

/*这里直接设置类样式不起作用因为上面通过#father div已经设置过了，这里的类选择器优先级小于标签选择器*/

.child3{

    width:100px;

    height:100px;

    margin:10px;

    padding:10px;

    border:solid 10px #0000FF;

    background-color:#FF00FF;

}

CSS ID选择器(三)的更多相关文章

  1. CSS id 选择器

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

  2. CSS ID选择器&通配选择器

    ID选择器 ID(IDentity)是编号的意思,一般指定标签在HTML文档中的唯一编号.ID选择器和标签选择器.类选择器的作用范围不同. ID选择器仅仅定义一个对下对象的样式,而标签选择器和类选择器 ...

  3. CSS 类选择器

    在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中, ...

  4. Android程序员学WEB前端(6)-CSS(1)-选择器-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576469 觉得博文有用,请点赞,请评论,请关注,谢谢!~ CSS外部文档链接: & ...

  5. CSS基础（三）：选择器

    常用选择器 元素选择器,即html标记如div,ul,li,p,h1~h6,table等. p { font-size:14px; } h1 { color:#F00; } 复合选择器, 由两个选择器 ...

  6. CSS类选择器和ID选择器

    CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...

  7. CSS中的选择器之类选择器和id选择器

    1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...

  8. CSS【03】：CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

  9. css样式——选择器（三）

    https://www.cnblogs.com/haiyan123/p/7552235.html 1.怎么找到标签 2.如何操作标签的对象 一.css概述 CSS是Cascading Style Sh ...

随机推荐

  1. Elasticsearch及java客户端jest使用

    本文使用Github中的Elasticsearch-rtf,已经集成了众多的插件,例如必须使用的中文分词等,可以简单的通过配置来启用中文分词.本文主要分为以下几部分: 1.配置和启用中文分词: 2.定 ...

  2. excel导入记录

    use DangJianSELECT vale1, value2 into Table2 from Table1 select COUNT(*) from tmpdangyuan where 手机号 ...

  3. css中filter:alpha透明度使用

    css中filter:alpha透明度使用    使用filter可以设置透明度,filter:alpha在IE下是没有问题的,要支持firefox就需要使用-moz-opacity,下面有个不错的示 ...

  4. MvvmLight框架使用入门（一）

    MvvmLight是比较流行的MVVM框架,相对较为简单易用.可能正因为简单,对应的帮助文档不多,对初学者就不够友好了.这里会用几篇随笔,就个人对MvvmLight的使用经验,来做一个入门的介绍. 第 ...

  5. 在Asp.Net MVC中使用ModelBinding构造Array、List、Collection以及Dictionary

    在asp.net mvc中,我们可以在html表单中使用特定的格式传递参数,从而通过model binder构造一些集合类型. 第一种方式 public ActionResult Infancy(Pe ...

  6. [JS] JavaScript框架(2) D3

    D3(Data-Driven Documents)是一个用于网页作图.生成互动图形的JavaScript函数库. 官网:http://d3js.org/ 下载: cdn:<script src= ...

  7. Sprint第三个冲刺（第五天）

    一.Sprint介绍 实验截图: 任务进度: 二.Sprint周期 看板: 燃尽图:

  8. Dancing Link 详解(转载)

    Dancing Link详解: http://www.cnblogs.com/grenet/p/3145800.html Dancing Link求解数独: http://www.cnblogs.co ...

  9. c++转C#

    //c++:HANDLE(void   *)          ----    c#:System.IntPtr        //c++:Byte(unsigned   char)     ---- ...

  10. ASP.NET几种页面数据绑定的用法及区别: <%#、 <%=、 <% 、<%@

    < %#... %>: 是在绑定控件DataBind()方法执行时被执行,用于数据绑定 如: < %# Container.DataItem("tit") %&g ...