今天看到有网站使用.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>
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/
时间: 2024-08-01 22:44:59