css类选择器的使用方法详解

类选择器
在 CSS 中，类选择器以一个点号显示：


代码如下:

.center {text-align: center}

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。


代码如下:

<h1 class="center">
    This heading will be center-aligned
    </h1>

<p class="center">
    This paragraph will also be center-aligned.
    </p>

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
和 id 一样，class 也可被用作派生选择器：


代码如下:

.fancy td {
        color: #f60;
        background: #666;
        }

在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）
元素也可以基于它们的类而被选择：


代码如下:

td.fancy {
        color: #f60;
        background: #666;
        }

在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。


代码如下:

<td class="fancy">

多类选择器

1、在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作（这两个词的顺序无关紧要，写成 warning important 也可以）：


代码如下:

<p class="important warning">
This paragraph is a very important warning.
</p>

我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：


代码如下:

.important {font-weight:bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}

2、通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则：


代码如下:

.important.urgent {background:silver;}

不出所料，这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此，如果一个 p 元素的 class 属性中只有词 important 和 warning，将不能匹配。不过，它能匹配以下元素：


代码如下:

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

赞 (0)

相关推荐

  • css样式标签和js语法属性区别

    盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom-width borderBottomWidth border-color borderColor border-left borderLeft bor

  • CSS透明属性详解代码

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: 复制代码 代码如下: .transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;} 上面的几个属性分别是:opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox, Safari和 Opera.filter:alpha(opacity=50); 这个是为IE6设的

  • CSS绘制五角星

    CSS绘制五角星

    1 六角形 复制代码 代码如下: #star-six {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 100px solid red;    position: relative;}#star-six:after {    width: 0;    height: 0;    border-

  • js控制不同的时间段显示不同的css样式的实例代码

    js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 复制代码 代码如下: function getCSS(){        datetoday = new Date();        timenow=datetoday.getTime();        datetoday.setTime(timenow);        thehour = datetoday.getHours();        if (thehour<12)            disp

  • 纯CSS绘制三角形（各种角度）

    纯CSS绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. 今天给大家带来 CSS 三角形绘制方法 复制代码 代码如下: #triangle-up {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transpar

  • css类选择器的使用方法详解

    类选择器 在 CSS 中,类选择器以一个点号显示: 复制代码 代码如下: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中.在下面的 HTML 代码中,h1 和 p 元素都有 center 类.这意味着两者都将遵守 ".center" 选择器中的规则. 复制代码 代码如下: <h1 class="center">     This heading will be center-

  • c++中的单例类模板的实现方法详解

     1.什么是单例模式 在架构设计时,某些类在整个系统生命周期中最多只能有一个对象存在 ( Single Instance ).如超市收银系统,其外观主要由显示器(1个).扫描枪(1个).收款箱(1个)组成,在系统正常运行期间这三部分都是唯一存在的:也就是说,显示器.扫描枪.收款箱这三部分都应该有各自的类,并且每个类只能唯一地实例化一个对象,基于这种模式的程序设计,称为单例模式. !!!单例模式只能创建一个对象,且该对象的生命周期伴随系统的整个运行期间. 2.怎么实现单例模式 思考:如何定义一个类

  • C++中使用function和bind绑定类成员函数的方法详解

    定义一个普通的类 class Test1{ public: void fun(int val){ cout<<"hello world "<<val<<endl; } }; 开始第一个测试 int main(){ Test1 t; function<void(int)> pf = std::bind(&Test1::fun,t,2); pf(4); // return 0; } 输出的值是2,说明pf传进去的4并没有什么用,在bi

  • C#使用Object类实现栈的方法详解

    本文实例讲述了C#使用Object类实现栈的方法.分享给大家供大家参考,具体如下: Stack类的代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 使用Object类实现后进先出队列 { class Stack { private Object[] _items; public Object[] Items { get { return this.

  • PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】 原创

    PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】 原创

    本文实例讲述了PHP实现生成vcf vcard文件功能类定义与使用方法.分享给大家供大家参考,具体如下: 前面介绍了php读取vcf文件的方法,这里再来研究一下vcf文件的生成方法. VCF格式是Windows系统中outlook的名片存储格式,打开VCF格式需要使用手机的相应配套软件,使用outlook也可以打开VCF文件. 手机通讯录保存的文件格式也是vcf格式.这里就来给出一个使用php生成vcf格式文件的实例. 具体代码如下: <?php date_default_timezone_se

  • 使用Java的Graphics类进行绘图的方法详解

    Graphics类提供基本绘图方法,Graphics2D类提供更强大的绘图能力.本节讲解Graphics类,下节讲解Graphics2D. Graphics类提供基本的几何图形绘制方法,主要有:画线段.画矩形.画圆.画带颜色的图形.画椭圆.画圆弧.画多边形等. 1. 画线 在窗口画一条线段,可以使用Graphics类的drawLine()方法: drawLine(int x1,int y1,int x2,int y2) 例如,以下代码在点(3,3)与点(50,50)之间画线段,在点(100,10

  • Python类装饰器实现方法详解

    本文实例讲述了Python类装饰器.分享给大家供大家参考,具体如下: 编写类装饰器 类装饰器类似于函数装饰器的概念,但它应用于类,它们可以用于管理类自身,或者用来拦截实例创建调用以管理实例. 单体类 由于类装饰器可以拦截实例创建调用,所以它们可以用来管理一个类的所有实例,或者扩展这些实例的接口. 下面的类装饰器实现了传统的单体编码模式,即最多只有一个类的一个实例存在. instances = {} # 全局变量,管理实例 def getInstance(aClass, *args): if aC

  • Java多线程编程中使用Condition类操作锁的方法详解

    Condition的作用是对锁进行更精确的控制.Condition中的await()方法相当于Object的wait()方法,Condition中的signal()方法相当于Object的notify()方法,Condition中的signalAll()相当于Object的notifyAll()方法.不同的是,Object中的wait(),notify(),notifyAll()方法是和"同步锁"(synchronized关键字)捆绑使用的:而Condition是需要与"互斥

  • 微信小程序当前时间时段选择器插件使用方法详解

    微信小程序当前时间时段选择器插件使用方法详解

    本文实例为大家分享了微信小程序当前时间时段选择器的实现代码,供大家参考,具体内容如下 DEMO效果图 插件思路 准备工作 获取当前时间,同时获取当前的年.月.日.周几: 创建处理日期数字的函数: 创建格式化日期的函数: 创建获取某月天数的函数: 创建获取季度开始的月份函数. 获取时段 创建获取当天的时段函数: 创建获取本周的时段函数: 创建获取本月的时段函数: 创建获取本季度的时段函数: 创建获取本年的时段函数: 创建自定义时段函数. 准备阶段的JS constructor() { this.n

  • django 类视图的使用方法详解

     前言 当我们在开发一个注册模块时.浏览器会通过get请求让注册表单弹出来,然后用户输完注册信息后,通过post请求向服务端提交信息.这时候我们后端有两个视图函数,一个处理get请求,一个处理post请求.两个视图函数都是不同的名字. 但是随着开发的进行.当你想要找到注册模块的这两个视图,太麻烦了.如果这两个视图函数能放在一起,归成一个类,作为注册模块的类.这样日后的维护将会方便很多.这时候,django的类视图就能实现这个功能了. 对比 在没有类视图前,视图是这样的: def get_regi

随机推荐