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. winform DataGrid排序、去掉第一的空白列

    排序: dataGridView1.Sort(dataGridView1.Columns[3], ListSortDirection.Descending); 去掉空白列: dataGridView1 ...

  2. python常用的正则表达式,持续更新<<

    # -*- coding: utf-8 -*- import re str_0 = 'Aqin1012Heheheaaaaaaahehe如何da' def re_str(re_str_0,str_0) ...

  3. ActiveMQ分布式事务

    一.安装ActiveMQ 1.拷贝apache-activemq-5.14.4-bin.tar.gz到Linux服务器的/opt下 2.解压缩 tar -zxvf apache-activemq-5. ...

  4. ASP.NET Process Model之二:ASP.NET Http Runtime Pipeline - Part II

    https://www.cnblogs.com/artech/archive/2007/09/13/891266.html 二.ASP.NET Runtime Pipeline(续ASP.NET Ht ...

  5. Python学习笔记9——异常处理

    处理异常 如果执行到程序中某处抛出了异常,程序就会被终止并退出.你可能会问,那有没有什么办法可以不终止程序,让其照样运行下去呢?答案当然是肯定的,这也就是我们所说的异常处理,通常使用 try 和 ex ...

  6. 【译】写个好的 CLI 程序

    写个好的 CLI 程序 Write a Good CLI Program 译文 原文链接:https://qiita.com/tigercosmos/items/678f39b1209e60843cc ...

  7. js/jquery加入的select value显示不正确问题

    最近有需求,通过js添加select到表格中,虽然通过append加入的代码中select的value为2 但是实际显示出来的结果不对,百度之后没有找到答案,自己想了个办法 var selects = ...

  8. 2分钟就能学会的【Google/百度搜索大法】了解一下?

    之前我在知乎回答了「日常生活中有哪些十分钟就能学会并可以终生受用的技能」,现在也整理分享给公众号的朋友们. 作为一个入坑8年国际贸易的老阿姨,真心推荐[google搜索大法](同样适用于百度). 2分 ...

  9. 题解【洛谷P2863】 [USACO06JAN]牛的舞会The Cow Prom

    题面 题解 \(Tarjan\)板子题. 统计出大小大于\(1\)的强连通分量数量输出即可. 代码 #include <iostream> #include <cstdio> ...

  10. b 解题报告

    本题已收录至2019/9/15 本周总结 题目 [问题描述] Hja有一棵\(n\)个点的树,树上每个点有点权,每条边有颜色.一条路径的权值是这条路径上所有点的点权和,一条合法的路径需要满足该路径上任 ...