css的选择器 - 技术栈

html 复制代码

<div>  
    <p>输入框2hhhhhhh</p>
    <input type="text" name="" id="input1" class="input2">  
    <p>输入框1</p>  
</div>

以上述代码为例

1.类选择器

html 复制代码

.input2 {  
        background-color: #f2f2f2; /* 浅灰色背景 */  
        border: 2px solid #007bff; /* 蓝色边框 */  
        color: #333; /* 字体颜色 */  
        font-size: 16px; /* 字体大小 */  
        padding: 10px; /* 内边距 */  
        border-radius: 5px; /* 边框圆角 */  
        width: 300px; /* 宽度 */  
        transition: border-color 0.3s; /* 平滑过渡效果 */  
    }

2.元素选择器

html 复制代码

input {  
    border: 1px solid #ccc;  
}

3.ID选择器

html 复制代码

#input1 {  
    border: 1px solid #ccc;  
}

4.后代选择器

html 复制代码

div input {  
    margin: 5px;  
}

5.子选择器

html 复制代码

div > input {  
    margin: 5px;  
}

6.兄弟选择器

相邻兄弟选择器

html 复制代码

.input2 + p {  
    color: red;  
}

通用兄弟选择器

html 复制代码

.input2 ~p{
    background-color: #c39494;
}

区别：

相邻兄弟选择器：选择紧接在另一个元素后的元素，且两者有相同的父元素
通用兄弟选择器：如果你想要选择input元素之后的所有<p>兄弟元素

7.属性选择器

1. 存在性属性选择器

这种选择器用于选择具有指定属性的元素，而不考虑属性的值。

html 复制代码

input[type] {  
    /* 选择所有具有type属性的input元素 */  
}

2. 精确值属性选择器

这种选择器用于选择具有指定属性且属性值完全等于给定值的元素。

html 复制代码

input[type="text"] {  
    /* 选择所有type属性值为"text"的input元素 */  
}

3. 空格分隔的属性选择器（子字符串匹配）

包含特定字符串：使用*=来选择属性值中包含指定子字符串的元素。

html 复制代码

input[name*="email"] {  
    /* 选择所有name属性值中包含"email"的input元素 */  
}

以特定字符串开头：使用^=来选择属性值以指定字符串开头的元素。

html 复制代码

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

以特定字符串结尾：使用$=来选择属性值以指定字符串结尾的元素。

html 复制代码

input[name$="number"] {  
    /* 选择所有name属性值以"number"结尾的input元素 */  
}

4. 特定值列表中的属性选择器

使用|分隔的值：这种选择器用于选择属性值由空格分隔的多个值之一与给定值相匹配的元素。但是，需要注意的是，这种用法主要是用于lang属性，并且在实际应用中可能不如其他选择器常见。

html 复制代码

p[lang|="en"] {  
    /* 选择lang属性值以"en"开头（可能后跟"-"）的<p>元素，但实际应用中较少见 */  
}

注意：|分隔符的使用主要是为了处理语言代码，如en-US，它表示美国英语。然而，在CSS中，这种选择器的使用并不广泛，且主要被设计为与lang属性一起使用。

5. 伪类与属性选择器的结合

属性选择器还可以与伪类选择器结合使用，以实现更复杂的样式效果。

html 复制代码

input[type="checkbox"]:checked + label {  
    /* 选择所有与已选中的checkbox相邻的label元素 */  
    font-weight: bold;  
}