属性选择器，字面意思就是根据标签中的属性，选中当前的标签。

属性选择器 通常在表单控件中 使用比较多

根据属性查找

/*用于选取带有指定属性的元素。*/
<!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>

前端 CSS的选择器 属性选择器的更多相关文章

  1. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  2. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  3. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  4. 第49天学习打卡（CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型）

    推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...

  5. CSS选择器之基本选择器+属性选择器

    1.1      id选择器 #main{ font-size:12px; margin:0; padding:0; } 其中的#main就是id选择器,用于选择HTML页面中id = "m ...

  6. CSS-id选择器-类选择器-属性选择器

    Css基础 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 每个属性有一个值.属性和值被冒号分开. 下 ...

  7. CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）

    1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ]   选择具有 att 属性的 E 元素   例如:input [ value ...

  8. HTML[2种特殊选择器]_伪类选择器&属性选择器

    本文介绍两种特殊的选择器 1.伪类选择器 2.属性选择器 1.伪类选择器 ...: nth-of -type (x) x为同类型兄弟元素中的排名 例如: <body> <ul> ...

  9. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

随机推荐

  1. PAT Basic 1032 挖掘机技术哪家强 (20 分)

    为了用事实说明挖掘机技术到底哪家强,PAT 组织了一场挖掘机技能大赛.现请你根据比赛结果统计出技术最强的那个学校. 输入格式: 输入在第 1 行给出不超过 1 的正整数 N,即参赛人数.随后 N 行, ...

  2. Nginx cpu亲和性调整

    意义 Nginx默认没有开启利用多核cpu,我们可以通过worker_processes指令来启动多个worker,但是worker最终运行在哪些cpu核上是系统层进行调度的:我们可以通过增加work ...

  3. Codeforces Round #573 (Div. 2) E. Tokitsukaze and Duel （博弈）

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  4. Codeforces Round #569 (Div. 2) 题解A - Alex and a Rhombus+B - Nick and Array+C - Valeriy and Dequ+D - Tolik and His Uncle

    A. Alex and a Rhombus time limit per test1 second memory limit per test256 megabytes inputstandard i ...

  5. pipeline语法学习日记

    1.pipeline 整合job的通用代码,比较基本 2.pipeline参数化构建

  6. NOIP2016 D2T1 组合数问题

    洛谷P2822 数学真重要啊…… 其实解这一题的关键就是组合恒等式:C(n,m)=C(n-1,m)+C(n-1,m-1),然后再知道组合数的矩阵(杨辉三角)和题中n,m的关系就很容易解决了(然而做这题 ...

  7. display:line-block

    1.那是因为第二个标签是inline-block,它的对齐方式是基线对齐,对齐的是第一个元素里面字的下划线,所以第二个元素的下边缘对齐的是1的下划线,只要在第二个元素里面加内容或者加个空格( )就可以 ...

  8. 1px像素问题（移动端经典问题）

    1.物理像素:移动设备出厂时,不同设备自带的不同像素,也称硬件像素: 逻辑像素:即css中记录的像素 在开发中,为什么移动端CSS里面写了1px,实际上看起来比1px粗:了解设备物理像素和逻辑像素的同 ...

  9. logstash+redis收集负载均衡模式下多台服务器的多个web日志

    一.logstash的简介 一般我们看日志来解决问题的时候要么 tail+grep 要么 把日志下载下来再搜索,可以应付不多的主机和应用不多的部署场景.但对于多机多应用部署就不合适了.这里的多机多应用 ...

  10. ViewContainerRef 动态创建视图

    Angular DOM 操作 相关的APIs和类: 查询DOM节点 template variable ref: 模版变量引用,相当于react中的ref ViewChild: 查询DOM,返回单个元 ...