组合使用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.class</div>
<br/>
<div >
<div class="class">
选择器#id .class
</div>
</div>
</body>

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

<style>
#one.two.three{
  color:red;
}
</style>
------------------------------------------------------------
<body>
<p >选择器是 #one.two.three</p>
</body>

二、什么场合下使用？

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

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

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

举个例子：

<style>
#header{
  color:red;
}
</style>
</head>
<body>
<p  >什么场合使用？</p>
</body>

组合使用css选择器

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

使用!import当然可以做到。

<style>
#header{
  color:red;
}
.override{
  color:black !important;
}
--------------------------------------
</head>
<body>
<p  >什么场合使用？</p>
</body>

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

<style>
#header{
  color:red;
}
#header.override{
  color:black;
}
-------------------------------------------------
</head>
<body>
<p  >什么场合使用？</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