CSS选择器详解

时间：2021-05-24 04:36:27

本文全部基于HTML进行讲解，没有考虑XML，XHTML的情况，请知悉。

一、元素选择器

通配选择器

语法：

* { sRules }

说明：

选定文档所有的元素

示例：

* {
　　color: red;  
}
 
<div>我是div</div>

元素选择器

语法：

E { sRules }

说明：

选定指定的文档元素E

示例：

p {
　　color: red;  }
 
<p>我是p</p>

二、类选择器和ID选择器

类选择器

语法：

E.myclass { sRules }

说明：

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

示例：

.myClass {
　　color: red
}
 
<div class="myclass">我是div</div>

多类选择器

语法：

E.myclass.myotherclass { sRules }

说明：

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

示例：

.myClass.myotherclass {
　　color: red
}
 
<div class="myclass myotherclass">我是div</div>

ID选择器

语法：

E#myid { sRules }

说明：

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

示例：

#myid {
　　color: red;
}
 
<div id="myid">我是div</div>

三、属性选择器

根据简单属性选择

语法：

E[attr] { sRules }

说明：

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

示例：

div[id] {
　　color: red;
}
 
<div id="myid">我是div</div>

根据具体属性值选择

语法：

E[attr="val"] { sRules }

说明：

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

示例：

div[id="myid"] {
　　color: red;
}

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

根据部分属性值选择

语法：

E[attr~="val"] { sRules }

说明：

选定具有属性attr且属性值为一用空格分隔的字词列表，其中一个等于val（包含只有一个值且该值等于val的情况）的文档元素E

示例：

div[class~="div1"] {
　　color: red;
}
 
<div calss="div1">我是div</div>
<div class="div1 header">我是div</div>

语法：

E[attr^="val"] { sRules }

说明：

选定具有属性attr且属性值以val开头的字符串的文档元素E

示例：

div[class^="head"] {
　　color: red;
}
 
<div calss="headClass">我是div</div>

语法：

E[attr$="val"] { sRules }

说明：

选定具有属性attr且属性值以val结尾的字符串的文档元素E

示例：

div[class$="Class"] {
　　color: red;
}
 
<div calss="headClass">我是div</div>

语法：

E[attr*="val"] { sRules }

说明：

选定具有属性attr且属性值包含val的字符串的文档元素E

示例：

div[class*="Div"] {
　　color: red;
}
 
<div calss="headDivClass">我是div</div>

语法：

E[attr|="val"] { sRules }

说明：

选定具有属性attr且属性值以val开头并用连接符"-"分隔的字符串（包含属性值只有val的情况）的文档元素E

示例：

div[class|="head"] {
　　color: red;
}
 
<div calss="head-class">我是div</div>

四、关系选择器

后代选择器

语法：

E F { sRules }

说明：

选定文档元素E所有的后代元素F，包含所有子孙

示例：

/* 选中后代所有的p */
div p {　　color: red;
}
 
<div>
　　<p>我是段落1</p>
　　<div>
　　　　<p>我是段落2</p>
　　</div>
</div>

子代选择器

语法：

E>F { sRules }

说明：

选定文档元素E所有的子代元素F，不包含孙代元素

示例：

/* 选中子代的p，但选中不了孙代的p */
div>p {　　color: red;
}
 
<div>
　　<p>我是段落1</p>
　　<div>
　　　　<p>我是段落2</p>
　　</div>
</div>

相邻选择器

语法：

E+F { sRules }

说明：

选定文档元素E之后且同属一个父元素的相邻兄弟元素F

示例：

/* 只能选中h1相邻的p */
h1>p {
　　color: red;
}
 
<div>
　　<h1>我是h1</h1>
　　<p>我是段落1</p>
　　<p>我是段落2</p>
</div>

兄弟选择器

语法：

E~F { sRules }

说明：

选定文档元素E之后且同属一个父元素的兄弟元素F

示例：

/* 选中h1之后所有的p */
h1>p {
　　color: red;
}
 
<div>
　　<h1>我是h1</h1>
　　<p>我是段落1</p>
　　<p>我是段落2</p>
</div>

四、伪类和伪元素选择器

伪类选择器

语法：

a:link { sRules }

说明：

设置超链接a未被访问前的样式

示例：

a:link {
　　color: blue;
}
 
<a href="http://i.cnblogs.com"></a>

语法：

a:visited { sRules }

说明：

设置超链接a已经被访问后的样式

示例：

a:link {
　　color: red;
}
 
<a href="http://i.cnblogs.com"></a>

语法：

E:focus { sRules }

说明：

设置元素E在成为输入焦点（该元素的onfocus事件发生）时的样式

示例：

a:focus {
　　color: black;
}
 
<a href="http://i.cnblogs.com"></a>

语法：

E:hover { sRules }

说明：

设置元素E在鼠标悬停时的样式

示例：

a:hover {
　　color: red;
}
 
<a href="http://i.cnblogs.com"></a>

语法：

E:active { sRules }

说明：

设置元素E在被用户激活（在鼠标点击与释放之间发生的事件）时的样式

示例：

a:active{
　　color: green;
}
 
<a href="http://i.cnblogs.com"></a>

以上五种伪类选择器同时用在a超链接时，各伪类需按特定的顺序书写才能生效，保证各浏览器具有相同的表现。正确的顺序为：link - visited - focus - hover - active

语法：

E:lang(lang) { sRules }

说明：

选定使用特殊语言的元素E

示例：

p:lang(zh-cn) {
    color: #f00;
}
p:lang(en) {
    color: #090;
}
 
<p lang="zh-cn">我是中文</p>
<p lang="en">i am English</p>

 更多关于CSS选择器可看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Type_selectors

标签：

相关文章