您的位置:

CSS选择器定位元素详解

一、基础选择器

基础选择器是CSS选择器中最简单的一种,通过基础选择器可以选定HTML中所有的元素或某一特定元素。

1. 通配符选择器

通配符选择器“*”可以匹配HTML文档中所有的元素。

    
/* 选中所有元素 */
* {
    color: red;
}
    

2. 元素选择器

元素选择器通过HTML元素名来选定元素,可以使用标签名、类名或ID名来进行选择。

    
/* 选中所有p标签 */
p {
    color: red;
}

/* 选中class为foo的元素 */
.foo {
    color: red;
}

/* 选中id为bar的元素 */
#bar {
    color: red;
}
    

3. 属性选择器

通过属性选择器,我们可以根据属性的存在和属性值的匹配性来选定元素。

    
/* 选中拥有title属性的所有元素 */
[title] {
    color: red;
}

/* 选中class为bar的title属性 */
[title="bar"] {
    color: blue;
}
    

4. 伪类选择器

伪类选择器用于选中元素的特殊状态,如hover、active状态。

    
/* 鼠标悬停时改变a标签的背景颜色 */
a:hover {
    background-color: yellow;
}
/* 点击a标签时改变a标签的颜色 */
a:active {
    color: blue;
}
    

二、组合选择器

组合选择器是多个选择器组合使用的产物,主要包括字选择器、后代选择器、相邻兄弟选择器和普通兄弟选择器。

1. 后代选择器(Space Selector)

后代选择器用于选择元素的后代元素。

    
/* 选中ul元素下的所有li元素 */
ul li {
    color: red;
}
    

2. 子选择器(Child Selector)

子选择器仅选择作为指定元素子元素的选定元素。

    
/* 选中nav元素下的所有直接子元素 */
nav > * {
    background-color: yellow;
}
    

3. 相邻兄弟选择器(Adjacent Sibling Selector)

相邻兄弟选择器选择元素后面的相邻兄弟元素。

    
/* 选中class为foo的元素紧随在class为bar的元素后面的所有元素 */
.bar + .foo {
    color: red;
}
    

4. 普通兄弟选择器(General Sibling Selector)

普通兄弟选择器也选择后面的兄弟元素,但是可以选择所有后面的满足条件的兄弟元素。

    
/* 选中在class为bar的元素后面的所有class为foo的元素 */
.bar ~ .foo {
    color: red;
}
    

三、复合选择器

复合选择器是多个选择器组合而成的,是CSS选择器中最常用的选择器。

1. 复合选择器

    
/* 选中所有class为foo且是p标签的元素 */
p.foo {
    color: red;
}

/* 选中所有class为foo和class为bar的元素 */
.foo.bar {
    color: red;
}

/* 选中class为foo的div元素中class为bar的p元素 */
div.foo p.bar {
    color: red;
}
    

2. 多重选择器

多重选择器是指同时作用于多个选择器的一种选择器。

    
/* 选中所有p和ul元素 */
p, ul {
    color: red;
}

/* 选中class为foo和class为bar的所有元素 */
.foo, .bar {
    color: red;
}
    

四、伪元素选择器

伪元素选择器用于选中元素文本的某一部分,并对其进行样式设置。

1. ::after伪元素

::after伪元素用于在元素内容之后添加内容,并在CSS中进行样式设置。

    
/* 在p元素内容后添加"(已结束)" */
p::after {
    content: "(已结束)";
    color: red;
}
    

2. ::before伪元素

::before伪元素和::after伪元素类似,但是是在元素内容之前添加内容。

    
/* 在h1元素内容前添加"#" */
h1::before {
    content: "#";
    color: blue;
}
    

五、总结

CSS选择器是网页开发的重要工具之一,合理运用选择器能够提高CSS样式的效率,减少代码量。在实际开发中,我们需要综合运用各种选择器,用最简洁的代码实现最复杂的样式。