今天看到有网站使用.classA.classB类似的选择器，不知道是否有人和我一样没有用过，所以了解一下，以下记录。

一、用法介绍

在css中.classA.classB指的是一个元素，同时满足classA和classB，即(class="classA classB")

<style>

.classA.classB{

  border:1px solid red;

}

.classa .classb{

  border:1px solid blue;

}

</style>

------------------------------------------------

<body>

<input type="text" class="classA classB" value="选择器为.classA.classB"/>

<div class="classa">

  <input class="classb" type="text" value="选择器为.classa .classb" />

</div>

</body>

id选择器也是类似的：

<style>

#id.class{

  width:150px;

  height:50px;

  background-color: red;

}

#id .class{

  width:150px;

  height:50px;

  background-color: green;

}

</style>

--------------------------------------------------------

<body>

<div id="id" class="class">选择器#id.class</div>

<br/>

<div id="id">

<div class="class">

选择器#id .class

</div>

</div>

</body>

同时使用多个选择器的组合同理。

<style>

#one.two.three{

  color:red;

}

</style>

------------------------------------------------------------

<body>

<p id="one" class="two three">选择器是 #one.two.three</p>

</body>

二、什么场合下使用？

类似#id.class这样的写法真的可取吗？id选择器本来就是独一无二的，为什么还要和class选择器组合使用呢？

这种写法在有些场合确实是有它的用武之地的。

1、覆盖已有样式时可以使用：

举个例子：

<style>

#header{

  color:red;

}

</style>

</head>

<body>

<p id="header" >什么场合使用？</p>

</body>

现在的文章颜色为红色，想将其变为黑色怎么办？

使用!import当然可以做到。

<style>

#header{

  color:red;

}

.override{

  color:black !important;

}

--------------------------------------

</head>

<body>

<p id="header" class=" override" >什么场合使用？</p>

</body>

但是!import能不用就不要用，此时使用#header.override更好一点。

<style>

#header{

  color:red;

}

#header.override{

  color:black;

}

-------------------------------------------------

</head>

<body>

<p id="header" class=" override" >什么场合使用？</p>

</body

“百度一下”就是用这种组合使用css的方法实现的。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>starof test demo</title>

<style type="text/css">

input {

  border: 0;

  padding: 0;

}

.s_btn {

    width: 100px;

    height: 36px;

    color: white;

    font-size: 15px;

    letter-spacing: 1px;

    background: #3385ff;

    border-bottom: 1px solid #2d78f4;

    outline: medium;

    *border-bottom: 0;

    -webkit-appearance: none;

    -webkit-border-radius: 0

}

.s_btn.btnhover {

    background: #317ef3;

    border-bottom: 1px solid #2868c8;

    *border-bottom: 0;

    box-shadow: 1px 1px 1px #ccc

}

</style>

</head>

<body>

<input type="submit"  value="百度一下" class="bg s_btn"> hover效果为

<input type="submit"  value="百度一下" class="bg s_btn btnhover">

</body>

</html>

2、 oocss样式

还有一种情况，就是下面这种oocss样式。

<style>

.box {

  width: 100px;

  height: 100px;

  float: left;

  margin:0 10px 10px 0;

}

.red{

  color:red;

  background-color: #f0C1C1;

}

.blue{

  color: blue;

  background-color: #6FADF8;

}

.green{

  color: green;

  background-color: #75C372;

}

.border{

  border: 5px solid black;

}

</style>

---------------------------------------------------------

<body>

<div class="red border box">red border box</div>

<div class="blue border box">blue border box</div>

<div class="green border box">green border box</div>

<div class="red box">red box</div>

<div class="blue box">blue box</div>

<div class="green box">green box</div>

<div class="border box">border box</div>

</body>

如果现在有一个需求说：黑色的边框并不适合红色的盒子，需要把红色盒子的边框改为红色，这时候就可以使用.red.border选择器了。

.red.border{

  border-color:red;

}

实际上，类似.classA.classB这样的用法之所以能覆盖原有样式，就是因为它改变了优先级。

关于优先级了解更多可参考：css优先级

资源链接：

https://css-tricks.com/multiple-class-id-selectors/

