今天看到有网站使用.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{ 150px; height:50px; background-color: red; } #id .class{ 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 { 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优先级
资源链接：