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;  
}
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js