一、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. 斐波那契堆的基本操作3. 斐波那契堆的C++实现(完整源码)4.  ...

  2. 斐波那契堆(三)之 Java的实现

    概要 前面分别通过C和C++实现了斐波那契堆,本章给出斐波那契堆的Java版本.还是那句老话,三种实现的原理一样,择其一了解即可. 目录1. 斐波那契堆的介绍2. 斐波那契堆的基本操作3. 斐波那契堆 ...

  3. Hadoop入门进阶课程10--HBase介绍、安装与应用案例

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博主为石山园,博客地址为 http://www.cnblogs.com/shishanyuan  ...

  4. Spring MVC全局异常处理与拦截器校检

    在使用Spring MVC进行开发时,总是要对系统异常和用户的异常行为进行处理,以提供给用户友好的提示,也可以提高系统的安全性. 拦截系统响应错误 首先是拦截系统响应错误,这个可以在web.xml中配 ...

  5. C中extern的用法

    /*********************************************************************** INPUT3.C -- Input data pars ...

  6. EncryptTransform

    internal class EncryptTransform { //private const int c_MaxLengthOf_IV_DES = 4; //private const int ...

  7. [Solution] 使用Autofac在MVC、Web API、WCF中实现IOC

    本来想聊一下面试过程的,1个星期面了6家,4家当场给offer,2家技术通过(1家没下文,1家复试).从中也学习到一些东西,先还是继续Coding吧. 官网:http://autofac.org/ 下 ...

  8. Java基础——事务

    一.事务 简单点说,事务就是一件事情.所有与事务相关的内容都是围绕这一件事情展开的. 二.事务的特性:ACID A:Atomicity(原子性),事务必须是一个不可分割的整体. C:Consisten ...

  9. Dancing Link --- 模板题 HUST 1017 - Exact cover

    1017 - Exact cover Problem's Link:   http://acm.hust.edu.cn/problem/show/1017 Mean: 给定一个由0-1组成的矩阵,是否 ...

  10. c＃ 编程语言 编译器 Roslyn

    4 月3日,微软向公众发布了Roslyn编译器项目,该项目采用了Apache开源许可协议.C#的创始人 Anders Hejlsberg在Build大会的第二场主题演讲中将这一令人震惊的消息公之于众. ...