CSS常用选择器

元素选择器

通配选择器

* { sRules }

选定文档所有的元素

/** 设置所有元素为红色 **/
* {
　　color: red;  
}
<div>我是div</div>
<p>我是p</p>

 

类型选择器

E { sRules }

选定指定的文档元素 E

/** 设置元素p为红色 **/
p {
　　color: red;  
}
<p>我是p</p>

 

类选择器

E.myclass { sRules }

选定 class 属性包含 myclass 的文档元素 E

/** 设置 calss="myclass" 的元素为红色 **/
.myClass {
　　color: red
}
<div class="myclass">我是div</div>

 

多类选择器

E.myclass.myotherclass { sRules }

选定 class 属性包含 myclass 以及 myotherclass 的文档元素 E

/** 设置 calss="myclass myotherclass" 的元素为红色 **/
.myClass.myotherclass {
　　color: red
}
<div class="myclass myotherclass">我是div</div>

 

ID选择器

E#myid { sRules }

选定 id 属性值为 myid 的文档元素 E

/** 设置 id="myid" 的元素为红色 **/
#myid {
　　color: red;
}
<div id="myid">我是div</div>

 

属性选择器

根据简单属性选择

E[attr] { sRules }

选定具有属性 attr 的文档元素 E

/** 设置有属性 id 的元素为红色 **/
div[id] {
　　color: red;
}
<div id="myid">我是div</div>

 

根据具体属性值选择

E[attr="val"] { sRules }

选定具有属性 attr 且属性值等于 val 的文档元素 E

/** 设置有属性 id 且值等于 "myid" 的元素为红色 **/
div[id="myid"] {
　　color: red;
}

/** 多个属性-值 **/
input[type="text"][class="text1"] {
　　width: 20px;
}
<div id="myid">我是div</div>
<input type="text" class="text1" />