组合使用css选择器的更多相关文章

  1. css选择器四大类：基本、组合、属性、伪类

    什么是选择器?选择器的作用是通过它可以找到元素,把css样式传递给元素!css选择器主要分为:基本选择器.属性选择器.组合选择器与伪类选择器四个大类! css基本选择器 基本选择器又分为:*通配符.标 ...

  2. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

  3. 前端知识之CSS(1)-css语法、css选择器（属性、伪类、伪元素、分组与嵌套）、css组合器

    目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.c ...

  4. js,jq,css选择器

    js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...

  5. CSS选择器小结

    在CSS3中是提倡使用选择器来将样式与元素直接绑定在一起的. 网页开发过程中,我们需要定义很多class来应用到不同的元素上,由于class本身是没有语义而且是可以复用的,所以过度使用class会使得 ...

  6. CSS系列：CSS选择器

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...

  7. CSS选择器 转

    来自于:http://www.cnblogs.com/webblog/archive/2009/08/07/1541005.html 最近在研究jQuery的选择器,大家知道jQuery的选择器和cs ...

  8. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  9. CSS和CSS选择器

    一:CSS CSS有三种书写形式(优先级从高到低) 1)行内样式:(内联样式)直接在标签style属性中书写 2)内页样式:在本网页的style标签中书写 3)外部样式:在单独的CSS文件中书写,然后 ...

随机推荐

  1. Chance – 功能强大的 JavaScript 随机数生成类库

    Chance 是一个基于 JavaScript 的随机数工具类.可以生成随机数字,名称,地址,域名,邮箱,时间等等,几乎网站中使用的任何形式的内容都能够生成.这个随机数工具可以帮助减少单调的测试数据编 ...

  2. 【HTML5】浅析html使用SSE（Server-Sent Events）连接JSP

    目录结构: // contents structure [-] 关于SSE的一些话 什么是SSE SSE的浏览器支持情况 SSE的工作机制 使用SSE连接JSP文件 HTMl页面 服务器端 错误 错误 ...

  3. windows中安装node.js和测试

    首先下载node.js安装包:下载页面:http://down.keleyi.com/goto/node.js.htm 选择windows msi安装包,根据自己操作系统选择32位或者64位安装包.然 ...

  4. iOS 代理反向传值

    在上篇博客 iOS代理协议 中,侧重解析了委托代理协议的概念等,本文将侧重于它们在开发中的应用. 假如我们有一个需求如下:界面A上面有一个button.一个label.从界面A跳转到界面B,在界面B的 ...

  5. 分分钟学会系列：mac地址泛洪攻击实验

    一.实验目的: 通过实战深入理解mac地址泛洪攻击的原理. 二.实验原理: 交换机中有一张非常重要的表,叫做mac表,这个表是一个硬件组成的表,主要是完成快速转发.mac表有大小限制,不同的交换机的m ...

  6. Android 在不同Actitity之间数据传递

    本文实现一个简易的人品计算器来实践在不同Actitity之间数据传递 intent的数据传递 从A界面打开B界面 把A界面的数据传递给B界面 1. intent.setData(uri) -- int ...

  7. 在Window 下安装Redis数据库

    小Alan国庆后就要回深圳找工作了,最近在复习工作所需的相关的技术,今天刚好复习到redis,redis是一个非关系型(NoSql)数据库,采用key-value的方式存储数据,她可以保存字符串(St ...

  8. 从DACPAC文件中读取元数据

    SQL数据库项目生成时会生成dacpac文件,可从中读出所需的元数据,进行一些转换(如生成数据字典)   var model = new TSqlModel(@"D:\kljob\CardL ...

  9. 解决Windows 8系统假死的方法

    大部分半卡死的现象是因为Dynamic Tick的一个Bug.Dynamic Tick是NT 6.2内核的一个新功能(其实Linux早就有了),原理的话大概是在空闲的时候把CPU完全暂停,来节省电量. ...

  10. 关于激活Bentley软件详细步骤介绍（再补充一个）

    在安装完ContextCapture软件之后,大家怀着迫不及待的心情双击了运行快捷键.但是很遗憾的是,会产生下面的提示窗口: 也许大家并不在意,就觉得关掉这个窗口不就行了.然而,头疼的问题来了.这个窗 ...