2021-06-21属性选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性选择器</title><style>.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: blue;text-align: center;color: gainsboro;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}a[href$=pdf]{background: yellow;}</style>
<!--a[id]{
=是绝对等于
*=包含这个属性值
^= 以这个开头的元素
$= 以这个结尾的的元素background: yellow; 选择所有ID属性的元素}a[id=first]{background: yellow;选择ID属性first的元素}a[class*="links"]{background: yellow; 选择含有links标签的元素}a[href^=https]{background: yellow; 选择以https开头的元素}-->
</head>
<body>
<p class="demo"><a href="https://www.baidu.com/?tn=98010089_dg&ch=2" class="links item first" id="first">1</a><a href="" class="links item act" target="_blank" title="test">2</a><a href="https://user.qzone.qq.com/287195985/infocenter" class="links item ">3</a><a href="123.html" class="links item ">4</a><a href="123.png" class="links item " >5</a><a href="123.jpg" class="links item ">6</a><a href="abc.pdf" class="links item ">7</a><a href="cbd.pdf" class="links item ">8</a><a href="abc.doc" class="links item ">9</a><a href="abcd.doc" class="links item last">10</a></p></body>
</html>

2021-06-21属性选择器相关推荐

前端16天--IFC、BFC、H5新特性、选择器、伪类元素、扩展盒模型、圆角、盒子阴影等--2021/4/21
前端16天–IFC.BFC.H5新特性–2021/4/21 HTML5是HTML标准的最新演进版本: 1.是一个新的HTML语言版本包含了新的元素.属性和行为. 2.同时包含了一系列可以被用来让web ...
jQuery对象，jQuery查找标签，层级选择器，属性选择器，表单筛选器，操作节点标签事件...
目录 jQuery jQuery介绍 jQuery的优势 jQuery版本 jQuery内容: jQuery对象 jQuery基础语法查找标签基本选择器层级选择器: 基本筛选器: 属性选择器表 ...
JQuery中常用的属性选择器
jQuery中使用$()作为选择符极大提高工作效率以及方便快捷;一些常用属性的选择器由以下几种 1) $('#id') id选择器 2) $('.class') css选择器,class类名 3) $ ...
[06.21] LinkLabel 代码重构和我的SinaWeibo7 Project Todolist
前些天发过一个LinkLabel的文章,这些天我用过之后发现很多不方便的地方,前两天着手改进了一下. 给link类添加一个属性叫type,目的是为了给不同类型例如 @xxx #xxx# 和 http: ...
Mculover666的博客文章导航（嵌入式宝藏站）（2021.06.17更新）
一.MCU系列 1. 开发环境 [Keil MDK](一)Keil MDK 5.28 的下载.安装.破解 [Keil MDK](二)Keil MDK中芯片器件包的安装 [Keil MDK](三)Kei ...
2021.06.06家庭财经系统制作(2)
show tables; 查看数据库里有什么表命令. 碰到mysql软件问题.比想象的难缠. 用之前的方式打不开黑框(鼠标单击 mysql5.7 ccommand line Client),黑框一闪而 ...
CSS的属性选择器lang使用说明
CSS 2 引入了属性选择器,属性选择器可以根据元素的属性及属性值来选择元素,今天我们来学习特定属性选择器lang的使用方法. css :lang选择器定义用法介绍 lang 向带有指定 lang 属 ...
2021.8.21 网易秋招开发笔试（题目 + java代码）
2021.8.21 网易秋招开发笔试一.题目: 二.程序 //采用的是深度优先搜索 import java.util.HashMap;public class wangyi {public stat ...
html5复合选择器,web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）...
参考文档:https://man.ilovefishc.com/css3/ 一.基本选择器: 1通配符选择器 * 2元素选择器 element 3类选择器 .class 4id选择器 #id 5内联样 ...
【译】使用这些 CSS 属性选择器来提高前端开发效率！
译者:前端小智原文:www.smashingmagazine.com/2018/10/att- 属性选择器非常神奇.它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题.但是不要担心 ...

2021-06-21属性选择器

2021-06-21属性选择器相关推荐

最新文章

热门文章