如何玩转CSS的Id 和 Class选择器?

id 和 class 选择器

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

1.id 选择器

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

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

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

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

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

2.class 选择器

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

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

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

.center {text-align:center;}

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

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

p.center {text-align:center;}

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

(0)

相关推荐

  • CSS入门

    CSS概述 Cascading Style Sheets : 层叠样式表 主要用作用:用来美化我们的HTML页面的,HTML 决定网页的骨架,CSS化妆,将页面的HTML和美化进行分离 CSS的简单语 ...

  • 一篇文章带你初步了解—CSS特指度

    CSS特指度 说明 这篇博客在在两台电脑上分别完成的,故而有些截图是Firefox,有些是Chrome,有些改动了浏览器的用户样式表,有些没改,但不会影响阅读,特此说明,勿怪. CSS选择器 单个CS ...

  • 使用CSS

    CSS特点:实现一个网页内容与样式的分离.这是CSS非常有优势的一个特点,省去了我们很多的麻烦.我们来做一个简单的例子来看一下这个效果 CSS特点:实现一个网页内容与样式的分离.这是CSS非常有优势的 ...

  • 进阶:玩转 CSS 变量

    如果当年的 CSS  预处理器变量对于初入前端的我来说是开启了新世界的大门,那么 CSS 变量对于我来说无疑就是晴天霹雳.其功能不但可以优雅的处理之前 js 不好处理或不适合的业务需求.更在创造力无穷 ...

  • 教你玩转CSS 伪类

    CSS伪类是用来添加一些选择器的特殊效果. 语法: 伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class ...

  • 教你玩转CSS 分组选择器和嵌套选择器

    分组选择器 在样式表中有很多具有相同样式的元素. h1 { color:green; } h2 { color:green; } p { color:green; } 为了尽量减少代码,你可以使用分组 ...

  • 教你玩转CSS padding(填充)

    padding(填充) 当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充. 单独使用 padding 属性可以改变上下左右的填充. 可能的值 属性 描述 leng ...

  • 教你玩转CSS 轮廓(outline)属性

    CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. CSS outline 属性规定元素轮廓的样式.颜色和宽度. 定义和用法 o ...

  • 教你玩转CSS margin(外边距)

    margin margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性. 可能的值 值 | ...

  • 大众“改变玩法”,以ID.4切入电动车市场,誓争NO.1地位

    11月3日的ID.4中国首秀,大众选在了科技气氛浓厚的深圳举行,以一声"你好,ID",向中国消费者打招呼. ID.4的诞生,承载着大众推进新能源战略发展的决心,更体现出大众汽车对智 ...

  • CSS Id 和 Class选择器

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

  • CSS第一天-02-CSS基础选择器

    第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用基础选择器给页面元素添加样式 1. CSS选择器作用(重点 ...