您的位置：首页 > 网站优化 > css  >  CSS中级教程 class和id选择符

CSS中级教程 class和id选择符

 更新时间：2017年7月6日 23:13  点击：1734

在CSS初级教程中我们仅仅考虑了HTML选择符──以HTML标签形式出现。
你当然可以用类选择符class和标识选择符id来定义自己的选择符。
这样做的好处是，依赖于class或者id，你可以不同地表现相同的HTML元素。
在CSS中，类选择符在一个半角英文句点（.）之前，而id则在半角英文井号（#）之前。
看起来像这样：

 代码如下 复制代码
#top { 
background-color: #ccc; 
padding: 1em 
} 
.intro { 
color: red; 
font-weight: bold; 
} 

HTML与CSS的连接用属性id和class。像这样：

 代码如下 复制代码
<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div> 

id和class不同之处在于，id用在唯一的元素上，而class则用在不止一个的元素上。
你也可以为一个指定的HTML元素应用选择符，把HTML选择符放置在前面就可以了，所以， p.jam { whatever }会应用在有类“jam”的段落上。

[!--infotagslink--]

相关文章

  • Painter绘制红衣喝酒男水粉画效果教程

    今天小编在这里就来给Painter的这一款软件的使用者们来说一说绘制红衣喝酒男水粉画效果的教程，各位想知道具体绘制步骤的使用者，那么下面就快来跟着小编一起看一看教程...2016-09-14

  • iPhone6怎么激活？两种苹果iPhone6激活教程图文详解

    iPhone6新机需要激活后才可以正常使用，那么对于小白用户来说，iPhone6如何激活使用呢？针对此问题，本文就为大家分别介绍Wifi无线网络激活以及iPhone6连接电脑激活这两种有效的方法，希望本文能够帮助到大家...2022-09-14

  • Photoshop制作雨中野外孤独行走的一头牛海报教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下制作雨中野外孤独行走的一头牛海报的教程，各位想知道具体制作方法的使用者们，大家就快来看一看小编给...2016-09-14

  • Painter绘制帅气卡通魔法王子漫画教程

    今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制帅气卡通魔法王子漫画的具体教程，各位想知道绘制步骤的使用者，那么下面就快来跟着小编一起看一看教程...2016-09-14

  • Illustrator鼠绘堆雪人的孩童矢量插画教程

    今天小编在这里就来给各位Illustrator的这一款软件的使用者们来说说鼠绘堆雪人的孩童矢量插画的教程，各位想知道具体绘制方法的使用者们，那么各位就快来跟着小编来看看...2016-09-14

  • 安卓手机app添加支付宝支付开发教程

    支付宝支付在国内算是大家了，我们到处都可以使用支付宝了，下文整理介绍的是在安卓app应用中使用支付宝进行支付的开发例子。 之前讲了一篇博客关与支付宝集成获取...2016-09-20

  • 美图秀秀给照片天空加蓝天白云教程一览

    今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下究竟该怎么给照片天空加蓝天白云的教程，各位想知道具体制作步骤的，那么下面就来跟着小编一起看看吧。 ...2016-09-14

  • llustrator绘制扁平化风格卡通警察护士空姐肖像教程

    今天小编在这里就来给llustrator的这一款软件的使用者们来说一说绘制扁平化风格卡通警察护士空姐肖像的教程，各位想知道具体绘制步骤的使用者们，那么下面就快来跟着小编...2016-09-14

  • photoshop简单制作一个搞笑的换脸表情包教程

    今天小编在这里就来给photoshop的这一款软件的使用者们来说一说简单制作一个搞笑的换脸表情包的教程，各位想知道具体制作方法的使用者们，那么大家就快来看一看教程吧。...2016-09-14

  • Illustrator绘制一个方形的录音机图标教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一下绘制一个方形的录音机图标的教程，各位想知道具体绘制方法的使用者们，那么下面就来看一下小编给大家分...2016-09-14

  • photoshop给手绘画调色变换场景后期教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说说给手绘画调色变换场景的后期教程，各位想知道具体后期处理步骤的使用者们，那么大家就快来跟着小编来看...2016-10-02

  • 美图秀秀让你胸丰满起来处理教程

    今天小编在这里就来给美图秀秀的这一款软件的使用者们来说一下让你胸丰满起来的处理教程，各位想知道具体处理步骤的，那么下面就快来跟着小编一起看一下教程吧。 给...2016-09-14

  • Painter绘制雷神传插画教程

    今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制雷神传插画的教程，各位想知道具体绘制步骤的使用者，那么下面就快来跟着小编一起看看绘制方法吧。 ...2016-09-14

  • PHP Fatal error: Cannot use object of type stdClass as array in错误

    下面一起来看看在php开发中碰到PHP Fatal error: Cannot use object of type stdClass as array in错误问题的解决办法吧。 普通的数组出现如下错误 代码...2016-11-25

  • vue Treeselect下拉树只能选择第N级元素实现代码

    这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01

  • MySQL中的联合索引学习教程

    联合索引又叫复合索引。对于复合索引:Mysql从左到右的使用索引中的字段，一个查询可以只使用索引中的一部份，但只能是最左侧部分。例如索引是key index (a,b,c). 可以支持a | a,b| a,b,c 3种组合进行查找，但不支持 b,c进...2015-11-24

  • Lua语言新手简单入门教程

    这篇文章主要给大家介绍的是关于Lua语言新手入门的简单教程，文中通过示例代码一步步介绍的非常详细，对各位新手们的入门提供了一个很方便的教程，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。...2020-06-30

  • MySQL日志分析软件mysqlsla的安装和使用教程

    一、下载 mysqlsla [root@localhost tmp]# wget http://hackmysql.com/scripts/mysqlsla-2.03.tar.gz--19:45:45-- http://hackmysql.com/scripts/mysqlsla-2.03.tar.gzResolving hackmysql.com... 64.13.232.157Conn...2015-11-24

  • php类的使用实例教程

    php类的使用实例教程 <?php /** * Class program for yinghua05-2 * designer :songsong */ class Template { var $tpl_vars; var $tpl_path; var $_deb...2016-11-25

  • 美图秀秀制作隔离区聊天背景教程

    今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下制作隔离区聊天背景的教程，各位想知道具体方法的，那么下面就快来跟着小编一起看一看吧。 给各位美图秀...2016-09-14