css属性选择器有几种

在CSS中，有许多种选择器可用来选择HTML元素。比较常见的选择器包括：元素选择器、ID选择器、类选择器和属性选择器等。其中，属性选择器可以进一步细化选择范围。那么，属性选择器具体有哪些种类呢？

[attribute] {
    /* 选择具有attribute属性的元素 */
}

最简单的属性选择器就是选择所有具有某个属性的元素，比如选择所有的标题元素：

h1[class] {
    /* 选择所有h1元素中包含class属性的元素 */
}

[attribute=value] {
    /* 选择具有attribute属性，并且属性值为value的元素 */
}

第二种属性选择器可以直接指定属性值，比如选择所有class属性值为"title"的元素：

[class="title"] {
    /* 选择所有class属性值为"title"的元素 */
}

[attribute~=value] {
    /* 选择具有attribute属性，并且属性值包含value单词的元素 */
}

第三种属性选择器是选择属性值包含特定单词的元素，比如选择所有class属性值包含"content"的元素：

[class~="content"] {
    /* 选择所有class属性值包含"content"的元素 */
}

[attribute|=value] {
    /* 选择具有attribute属性，并且属性值以value开头的元素 */
}

第四种属性选择器是选择属性以某个值开头的元素，比如选择lang属性值为"zh"的元素：

[lang|="zh"] {
    /* 选择所有lang属性值以"zh"开头的元素 */
}

[attribute^=value] {
    /* 选择具有attribute属性，并且属性值以value开头的元素 */
}

第五种属性选择器是选择属性以某个值开头的元素，比如选择所有class属性值以"main"开头的元素：

[class^="main"] {
    /* 选择所有class属性值以"main"开头的元素 */
}

[attribute$=value] {
    /* 选择具有attribute属性，并且属性值以value结尾的元素 */
}

第六种属性选择器是选择属性以某个值结尾的元素，比如选择所有href属性值以".pdf"结尾的元素：

[href$=".pdf"] {
    /* 选择所有href属性值以".pdf"结尾的元素 */
}

[attribute*=value] {
    /* 选择具有attribute属性，并且属性值包含value的元素 */
}

第七种属性选择器是选择属性值包含特定字符串的元素，比如选择所有title属性值包含"book"的元素：

[title*="book"] {
    /* 选择所有title属性值包含"book"的元素 */
}

上述属性选择器可以通过结合多种属性和关系符号来进行更复杂的选择。同时，它们也可以与其他类型的选择器结合使用，灵活应用以达到最佳效果。