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

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

根据属性查找

/*用于选取带有指定属性的元素。*/
<!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. 树状数组求LIS模板

    如果数组元素较大,需要离散化. #include <iostream> #include <cstdio> #include <cstring> #include ...

  2. Codeforces Round #567 (Div. 2)B. Split a Number (字符串，贪心)

    B. Split a Number time limit per test2 seconds memory limit per test512 megabytes inputstandard inpu ...

  3. sshfs 挂载远程文件夹

    1 安装 # yum install sshfs # dnf + releases] $ sudo apt-get install sshfs [On Debian/Ubuntu based syst ...

  4. php内置函数分析array_diff()

    PHP_FUNCTION(array_diff) { zval *args; int argc, i; uint32_t num; HashTable exclude; zval *value; ze ...

  5. 注册和登录（关于Cookie）

    前记 我将描述一下登陆和注册之间发生了什么,将场景分为客户端和服务端,服务器是Node.JS,客户端是由JS写的 注册 1.注册请求 这是由客户端发送一个POST请求给服务端,其中包含了用户名和密码 ...

  6. connect to SQL Server in python on centos

    在centos 6.5 下python使用pyodbc连接sql server 报错: [unixODBC][Driver Manager]Can't open lib 'SQL Server'... ...

  7. 利用雅虎ycsb对cassandra做性能测试

    准备: 环境: 两台虚拟机:ip:192.168.138.128/129;配置:2核4G: 版本:apache-cassandra-3.10    ycsb-cassandra-binding-0.1 ...

  8. LeetCode--139--单词拆分(python)

    给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词. 说明: 拆分时可以重复使用字典中的单词.你可以假设字典中没有重复的 ...

  9. C#与java的区别（继承，接口实现，指针，编译后形式，异常处理几个方面比较区别）

  10. python 获取list某个元素下标

    index() 函数用于从列表中找出某个值第一个匹配项的索引位置. list.index(x, start, end) #start end 指示搜索的起始和结尾位置,缺省为整个数组 x-- 查找的对 ...