id 选择器

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

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

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

#para1
{
  text-align:center;
  color:red;
}

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

class 选择器

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

可以为一个元素设置多个class,如:<p class="style1 style2"></p>

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

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

.center {text-align:center;}

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

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

p.center {text-align:center;}
 

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

CSS学习(2)Id和Class选择器的更多相关文章

  1. css学习_写法规范、选择器

    1.css(层叠样式表)样式主要目的(让页面更好看些) css尽量不要写内联样式,保证结构和样式分离原则: html专门负责结构,css专门负责样式. 2.css写法规范 选择器  { 属性 :值 : ...

  2. CSS学习总结4:派生选择器学习总结

    派生选择器:通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁.派生选择器中一共分为三种:后代选择器.子元素选择器.相邻兄弟选择器. 1.初识派生选择器 实例:你希望列表中的 stron ...

  3. CSS学习笔记(4)--选择器(w3school)

    CSS3 选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. "CSS" 列指示该属性是在哪个 CSS 版本中定义的.(CSS1.CSS2 还是 CSS3.) ...

  4. CSS学习摘要-语法和选择器

    主要摘自网络开发者. 从最基本的层次来看,CSS是由两块内容组合而成的: 属性(Property):一些人类可理解的标识符,这些标识符指出你想修改哪一些样式,例如:字体,宽度,背景颜色等. 属性值(V ...

  5. CSS学习笔记之选择器

    目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...

  6. CSS学习之选择器优先级与属性继承

    CSS学习之选择器优先级与属性继承 选择器优先级 其实选择器是具有优先级的,我们来看下面这一组案例: <!DOCTYPE html> <html lang="en" ...

  7. [HTML] CSS Id 和 Class选择器

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

  8. css基础之 id和选择器

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

  9. 【CSS学习笔记】CSS选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  10. CSS学习笔记02 CSS选择器

    1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...

随机推荐

  1. 零基础自学Python是看书还是看视频?

    很多人都碍于Python培训班的高昂费用和有限的空余时间都选择自学Python,但是没有老师帮助,显得有些迷茫,不知应该从何处学起,也不知识看书学习还是应该看视频学习.本就来谈谈这个话题.   我们先 ...

  2. 什么是kafka,怎么使用? (2) - 内含zookeeper等

    zookeeper依赖于java https://baike.baidu.com/item/yum/2835771?fr=aladdin http://yum.baseurl.org/ 去yum官网下 ...

  3. Allegro 反射仿真--拓扑结构的提取提取及波形分析

    在SPECCTRAQuest下,选择Analyze->SI/EMI sim->Probe,进入如下图所示界面: 注:BRD文件命名不用使用中文字符及一些不常用的字符,如".&qu ...

  4. C语言-条件编译使用分析

    1.基本概念 条件编译的行为类似于C语言中的if…else… 条件编译是预编译指示命令,用于控制是否编译某段代码 2.实例分析 条件编译初探     22-1.c #include <stdio ...

  5. flask入门(一)

    flask是一个轻量级的框架,据说跟django跟比是真的轻. 首先要先配置一个虚拟环境,flask项目需要在那个虚拟环境里运行,这里需要用的venv库实在python3里的标准库,不过有的linux ...

  6. eclipse查看jar包源代码乱码问题解决

    文章来源 今天在eclipse中查看java的jar包中的源代码时,显示的全部是乱码.起初只设置了content types还不行,还是乱码.不过问题最后解决了,配置步骤如下: 首先要知道你需要配置的 ...

  7. java Map 迭代key,value 最简洁的方法

    import java.util.HashMap; import java.util.Map; public class EntrySets { public static void main(Str ...

  8. flume--exec源

    创建a2.conf文件并且编写 Sources 类型是exec 配置文件如下 启动集群 启动flume 产生临时文件 ...tmp 关闭临时文件 再次写入文本,会再次产生一个临时文件.截图左边是一个内 ...

  9. 「题解」「CF853B」Jury Meeting

    目录 题目 思路 代码 题目 传送门 思路 十分巧妙的差分前缀和好题. 题目板块完结之后,我看到有很多处理此题的方法,但总感觉差分前缀和比较巧妙. 首先,通过输入我们可以将每个人能在 \(0\) 号点 ...

  10. 2019kali安装以及汉化

    Kali Linux2019.4版本包括了一些令人兴奋的新更新: 一个新的默认桌面环境,Xfce 新的GTK3主题(用于Gnome和Xfce) “Kali Undercover”模式介绍 Kali文档 ...