CSS 3 属性选择器

CSS 3  选择器

=========================================================================================

属性选择器

=========================================================================================

[属性名^=值]--[href^="#"]----选择以#开头的所有href元素

[属性名$=值]--[href$="pdf"]---选择以pdf结尾的所有href元素

[属性名*=值]--[href*="www"]---选择包含www的所有href元素

------   CSS 2 中--------------------------------------------------------

[属性名|=值]--[lang|="en"]---选择lang属性中等于en或者以en为开头的元素

[属性名~=值]--[class~="big"]---选择class属性中包含big的元素

[属性名 = 值]--[class="text"]---选择class属性等于text的元素

[属性名]---[class]---选择页面中有class属性的元素

时间: 2024-10-29 10:48:14

CSS 3 属性选择器的相关文章

CSS:属性选择器

本文介绍css中属性选择器的基本用法:为具备指定属性的标签设置样式. 代码整理自w3school:http://www.w3school.com.cn <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-equi

css的属性选择器中属性值是区分大小写的。

以前经常看到很多人说"css中通常只有class和id的值区分大小写,属性名和属性值不区分大小写" BLAH BLAH 接手别人项目的时候排了半天bug发现:css的属性选择器对于属性值确实是区分大小写的,而对于属性名却大小写不敏感. 最开始是在querySelectorAll中发现的,测试后发现css中也具有一致的表现. 所以对于过去的那些说法,其实已经不适用于现在的场合了. 测试环境:Chrome 66 , Firefox 57. 另外附上使属性值不区分大小写的写法:https:/

Css 分类 属性 选择器

Css 层叠样式表 美化页面的小工具 分类: 内联 (行内)在标签内部以属性的形式呈现,属性名style 内嵌 head标签内以标签形式呈现,标签名style 外部 head标签内 加link标签 引入外部文件 *.css <link rel="stylesheet" type="text/css" href="file:///D|/SSs/作业/3.12/图标.css" /> link标签 插入icon图标(加icon图标,路径必须

23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&

css基础 属性选择器 属性值以指定字符开头 / 结束

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

css基础 属性选择器 选择带有title属性的a标签

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

css 属性选择器笔记

1.基本选择器: eg: *{margin:0;padding:0} p{color:black} .content{background:red;} #intro{padding-left:2em;} 2.多元素组合选择器 div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } h2 + p { color:#f00; } 三.CSS

css的各种选择器

一.基本选择器 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元素 4. #footer id选择器,匹配所有id属性等于footer的元素 二.多元素的组合选择器 5. E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 6. E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 7. E > F 子元素选择器,匹配所有E元素的子元素F

CSS属性选择器

属性选择器 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="./css/属性选择器.css&qu