[分享]CSS中 选择器的概念是什么

CSS中的选择器是指用来选择文档中元素的模式。“选择器”一词源于英文单词“selector”，它可以指代不同的CSS选择器类型。CSS选择器分为基本选择器、组合选择器和属性选择器三种类型，并且可以组合...

CSS中的选择器是指用来选择文档中元素的模式。“选择器”一词源于英文单词“selector”，它可以指代不同的CSS选择器类型。

CSS选择器分为基本选择器、组合选择器和属性选择器三种类型，并且可以组合使用。其中，基本选择器指的是常用的类型选择器，如“标签选择器”、“类选择器”、“ID选择器”等，用来选择HTML文档中的元素。

/* 标签选择器 */
p {
    color: red;
}
/* 类选择器 */
.intro {
    font-size: 16px;
}
/* ID选择器 */
#header {
    background-color: #eee;
} 

组合选择器指的是将多个基本选择器进行组合使用后，来选择文档中的元素，从而精确定位到想要的元素。

/* 子选择器 */
nav > ul {
    margin: 0;
}
/* 后代选择器 */
article p {
    line-height: 1.5;
}
/* 相邻兄弟选择器 */
h2 + p {
    color: blue;
}
/* 通用兄弟选择器 */
h2 ~ p {
    color: green;
} 

属性选择器则是根据元素的属性和属性值来选择文档中的元素。

/* 属性选择器 */
a[href="https://www.google.com/"] {
    color: red;
}
/* 子串值选择器：选中具有class属性，且"class"属性值中包含"btn"字符串的元素 */
[class*="btn"] {
    border: 1px solid #000;
}
/* 开始值选择器：选中具有class属性，且"class"属性值以"btn"字符串开头的元素 */
[class^="btn"] {
    text-decoration: underline;
}
/* 结尾值选择器：选中具有class属性，且"class"属性值以"btn"字符串结尾的元素 */
[class$="btn"] {
    background-color: #eee;
} 

综合运用这些选择器可以轻松地进行网页布局和样式的控制，让页面呈现出更加炫酷的效果。所以当我们在编写CSS样式表时，选择器的灵活使用就变得尤为重要。