一、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. codeforces A. Bayan Bus(简单模拟)

    #include <queue> #include <string> #include <cstdio> #include <cstring> #inc ...

  2. react native下android开发环境搭建

    关于react native环境搭建我也是参考这篇文章的,但我这里就出现了很多在这篇文章里没有出现的问题,也是坑比较多.但最后在一位大神的帮助下还是成功运行了. 1.第一个坑就是有些文件下载需要VPN ...

  3. NOP登录验证管理

    截取Nop登录代码如下: 其实 public ActionResult Login(LoginModel model, string returnUrl, bool captchaValid) { / ...

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

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

  5. jquery获取url参数

    js/jquery 获取url参数 2010年04月27日 星期二 13:45 js代码: function GetQueryString(name) { var reg = new RegExp(& ...

  6. .Net魔法堂：log4net详解

    一.作用 提供一个记录日志的框架,可以将日志信息记录到文件.控制台.Windows事件日志和数据库(MSSQL.Acess.Oracle.DB2和SQLite等). 二.先看看示例,感受一下吧   c ...

  7. sprint3（第四天）

    今天继续完成前台和后台的整合 燃尽图:

  8. PowerDesigner的安装和数据库创建(转载)

    此文描述详细,特此转载,仅复制了大部分内容,可参考原文CodeSmith和PowerDesigner的安装和数据库创建(原创) 请大家不要用于商业用途哈,要支持正版,大家都是做软件的,知道开发一套软件 ...

  9. 统一者管理员指南（Unifier Administration Guide）中文

    统一者管理员指南 Unifier Administration Guide 2014年6月 发布 2014年11月翻译 10.0版本 10.0.1译 关于译者 翻译者QQ:77811970 Email ...

  10. EF工作中踩过的坑.

    1.EF同一个linq里边不支持两个或两个以上不同dbcontext的使用,必须拆解开才能使用; ef也不支持自定义集合和dbcontext属性的混合使用. 2.如果要用用统一域账号连接databas ...