有些时候,我们可以将多个class选择器或者id选择器,html选择器的共同部分提取出来,写在一起,这样的好处是是可以简化css文件

1.首先我们先看一段代码.css,如下:

@charset "utf-8";
/* CSS Document */ /*招生广告*/ .ad_stu {
width: 136px;
height: 196px;
background-color: #FC7E8C;
margin: 5px 0 0 5px;
float: left;
} /*广告2*/
.ad_2 {
background: #7CF574;
height: 196px;
width: 457px;
float: left;
margin: 5px 0 0 6px;
} /*房地产广告*/
.ad_house {
background: #7CF574;
height: 196px;
width: 152px;
float: left;
margin: 5px 0 0 6px;
}

不能发现.ad_stu 、.ad_2 和.ad_house 包含很多修饰部分是相同的,这样写感觉很浪费,很不简洁,难道不可以把他们相同的部分统筹到一起吗?

答案当然是肯定的

2.解决方案如下:

@charset "utf-8";
/* CSS Document */ /*招生广告*/ .ad_stu {
width: 136px;
background-color: #FC7E8C;
margin: 5px 0 0 5px;
} /*广告2*/
.ad_2 {
background: #7CF574;
width: 457px;
margin: 5px 0 0 6px;
} /*房地产广告*/
.ad_house {
background: #7CF574;
width: 152px;
margin: 5px 0 0 6px;
} /*共同的部分*/
.ad_stu, .ad_2, .ad_house {
height: 196px;
float: left;
}

css笔记10:多个id选择器/类选择器包含相同部分问题的探讨的更多相关文章

  1. CSS标签选择器&类选择器

    基本选择器包括标签选择器.类选择器和ID选择器三类,其他选择器都是在这三类选择器的基础上组合形成 ##标签选择器 示例: <style type="text/css"> ...

  2. 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. 前端 CSS的选择器 基本选择器 类选择器

    类选择器 符号是.开头 然后类的名字 样式类名不要用数字开头(有的浏览器不认). 所谓类就是class,.class与id非常相似,任何标签都可以加类,但是类可以重复 通过样式类选择元素: 示例: & ...

  4. CSS学习(2)Id和Class选择器

    id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义. 以下的样式 ...

  5. CSS魔法堂:稍稍深入伪类选择器

    前言  过去零零星星地了解和使用:link.::after和content等伪类.伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分的整理. 伪类  伪类选择器实质上 ...

  6. 01.css选择器-->类选择器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jQuery easyUI id选择器 类选择器 标签选择器 属性选择器 及DOM对象和jQuery相互之间的转换

    首先导入js文件 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...

  8. HTML连载17-id选择器&类选择器

    一.问题:我们前面讲了标签选择器有一个缺陷就是它不加选择的把所有相同的标签全都变成统一样式,这对于我们个性化定制产生了阻碍,因此我们便引出了id选择器,来进行特别指定进行配置样式 二.id选择器 1. ...

  9. CSS的两个小知识点 伪类选择器和display:table-cell

    li:first-child {color:red} li:nth-child(3n) {color: red} 在对nth-child传参的时候,已经直接用公式,3n就表示3的倍数.多用伪类和伪元素 ...

随机推荐

  1. 暴雪hash算法

    你有一个非常大的字符串数组A,现在又有一个字符串B,需要你去检测B是否存在于A中.最简单粗暴的方法是遍历整个A,但是这个方法投入到实际应用时的运行速度是难以接受的.在没有与其他所有字符串比较前怎么知道 ...

  2. Tkinter教程之Frame篇

    本文转载自:http://blog.csdn.net/jcodeer/article/details/1811339 '''Tkinter教程之Frame篇'''#Frame就是屏幕上的一块矩形区域, ...

  3. URAL-1982 Electrification Plan 最小生成树

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1982 题意:无向图,给n个点,n^2条边,每条边有个一权值,其中有k个点有发电站,给出这 ...

  4. CentOS上firefox安装flash

    CentOS下firefox安装flash说明 CentOS下自带了firefox,但没有flash插件的,按它自己的提示安装不成功,需要手动安装,如下: 1.打开flash官网,http://lab ...

  5. Tomcat中配置JNDI数据源

    准备工作: Tomcat版本:tomcat6.0以上 下例中均使用MySQL数据库 将对应数据源的jar包和MySQL的驱动包拷贝至tomcat的lib文件夹下 一.全局数据源 1步骤一:配置 在to ...

  6. PID参数整定快速入门(调节器参数整定方法)

    PID调节器参数整定方法很多,常见的工程整定方法有临界比例度法.衰减曲线法和经验法.云润仪表以图文形式分别介绍调节器参数整定方法. 临界比例度法一个调节系统,在阶跃干扰作用下,出现既不发散也不衰减的等 ...

  7. poj 3041 Asteroids(最小点覆盖)

    http://poj.org/problem?id=3041 Asteroids Time Limit: 1000MS   Memory Limit: 65536K Total Submissions ...

  8. 用鼠标右键选择DataGridView单元格或行

    在datagirdview_cellmousedown事件中先将CurrentCell(或CurrentRow)的Selected属性设为false,然后将鼠标右键点击的单元格(或行)设为Curren ...

  9. [iOS UI进阶 - 4.0] 涂鸦app Demo

    A.需求 1.超简易画图,只有一种画笔 2.清屏功能 3.回退功能 4.保存功能 5.使用了cocos2D   code source: https://github.com/hellovoidwor ...

  10. 【Todo】ipcs命令学习

    可以先看这一篇 http://www.jb51.net/article/40805.htm