1.时常见到css的这两种种写法：
a.两个class隔空格连一起：
.class1 .class2{......}
b.两个class隔逗号连一起：
.class1,.class2{......}
2.举两个例子说明：
两个class隔空格连一起,例A：
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>两个class隔空格连一起</title>
<style type="text/css">
.classDiv {
height: 200px;
width: 200px;
background-color: aqua;
}
.classDiv .classP {
color: hotpink;
background-color: #e7e7e7;
}
</style>
</head>
<body>
<div class="classDiv">
<p class="classP">
.classDiv .classP对我生效
</p>
.classDiv .classP对我无效
</div>
<p class="classP">
.classDiv .classP对我生效
</p>
</body>
</html>
例A结果：
两个class隔逗号连一起,例B：
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>两个class隔逗号连一起</title>
<style type="text/css">
.classDiv {
height: 200px;
width: 200px;
background-color: aqua;
}
.classDiv .classP {
color: hotpink;
background-color: #e7e7e7;
}
</style>
</head>
<body>
<div class="classDiv">
<p class="classP">
.classDiv .classP对我生效
</p>
.classDiv .classP对我无效
</div>
<p class="classP">
.classDiv .classP对我生效
</p>
</body>
</html>
例B结果：
3.结果说明：
a写法只对两个class中的后者有效，前者起到过滤的作用；b写法对所有class都有效。
.class1 .class2{......}
(十三)学习CSS之两个class连一起隔空格和逗号的更多相关文章
-
学习 CSS 样式
1.CSS浮动 : http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论: ...
-
css知多少（2）——学习css的思路
两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1． 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...
-
【图片版】学习CSS网格布局
简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局 一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...
-
学习CSS的思路（转）
两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1． 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...
-
《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
-
CSS 简介，学习 CSS 必看
CSS 表示的是层叠样式表,学习 CSS 之前我们必须要掌握 HTML 和 XHTML 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 ...
-
css的两种盒子模型
css的两种盒子模型:W3C标准盒子模型.IE盒子模型 两者的相同之处:都包含margin.border.padding.content 两者的不同之处:W3C标准盒子模型的content部分不包含其 ...
-
开始学习css
今天开始学习css:应用一本<HTML5与CSS3网页设计基础> 先学习css样式规则声明. Body{ color:blue} 对应:选择符:{声明属性:声明值}: Background ...
-
HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
随机推荐
-
关于js css html加载顺序整理
1.js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控. 正常的网页加载流程是这样的. 浏览器一边下载HTML网页,一 ...
-
Linux程序设计（一）入门
1. linux程序 Linux应用程序表现为两种特殊类型的文件:可执行文件和脚本文件. 可执行文件:是计算可以直接运行的程序,相当于windows的.exe文件. 脚本文件:一组指令的集合.这些指令 ...
-
JDBC简单范例
连接工具类 import java.sql.Connection; import java.sql.DriverManager; public class DBUtil { // 建立连接方法 pub ...
-
Scrapy Crawl 运行出错 AttributeError: 'xxxSpider' object has no attribute '_rules' 的问题解决
按照官方的文档写的demo,只是多了个init函数,最终执行时提示没有_rules这个属性的错误日志如下: ...... File "C:\ProgramData\Anaconda3\lib ...
-
[转]PLA算法总结及其证明
PLA算法总结及其证明 http://m.blog.csdn.net/article/details?id=45232891 分类: 机器学习 PLA(Perception Learning Algo ...
-
php页面的基本语法
概述: 1. PHP 脚本在服务器上执行,然后将纯 HTML 结果发送回浏览器. 2. PHP 脚本以 <?php 开始,以 ?> 结束,可以放到文档中的任何位置. 3. 当 PHP 解析 ...
-
Daily Scrum 11.14
姓名 今日任务 黄新越 按照热度排序->产生柱状图 刘垚鹏 总体代码架构整合 王骜 总体代码架构整合 林旭鹏 优化整体UI布局 安康 优化整体UI布局 黄伟龙 预先合作编写测试用例 马佐霖 预先 ...
-
[k8s]prometheus+grafana监控node和mysql(普罗/grafana均vm安装)
https://github.com/prometheus/prometheus Architecture overview Prometheus Server Prometheus Server 负 ...
-
修复 Ubuntu 中“Unable to lock the administration directory (/var/lib/dpkg/)”
在 Ubuntu 或者它的衍生版如 Linux Mint(我已经作为日常工作使用的系统)中使用 apt-get 命令或者其相对更新的APT 管理工具时,你可能会在命令行中看到一个 unable to ...
-
Django重新整理4---ModelForm-set(批量处理数据)
1. #引用modelformset from django.forms.models import modelformset_factory #必须继承forms.ModelForm! class ...