一、类选择器

类选择用使用"."(英文点号）进行标识，后面紧跟类名

如：

.red{color:red;}

类样式可以应用于文档中的多个元素，这体现了CSS代码的可重用性，帮助用户简化页面控制。

二、类选择器与标签选择器

类选择器和标签选择器都具有一对多的特性，即一个样式可以控制多个元素对象的显示效果。

注意事项：

  • 与标签选择器相比，类选择器具有更好的适应性和灵活性，因为可以指定类的样式所应用的元素对象范围
  • 与类选择器相比，标签选择器具操作简单、定义方便的优势，因为不需要为每个元素都定义相同的class属性，而使用类选择器之前，需要在HTML文档中为要应用类样式的元素定义class属性，这亲就显示重比较麻烦。
  • 标签选择器适合为元素定义全局显示属性，而类选择器，更适合定义类样式，定义了标签选择器的样式之后，肯定会对页面中同一个元素产生影响，而类选择器定义的样式会出现不被应用的情况，具有更大的机动性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>类选择器</title>

<link type="text/css" rel="stylesheet" href="css/demo4.css"/>

</head>

<body>

<div></div>

<div class="red"></div>

</body>

</html>

css

@charset "utf-8";

/* CSS Document */

div{

    width:400px;

    height:200px;

    background-color:blue;

    }

.red{background-color:red;}

结果:

三、类选择器与ID选择器

类选择器与ID选择器除了应用范围不同外，它们的优先级也不同，在同等条件下ID选择器比类选择器具有更大的优先权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>伪类和伪对象选择器</title>

<link type="text/css" rel="stylesheet" href="css/demo4.css"/>

</head>

<body>

<div id="text" class="red"></div>

</body>

</html>

CSS

@charset "utf-8";

/* CSS Document */

div{

    width:400px;

    height:200px;

    }

#text{

    background-color:blue;

    }

.red{background-color:red;}

div将显示为蓝色

一般来讲：

ID选择器：应用用体现文档的结构和位置，如#header,#footer,#left等，

类选择器：class属性就应该体现名称的样式描述性，使一看类名就了解要定义的样式，如.red,定义一个红色的类,.underline定义一个下划线的类等

CSS 类选择器(四)的更多相关文章

  1. CSS类选择器和ID选择器

    CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...

  2. CSS 类选择器

    在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中, ...

  3. CSS系列（7）CSS类选择器Class详解

    这一篇文章,以笔记形式写. 1,  CSS 类选择器详解 http://www.w3school.com.cn/css/css_selector_class.asp 知识点: (1)    使用类选择 ...

  4. css 类选择器结合元素选择器和多类选择器

    1.结合元素选择器 <p class="important">css</p> p.important {color: red} 匹配class属性包含imp ...

  5. css类选择器类名覆盖优先级

    code <style> .a{ background: red; } .b{ background: yellow; } </style> <div class=&qu ...

  6. CSS类选择器

    CSS 选择器参考手册 还是   .class     #id    element  用的最多! 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. "CSS" 列指 ...

  7. css类选择器中 空格 逗号 啥都不填的区别及其他笔记

    .a.b 代表 一个元素上 同时 有 a 类 和 b 类 .a .b (中间有空格) 代表 .b 是 .a 的子元素选择. .a,.b 代表 class='a' 和 class='b' 都会被选择上.

  8. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  9. CSS一个元素同时使用多个类选择器（class selector）

    CSS类选择器参考手册 一个元素同时使用多个类选择器 CSS中类选择器用点号表示.实际项目中一个div元素为了能被多个样式表匹配到(样式复用),通常div的class中由好几段组成,如<div ...

随机推荐

  1. 二叉平衡查找树AvlTree（C实现）

    二叉平衡查找树即是一棵树中所有节点的左右子树高度差不超过1的查找树 头文件—————————————————————————————— #ifndef _AVLTREE_H_ #define _AVL ...

  2. kubernetes学习笔记

    docker实现了更便捷的单机容器虚拟化的管理, docker的位置处于操作系统层与应用层之间; 相对传统虚拟化(KVM,XEN): docker可以更加灵活的去实现一些应用层功能, 同时对资源的利用 ...

  3. VC2013的一个bug

    前段时间在尝试使用一个C++的GUI库nana.这个库最大的特点在于使用现代C++风格去编写GUI程序,而不需要使用大量的比较丑陋的代码(如MFC中的各种宏),或者其它的非C++元素.这是一个比较新的 ...

  4. [Python] Keep efficient by vim in Pycharm

    From: http://blog.csdn.net/u013088062/article/details/50144201 From: http://blog.csdn.net/u013088062 ...

  5. 【转载】C/C++ 函数指针 总结

    转载自:http://blog.csdn.net/shihui512/article/details/9787125 什么是函数指针函数指针的声明函数指针的赋值函数指针的使用将函数作为其他函数的参数在 ...

  6. 【JVM学习笔记一】JVM内存分布

    Overview 学习JVM首先需要了解一下JVM管理的内存是如何分布的,在看了<深入理解Java虚拟机>和一些博文之后,我准备自己记录一下学习的过程. 下图是JVM中运行时数据区的大致示 ...

  7. nodejs 常用全局包

    1.nodemon 更改node程序后程序自动启动 (nodemon app.js) npm install nodemon  -g 2.gulp 压缩合并代码等 npm install gulp - ...

  8. An Introduction to Garbage Collection(垃圾回收简介)

    1. Introduction 2. Principles 3. Advantages 4. Disadvantages 5. 常见的垃圾回收技术 5.1. 跟踪式垃圾回收 5.1.1. 基本算法 5 ...

  9. 基于HTML5技术的电力3D监控应用（四）

    回答了知乎问题较长,一些使用WebGL的经验,作为新的一篇: 正好逛到这个问题,正好是2013年底,正好最近基于的HT for Web 3D做的电力项目收尾,正好用到的就是WebGL技术,因此说说自己 ...

  10. IOS中图片加载的一些注意点

    图片的加载: [UIImage imageNamed:@"home"] //加载 png图片 在ios中获取一张图片只需要写图片名即可 不需要写后缀 默认都是加载.png的图片 但 ...