今天看到有网站使用.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. ScrollMe – 在网页中加入各种滚动动画效果

    ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...

  2. jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)

    最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...

  3. Asp.net web hosting

      start /D "C:\Program Files\Common Files\Microsoft Shared\DevServer\10.0" /B WebDev.WebSe ...

  4. Oracle11g 统计信息——统计信息自动收集任务

    参考文献: Oracle11g 统计信息(一)-----统计信息自动收集任务 背景: 在使用cacti监控oracle数据库IO的时候发现每天晚上10点钟的时候oracle数据库读写明显增加,如下图所 ...

  5. Android提交数据到JavaWeb服务器实现登录

    之前学习Android提交数据到php服务器没有成功,在看了两三个星期的视频之后,现在终于实现了与服务器的交互.虽然完成的不是PHP端的,但是在这个过程还是学到了不少东西的.现在我先来展示一下我的成果 ...

  6. UIApplicationDelegate

    App受到干扰时,UIApplication会通知它的delegate对象,让delegate处理系统事件. 项目中的AppDelegate已经遵守了UIApplicationDelegate协议   ...

  7. 听云数据库管理平台NetopGO简介

    ➠更多技术干货请戳:听云博客 断断续续写了将近一个月,听云第一版数据库管理平台终于写完了,期间来来回回的改了好多次小毛病,现在已经部署到生产环境上去了. 在刚开始的时候,后端的数据库集群只有10多个节 ...

  8. 【Android】不依赖焦点和选中的TextView跑马灯

    前言 继承TextView,并仿照源码修改而来,主要是取消了焦点和选中了判断,也不依赖文本的宽度. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民 ...

  9. UITextField限制中英文字数和光标定位以及第三方输入限制问题

    先自定义一个UITextField的子类HLNavTextField,在控制器里调用子类的- (void)limitHansLength:(int)hans otherLength:(int)othe ...

  10. linux下安装opcache扩展

    linux下安装opcache扩展   参考:http://www.php.net/manual/zh/opcache.installation.php 1 2 3 4 5 6 7 wget http ...