一、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. 红黑树(四)之 C++的实现

    概要 前面分别介绍红黑树的理论知识和红黑树的C语言实现.本章是红黑树的C++实现,若读者对红黑树的理论知识不熟悉,建立先学习红黑树的理论知识,再来学习本章. 目录1. 红黑树的介绍2. 红黑树的C++ ...

  2. NoSuchMethodError: antlr.collections.AST.getLine()I

    错误完整表述: Filter execution threw an exception] with root cause java.lang.NoSuchMethodError: antlr.coll ...

  3. python内置模块(3)

    博主所有python文章均为python3.5.1环境. 目录: 1.collections 2.subprocess 3.configparser 4.XML 5.shutil 一. collect ...

  4. ASP.NET WebForm与MVC优缺点

    发表于我的个人网站中,请点击阅读!

  5. Java魔法堂：String.format详解

      目录     一.前言    二.重载方法     三.占位符     四.对字符.字符串进行格式化     五.对整数进行格式化     六.对浮点数进行格式化     七.对日期时间进行格式化 ...

  6. Qt Style Sheet实践（三）：QCheckBox和QRadioButton

    导读 单选按钮(QRadioButton)和复选框(QCheckBox)是界面设计中的重要元素.单选按钮只允许用户在一组选项中选择一个,且当其中一个被选中的时候,按钮组中的其他单选按钮自动取消.复选框 ...

  7. Node.js下基于Express + Socket.io 搭建一个基本的在线聊天室

    一.聊天室简单介绍 采用nodeJS设计,基于express框架,使用WebSocket编程之 socket.io机制.聊天室增加了 注册登录模块 ,并将用户个人信息和聊天记录存入数据库. 数据库采用 ...

  8. 2015百度之星 IP聚合

    IP聚合 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Problem Descri ...

  9. Linq专题之创建Linq查询表达式

    本节我们主要介绍一下如何创建查询集合类型,关系数据库类型,DataSet对象类型和XML类型的数据源的Linq查询表达式. 下面在实例代码ReadyCollectionData()函数创建了准备的数据 ...

  10. js获取浏览器当前窗口的高度长度

    js获取浏览器可见区域(不包括标题栏.地址栏.收藏夹栏状态栏等额外区域,仅为页面呈现区域)的高度和宽度宽度:document.documentElement.clientWidth高度:documen ...