組合使用css選擇器

starof發表於2015-04-24
CSS

今天看到有網站使用.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>
View Code

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/

 

相關文章