id 和 class 选择器

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":

#para1

{

text-align:center;

color:red;

}

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>W3Cschool教程(w3cschool.cn)</title>

<style>

#para1

{

    text-align:center;

    color:red;

}

</style>

</head>

<body>

<p id="para1">Hello World!!!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>W3Cschool教程(w3cschool.cn)</title>

<style>

.center

{

    text-align:center;

}

</style>

</head>

<body>

<h1 class="center">标题居中</h1>

<p class="center">段落居中。</p>

</body>

</html>

你也可以指定特定的HTML元素使用class。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

p.center {text-align:center;}

实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>W3Cschool教程(w3cschool.cn)</title>

<style>

p.center

{

    text-align:center;

}

</style>

</head>

<body>

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be center-aligned.</p>

</body>

</html>

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

[HTML] CSS Id 和 Class选择器的更多相关文章

  1. CSS Id 和 Class选择器

    CSS Id 和 Class选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. 一.id 选择器 id 选择 ...

  2. CSS：CSS Id 和 Class选择器

    ylbtech-CSS:CSS Id 和 Class选择器 1.返回顶部 1. CSS Id 和 Class id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置& ...

  3. CSS id 和 class 选择器

    如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id 选择器 id 选择器可以为标有特定 id 的 HTML 元 ...

  4. 【代码笔记】Web-CSS-CSS id和Class选择器

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. CSS id 选择器

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

  6. CSS3——注释 id 和 class 选择器 css创建（外部、内部、内联样式表）

    注释 /*         注释内容          */ id 和 class 选择器 id   ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用 < ...

  7. CSS学习（2）Id和Class选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义. 以下的样式 ...

  8. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  9. css笔记09：选择器优先级

    1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

随机推荐

  1. MySQL 主从热备份(读写分离)

    MySQL的主从备份,听个名词很高大上,其实都是MySQL原本就实现的了,你只需要简单配置一下就可以实现. 第一步:保持主从两个数据库是同步的,最好事先手动同步一下: 第二步:停止两个数据库,分别更改 ...

  2. ajax转换成json参数

    //提交表单 $('#submit').click(function(){ var datas = $("#iform").serializeJson(); datas.actio ...

  3. Zabbix汉化方法

    1.windows下选择一个汉化字体包 2.拷贝到linux字体目录下 [root@www Desktop]# cd /var/www/html/zabbix/fonts/[root@www font ...

  4. Node.js 常用工具 util

    util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaScript 的功能 过于精简的不足. util.inherits util.inherits(constructor ...

  5. IIS调试技巧

    VS2010如何调试IIS上的网站 通常,我们在Visual Studio里调试ASP.NET网站,都是加个断点,然后按F5,在VS自带的虚拟服务器下调试的.但有时候,VS自带的服务器弱爆了,无法满足 ...

  6. JVM-字节码指令

    Java虚拟机字节码指令 了解了class文件,我觉得就很有必要去了解一下JVM中的字节码指令,那样堆class文件以及JVM运行机制也后很大的帮助． Java虚拟机的指令由一个字节长度的,代表着某种 ...

  7. php大力力 [045节] 兄弟连高洛峰 PHP教程 2014年[已发布，点击下载]

    http://www.verycd.com/topics/2843130/ 第1部分 WEB开发入门篇第1章LAMP网站构建1.[2014]兄弟连高洛峰 PHP教程1.1.1 新版视频形式介绍[已发布 ...

  8. CCLabel在最大宽度已知的情况下如何获取实际宽高

    当前环境在cocos2.2.6, 在UI摆图中,会遇到一种情况就是 设定了label的最大宽度MAX_WIDTH,但label的内容是动态的,如何在label输入了文字之后获取label的真实宽高? ...

  9. PAT (Basic Level) Practise：1038. 统计同成绩学生

    [题目链接] 本题要求读入N名学生的成绩,将获得某一给定分数的学生人数输出. 输入格式: 输入在第1行给出不超过105的正整数N,即学生总人数.随后1行给出N名学生的百分制整数成绩,中间以空格分隔.最 ...

  10. [Mac]关闭所有打开finder

    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'Helvetica Light'} span.Apple-tab-span {white-sp ...