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. Linux下搭建PHP环境的参考文章小记

    之前也在Linux上安装过两次,但是当我再次需要安装时,还是很多不懂的地方,于是记下此篇,以防下次再费经心思找到不合适的文章,瞎折腾. 通过参考这几篇文章,成功的安装好了自己的PHP(LNMP)环境. ...

  2. Appium+python自动化-Android夜神模拟器

    前言 Android SDK虽然也自带了模拟器,但是那速度会让你怀疑人生,并且不稳定经常卡死异常.夜神模拟器可以说是android模拟器里面的一个神器. 环境安装 1.官网下载地址:https://w ...

  3. 项目转移时发生的错误<springboot+mybatis(xml逆向工程自动生成)>

    org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'app ...

  4. CSS的字体样式

    CSS的字体样式 1. span标签(约定俗成:重要的东西用它括起来) 首选介绍一个约定俗成的东西:span标签.一般将想要突出的东西,比较重要的东西,用span标签括起来. 比如,”学习Java“这 ...

  5. PHP程序员应该如何提升

    PHP程序员应该如何提升 尤其不认可W3school之类的东西,不够深度,理解不深,比起这个更建议看官方文档,中文不清楚,看英文的. 入门视频:入门视频推荐:哈佛大学公开课:构建动态网站Beginne ...

  6. V8 是怎么跑起来的 —— V8 中的对象表示

    V8 是怎么跑起来的 —— V8 中的对象表示 ThornWu The best is yet to come 30 人赞同了该文章 本文创作于 2019-04-30,2019-12-20 迁移至此本 ...

  7. 安装python3并新建python3的虚拟环境

    安装依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel -y 下载P ...

  8. ORA-01935: missing user or role name

    问题描述 ORA-01935: missing user or role name ORA-01935:缺少用户或角色名

  9. sql查询 —— 连接查询

    -- 执行sql文件 test.sql -- 打开终端 -- cd sql文件所在路径 -- 进入mysql -- use 数据库 -- 执行 source test.sql; -- 自关联 -- 一 ...

  10. python HTMLparser

    1.概述 如果我们要编写一个搜索引擎,第一步是用爬虫把目标网站的页面抓下来, 第二步就是解析该HTML页面,看看里面的内容到底是新闻.图片还是视频. 假设第一步已经完成了,第二步应该如何解析HTML呢 ...