css笔记10:多个id选择器/类选择器包含相同部分问题的探讨
有些时候,我们可以将多个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选择器/类选择器包含相同部分问题的探讨的更多相关文章
- CSS标签选择器&类选择器
基本选择器包括标签选择器.类选择器和ID选择器三类,其他选择器都是在这三类选择器的基础上组合形成 ##标签选择器 示例: <style type="text/css"> ...
- 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 前端 CSS的选择器 基本选择器 类选择器
类选择器 符号是.开头 然后类的名字 样式类名不要用数字开头(有的浏览器不认). 所谓类就是class,.class与id非常相似,任何标签都可以加类,但是类可以重复 通过样式类选择元素: 示例: & ...
- CSS学习(2)Id和Class选择器
id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义. 以下的样式 ...
- CSS魔法堂:稍稍深入伪类选择器
前言 过去零零星星地了解和使用:link.::after和content等伪类.伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分的整理. 伪类 伪类选择器实质上 ...
- 01.css选择器-->类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery easyUI id选择器 类选择器 标签选择器 属性选择器 及DOM对象和jQuery相互之间的转换
首先导入js文件 <%@ page language="java" contentType="text/html; charset=UTF-8" page ...
- HTML连载17-id选择器&类选择器
一.问题:我们前面讲了标签选择器有一个缺陷就是它不加选择的把所有相同的标签全都变成统一样式,这对于我们个性化定制产生了阻碍,因此我们便引出了id选择器,来进行特别指定进行配置样式 二.id选择器 1. ...
- CSS的两个小知识点 伪类选择器和display:table-cell
li:first-child {color:red} li:nth-child(3n) {color: red} 在对nth-child传参的时候,已经直接用公式,3n就表示3的倍数.多用伪类和伪元素 ...
随机推荐
- Tkinter教程之Event篇(3)
本文转载自:http://blog.csdn.net/jcodeer/article/details/1823550 '''Tkinter教程之Event篇(3)''''''11.两个事件同时绑定到一 ...
- 最长公共子序列LCS
LCS:给出两个序列S1和S2,求出的这两个序列的最大公共部分S3就是就是S1和S2的最长公共子序列了.公共部分 必须是以相同的顺序出现,但是不必要是连续的. LCS具有最优子结构,且满足重叠子问题的 ...
- 通过一次实验来了解HTML5的 Web Worker
web worker 是运行在后台的 JavaScript,不会影响页面的性能. 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 Ja ...
- UVALive 7464 Robots (贪心)
Robots 题目链接: http://acm.hust.edu.cn/vjudge/contest/127401#problem/K Description http://7xjob4.com1.z ...
- Codeforces 600B Queries about less or equal elements(二分查找)
Description You are given two arrays of integers a and b. For each element of the second array bj yo ...
- Linux 系统监控和诊断工具:lsof
1.lsof 简介 lsof 是 Linux 下的一个非常实用的系统级的监控.诊断工具. 它的意思是 List Open Files,很容易你就记住了它是 “ls + of”的组合~ 它可以用来列出被 ...
- python中列表,元组,字符串如何互相转换
python中有三个内建函数:列表,元组和字符串,他们之间的互相转换使用三个函数,str(),tuple()和list(),具体示例如下所示: >>> s = "xxxxx ...
- opencv 矩阵的相似性对比 (图片之间比较)
测试图片: code: #include <opencv\cv.h> #include <opencv\highgui.h> #include <opencv\c ...
- 负载均衡session共享问题
负载均衡+session共享(memcached-session-manager实现) http://www.cnblogs.com/youzhibing/p/5094460.html http:// ...
- sql:[dbo].[smt_MES_RptProductDaily] 生产日报表
USE [ChangHongMES_904]GO/****** Object: StoredProcedure [dbo].[smt_MES_RptProductDaily] Script Date: ...