前端 CSS的选择器 属性选择器
2024-09-03 10:29:34
属性选择器，字面意思就是根据标签中的属性，选中当前的标签。
属性选择器 通常在表单控件中 使用比较多
根据属性查找
/*用于选取带有指定属性的元素。*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style type="text/css">
label[for]{
color: red;
}
</style> </head>
<body>
<div>
<form>
<div>
<label for="user">用户名</label>
<input type="text" id="user">
</div> </form>
</div>
</body>
</html>
根据属性和值查找
/*用于选取带有指定属性和值的元素。*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style type="text/css">
label[for="user"]{
color: red;
}
</style> </head>
<body>
<div>
<form>
<div>
<label for="user">用户名</label>
<input type="text" id="user">
</div> </form>
</div>
</body>
</html>
表单常用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<style type="text/css">
input[type="text"]{
color: red;
}
</style> </head>
<body>
<div>
<form>
<div>
<label for="user">用户名</label>
<input type="text" id="user">
</div> </form>
</div>
</body>
</html>
最新文章
- idea fect
- CentOS 7 学习笔记（一）时间管理
- scikit-learn一般实例之一:绘制交叉验证预测
- SQL Server基础知识
- JavaScript使用XMLHttpRequest 發送GET/Post 請求
- afx , afxMessageBox , MessageBox
- Maven打jar包
- Java-马士兵设计模式学习笔记-总结
- mybatis 中mapper 的namespace有什么用
- bzoj 3932 [CQOI2015]任务查询系统（主席树）
- Android 开发笔记 “Sqlite数据库删除”
- CPU卡
- vue-过滤器filter
- SmartSql V3 重磅发布
- Elasticsearch 通关教程（四）： 分布式工作原理
- learning websocket protocol
- .Net使用Redis详解之ServiceStack.Redis（七） 转载https://www.cnblogs.com/knowledgesea/p/5032101.html
- day 7-6 多线程及开启方式
- Android触摸事件(一)-TouchEventHelper
- django-registration