CSS——id 和 class 选择器

id 选择器

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
代码实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>再见二逼K</title>
<style>
#para1
{text-align:center;color:red;
}
</style>
</head><body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

结果：

text-align注：
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.”号显示

代码示例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>再见二逼K</title>
<style>
.center
{text-align:center;
}
</style>
</head><body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>

代码示例2：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>再见二逼K</title>
<style>
p.center
{text-align:center;
}
</style>
</head><body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>
</body>
</html>

CSS——id 和 class 选择器相关推荐

Html和css的class和id的命名,[HTML] CSS Id 和 Class选择器
id 和 class 选择器如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id 选择器 id 选择器可以为标 ...
html类选择器和id选择器,CSS Id 和 Class选择器
CSS Id 和 Class选择器如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. 一.id 选择器 id 选择 ...
【代码笔记】Web-CSS-CSS id和Class选择器
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
6、CSS Id 和 Class类选择器
id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...
如何玩转CSS的Id 和 Class选择器？
目录 id 和 class 选择器 id 选择器 class 选择器 id 和 class 选择器如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 &quo ...
CSS ID选择器与CLASS选择器
在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 属性选择器可以根据元素的属性及属性值来选择元素. 三种基本的选择器类型:标签名选择器.类选择器.ID选择器具体语法 ...
好程序员web前端CSS选择符（选择器）:表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
css样式表和选择器
CSS样式----图文详解:css样式表和选择器主要内容 CSS概述 CSS和HTML结合的三种方式: 行内样式表 . 内嵌样式表 . 外部样式表 CSS四种基本选择器: 标签选择器 . 类选择器 ...
HTML与CSS基础之常用选择器(一)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>常用选 ...

CSS——id 和 class 选择器

id 选择器

class 选择器

CSS——id 和 class 选择器相关推荐

最新文章

热门文章