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;
}
    
时间: 2024-10-26 00:53:46

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

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

id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义. 以下的样式规则应用于元素属性 id="para1": #para1 { text-align:center; color:red; } ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用. class 选择器 class 选择器用于描述一组元素的样式,clas

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

首先导入js文件 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

【CSS】一个元素同时使用多个类选择器(class selector)

CSS类选择器参考手册 一个元素同时使用多个类选择器 CSS中类选择器用点号表示.实际项目中一个div元素为了能被多个样式表匹配到(样式复用),通常div的class中由好几段组成,如<div class="user login">能被.user和.login两个选择器选中.如果这两个选择器中有相同的属性值,则该属性值先被改为.user中的值,再被改为.login中的值,即重复的属性以最后一个选择器中的属性值为准.测试如下: <style> .user { fo

css基础 a:link/visited... 链接伪类选择器

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

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;},这样就会给所

ID选择器和类选择器的合理使用

一.什么是ID选择器和类选择器 作为CSS选择器的最主要的两大选择器:ID选择器主要指的是通过DOM(Document Object Model)节点的ID选取节点,例如代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>ID选择器</title> 6 <style type="text/css"

CSS 类选择器(四)

一.类选择器 类选择用使用"."(英文点号)进行标识,后面紧跟类名 如: .red{color:red;} 类样式可以应用于文档中的多个元素,这体现了CSS代码的可重用性,帮助用户简化页面控制. 二.类选择器与标签选择器 类选择器和标签选择器都具有一对多的特性,即一个样式可以控制多个元素对象的显示效果. 注意事项: 与标签选择器相比,类选择器具有更好的适应性和灵活性,因为可以指定类的样式所应用的元素对象范围 与类选择器相比,标签选择器具操作简单.定义方便的优势,因为不需要为每个元素都定

CSS 类选择器

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

CSS中伪类选择器及伪元素

1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:visited{color:#FF0000;text-decoration:none} a:hover{color:#FF0000;text-decoration:none} a:active{color:#FF0000;text-decoration:none} 2.伪元素选择器 伪元素选择器不是针对真