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

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

根据属性查找

/*用于选取带有指定属性的元素。*/
<!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. 最长公共子序列板/滚动 N^2

    #include <bits/stdc++.h> using namespace std; int main() { ][],t; ],b[]; bool now,pre; scanf(& ...

  2. 表达式，数据类型和变量(Expressions，Data Types & Variables)

    (一)表达式: 1)4+4就是表达式,它是程序中最基本的编程指令:表达式包含一个值(4)和操作符号(+),然后就会计算出一个单独的值; 2)一个单独的值没有包含操作符号也可以叫表达式,尽管它只计算它本 ...

  3. 配置本地yum仓库

        前言 我们知道yum工具是基于rpm的,其一个重要的特性就是可以自动解决依赖问题,但是yum的本质依旧是把后缀名.rpm的包下载到本地,然后按次序安装之.但是每次执行yum install x ...

  4. 在浏览器下载pdf,或者txt文档是会直接打开

    window.location.href = url会直接打开,解释大概是因为浏览器自身可以解析.pdf或者txt.解决方法如下: 本来就要用a标签里面加上download属性的,结果发现不行,就算了 ...

  5. darknet-yolov3模型预测框size不正确的原因

    问题描述:预测框的中心位置正常,但是预测的框的width和height不正常. 解决方法:使得训练的配置cfg和测试中cfg的输入width, height, anchorbox保持一致! 问题是我在 ...

  6. linux运维、架构之路-linux基础优化

    1.查看linux版本 cat /etc/redhat-release #CentOS release 6.9 (Final) ————>查看版本号 uname -m #x86_64 ————& ...

  7. lua脚本入门

    在网上下载一些工程,里边常常存在.lua .sh .in .cmake .bat等文件 今天专门查了一下相关文件的作用 .sh 通常是linux.unix系统下的脚本文件(文本文件),用于调用默认的s ...

  8. mysql PRIMARY KEY约束 语法

    mysql PRIMARY KEY约束 语法 作用:PRIMARY KEY 约束唯一标识数据库表中的每条记录. 环形直线电机 说明:主键必须包含唯一的值.主键列不能包含 NULL 值.每个表都应该有一 ...

  9. Git 使用的问题总结

    1.git stash pop 显示 xxx already exists, no checkout 当我们先使用 git stash save -u '保存信息说明' 来储藏更改,然后拉取代码 gi ...

  10. 【CF1249D】Too Many Segments（贪心，set，vector）

    题意:给定n条线段和覆盖上限k,每条线段都覆盖了区间内的整点 问最少删掉几条线段能使所有的整点都被覆盖不超过k次 k<=n<=2e5,l[i],r[i]<=2e5 思路:比赛时候不会 ...