一、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. 队列的图文解析 和 对应3种语言的实现(C/C++/Java)

    概要 本章和介绍"栈"时的流程一样,先对队列进行介绍,然后分别给出队列的C.C++和Java三种语言的实现.内容包括:1. 队列的介绍2. 队列的C实现3. 队列的C++实现4.  ...

  2. Tips7:Unity中 Scene视图 和 Game视图 中 视角(Camera)的控制

    选中你要改变的相机,然后点击GameObject-->Align With View 选项(快捷键Ctrl+Shift+F)使相机视角和当前Sence视图中一样 通过这样可以控制在Game视图( ...

  3. 解决两台centos虚拟机Telnet服务无法联机的问题

    关闭防火墙 [root@localhost ~]# service iptables stopiptables: Flushing firewall rules:                    ...

  4. HTML简明教程（一）

    HTML简明教程(一) 内容主体来自:W3School 一.HTML 简介 二.HTML 基础 三.HTML 元素 四.HTML 属性 五.HTML 标题 六.HTML 段落 七.HTML 文本格式化 ...

  5. python内置模块(1)

    Python的模块在其它语言中通常称为库或类库,也就是lib.它是编程语言的第三级封装,第四级则是包,也就是模块的打包组合,而前两级分别是函数和类.封装的好处,自然不用多言,高内聚,松耦合,减少代码重 ...

  6. Lambda表达式和匿名内部类(I)

    本文git地址 前言 Java Labmda表达式的一个重要用法是简化某些匿名内部类(Anonymous Classes)的写法.实际上Lambda表达式并不仅仅是匿名内部类的语法糖,JVM内部是通过 ...

  7. SpringMVC基础——一个简单的例子

    一.导入 jar 包 二.配置 web.xml 文件 <servlet> <servlet-name>dispatcherServlet</servlet-name> ...

  8. 领域驱动设计(DDD)实现之路

    2004年,当Eric Evans的那本<领域驱动设计——软件核心复杂性应对之道>(后文简称<领域驱动设计>)出版时,我还在念高中,接触到领域驱动设计(DDD)已经是8年后的事 ...

  9. Unity实现滑页效果（UGUI）

    简介 项目需要...直接展示效果吧: 原理 使用UGUI提供的ScrollRect和ScrollBar组件实现基本滑动以及自己控制每次移动一页来达到滑页的效果. 实现过程 1.创建两个panel,上面 ...

  10. 11条javascript知识

    1.局部变量和全局变量 var操作符定义的变量将成为定义该变量作用域中的局部变量.这个局部变量会在函数退出后销毁.不同于其他语言,javaScript不存在块级作用域. 全局变量就是window对象的 ...