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;  
}
相关推荐
coding随想4 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我32 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子37 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹40 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控