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. C++构造函数和重载函数运算符如何区分

    构造函数和重载函数运算符如何区分: class Distance { private: int feet; int inches; public: Distance(){ feet = ; inche ...

  2. spring aop使用,spring aop注解,Spring切面编程

    ================================ ©Copyright 蕃薯耀 2020-01-21 https://www.cnblogs.com/fanshuyao/ 一.第一步, ...

  3. Ueditor百度编辑器中 setContent()方法的使用

    百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容 函数说明:setContent(string,boolean); 参数string ...

  4. HDU-2036 改革春风吹满地 (数学)

    Problem Description "改革春风吹满地,不会AC没关系;实在不行回老家,还有一亩三分地.谢谢!(乐队奏乐)" 话说部分学生心态极好,每天就知道游戏,这次考试如此简 ...

  5. Mysql备份参数

    --all-databases , -A 导出全部数据库. mysqldump -uroot -p --all-databases --all-tablespaces , -Y 导出全部表空间. my ...

  6. Oracle Linux安装

    注:Oracle11gR2 X64安装 一.环境准备 安装包: 2.CentOS-7-x86_64-DVD-1511.iso 3.linux.x64_11gR2_database_1of2.zip l ...

  7. Quality and CCPC

    English foundation: the fractional part 小数部分 disclaimer 免责声明 fictitious  虚构的,编造的;假定的,虚设的;小说式的;假装的 No ...

  8. 开发板上如何配置apahe2+mysql+php7

    1,安装apache2 sudo apt-get install apache2 修改webroot vim /etc/apache2/apache2.conf #在其中复制最后一个 <Dire ...

  9. ET框架之SceneChangeComponent

    初始化事件 using ETModel; namespace ETHotfix { [Event(EventIdType.InitSceneStart)] public class InitScene ...

  10. QT离线安装包

    各个版本下载链接http://mirrors.ustc.edu.cn/qtproject/archive/qt http://www.qtcn.org/bbs/i.php