CSS系列(7)CSS类选择器Class详解

这一篇文章,以笔记形式写。

1,  CSS 类选择器详解

http://www.w3school.com.cn/css/css_selector_class.asp

知识点:

(1)    使用类选择器的前提是给标签添加上类属性,比如<p class="important"></p>

(2)    类选择器的语法为:*.important {color:red;},不过一般省略前面的通配符选择器,写成 .important {color:red;},这样就会给所有带有class="important"的标签添加样式。

(3)    给具有某类class的标签应用样式,比如 p.important {color:red;} 这里只会匹配标签为p且class=” important”的元素。

(4)    给一个标签设置多个类,这些类的样式都会应用到这个标签上。比如:

<p class="important warning">

This paragraph is a very important warning.

</p>

P标签同时具有类important和warning,不分前后。

样式为:

.important {font-weight:bold;}  设置为粗体

.warning {font-style:italic;}   设置为斜体

这个段落p就会同时是粗体和斜体。

(5)讲两个类写到一起,不分前后顺序,就会匹配同时包含两个类的元素,比如:

.important.warning {background:silver;} 设置背景为银色

这个选择器会匹配同时具有类important和warning的元素。

(6)第4和第5就是所谓的”多类选择器”,文章中说, IE7 之前的版本中,不同平台的 Internet Explorer 都不能正确地处理多类选择器。

不过,我在IE6、7、8上测试过,都没有问题。

2,  类选择器class和ID选择器的差别

http://www.w3school.com.cn/css/css_selector_id.asp

知识点:

(1)    ID选择器只能在文档中使用一次

可以搜索文章【为什么html标签的id必须唯一】

(2)    不能使用 ID 词列表,即不能像多类选择器那样 .red.bold 可以选择同时具有类red和bold的标签,#red#bold这是不允许的。

(3)    ID 能包含更多含义,比如id= “mostImportant” 代表是“最重要的”,这是唯一的;而class=” important” 代表“重要的”,可能有很多。

时间: 2024-10-11 17:14:32

CSS系列(7)CSS类选择器Class详解的相关文章

CSS 选择器【详解】

转自:http://www.cnblogs.com/polk6/archive/2013/07/19/3142142.html CSS 选择器及各样式引用方式介绍 一个好的界面,是一个Web吸引人们最大的卖点. Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 1.选择器的分类 语法结构: 1.1 Id选择器 1.1.1 格式 #id :#+元素的id:id是区分大小写. 1.1.2 示例 #title1 {background-color:B

我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级

首先看一下使用Css设置h1标签字体颜色和大小的例子,效果图如下: 新建一个网页test.html,然后复制粘贴下面的内容: <html> <head> <style type="text/css"> h1 {color:red; font-size:14px;} </style> </head> <body > <h1>使用Css让h1标签字体变红</h1> </body> &

CSS系列:CSS3新增选择器

CSS系列:CSS3新增选择器 1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选择匹配E的元素,且匹配元素的class属性值为“class”,E选择符可以省略. E F 包含选择器 选择匹配F的元素,且该元素被包含在匹配E的元素内. E:link 链接伪类选择器 选择匹配E的元素,且匹配元素被定义了超链接并未被访问.例:a:link E:visi

CSS float浮动的深入研究、详解及拓展

CSS float浮动的深入研究.详解及拓展(一) by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=583 一.浮动的原始意义是什么? 浮动出现的意义其实只是用来让文字环绕图片而已,仅此而已.而我们目前用浮动实现页面布局本不是浮动该干的事情. 二.浮动的本质是什么? 我将浮动的本质定义为“包裹与破坏”! 1. 浮动的“包裹性”撇开浮动的“破坏性”,浮动就是个带有方位的d

我给女朋友讲编程CSS系列(4) CSS盒子模型

什么是CSS盒子模型?如何学习CSS的盒子模型? 这篇文章,以 [分享 + 结论]  的方式来写. 1,  看w3school的[CSS 框模型概述] 网址为: http://www.w3school.com.cn/css/css_boxmodel.asp 接着把[CSS内边距],[CSS外边距],[CSS外边距合并]看看. 小结: (1)    一般,在样式表中,都会先把所有元素的外边距和内边距设置为0 * {   margin: 0;  padding: 0;  } * 是通配符,就是一个符

我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体

一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置. 1,  新建一个网页a.html,把下面的代码复制进去. <html> <head> <style type="text/css"> body { font-family : 微软雅黑,宋体; font-size : 1

jQuery选择器代码详解(四)——Expr.preFilter

原创文章,转载请注明出处,多谢! Expr.preFilter是tokenize方法中对ATTR.CHILD.PSEUDO三种选择器进行预处理的方法.具体如下: Expr.preFilter : { "ATTR" : function(match) { /* * 完成如下任务: * 1.属性名称解码 * 2.属性值解码 * 3.若判断符为~=,则在属性值两边加上空格 * 4.返回最终的mtach对象 * * match[1]表示属性名称, * match[1].replace(rune

jQuery选择器代码详解(七)——elementMatcher函数

要读懂Sizzle的Compile执行过程,首先需要弄清楚涉及的各个子程序的功能和关键变量和作用,我将逐一对jQuery-1.10.2版本的Compile代码进行说明,望能给予大家帮助. elementMatcher(matchers) 1.源码 function elementMatcher(matchers) { return matchers.length > 1 ? function(elem, context, xml) { var i = matchers.length; while

jQuery选择器代码详解(五)——实例说明tokenize的解析过程

原创文章,转载请写明出处,多谢! 以下分析基于jQuery-1.10.2.js版本. 下面将以$("div:not(.class:contain('span')):eq(3)")为例,说明tokenize和preFilter各段代码是如何协调完成解析的.若想了解tokenize方法和preFilter类的每行代码的详细解释,请参看如下两篇文章: jQuery选择器代码详解(三)--tokenize方法 jQuery选择器代码详解(四)--Expr.preFilter 下面是tokeni