H5与CS3权威下.18 and 19 选择器(1)
18章.CSS3概述
1.从前端技术的角度把互联网的发展分为三个阶段:
(1)web1.0:HTML和CSS。
(2)web2.0:Ajax,Javascript/DOM/异步数据请求。
(3)web3.0:HTML5和CSS3。
2.CSS3采用分工合作的模块化结构,它有各种模块来定义相关的样式和功能,这样的做的原因是避免产生浏览器对于某个模块支持不完全的情况。(这样各大浏览器可以选择对什么模块进行支持,什么模块不支持。)
19章.选择器
1.选择器概述
在css2中,我们经常使用元素的class属性来设置样式,这样做的两个缺点是:
(1)class属性本身没有语义,纯粹用来为css样式服务,属于多余属性。
(2)使用class属性,没有把样式与元素绑定起来,针对同一class属性,不同的元素都可以使用,这样会导致混乱,修改样式时也会不方便。
所以,在css3中,提倡使用选择器来将样式与元素直接绑定起来,采用E[foo$=”val”](属性选择器)这种正则表达式的形式。
eg:
<body> <div id="test">linshuling</div> <div id="test1">linsuli</div> </body>
css
<style type="text/css"> div[id="test"]{background: pink;} </style>
2.通配符:
(1)“^”通配符:开通字符匹配。
eg:
<body> <div id="test">linshuling</div> <div id="test1">linsuli</div> <div id="t1">linsuli</div> <div id="1">linsuli</div> </body>
css
<style type="text/css"> div[id^="t"]{background: pink;} </style>
(2)“$”通配符:结尾字符匹配。
eg:
<style type="text/css"> div[id$="1"]{background: pink;} </style>
(3)“*”通配符:包含字符匹配。
eg:
div[id*="e"]{background: pink;}
3.属性选择器
以上为CSS3中追加的三个属性选择器:[att*=val],[att^=val],[att$=val],其中att表示元素的属性,val表示属性的属性值。
(1)[att*=val],如果元素用att表示的元素的属性值中包含用val指定的字符,则该元素使用这个样式。
(2)[att^=val],如果元素用att表示的属性的属性值的开头字符为用val指定的字符,则该元素使用这个样式。
(3)[att$=val],如果元素用att表示的属性的属性值的结尾字符为用val指定的字符,则该元素使用这个样式。
eg:
<div id="test-1">lin</div> <div id="test1">linsuli</div> <div id="t1">linsuli</div> <div id="1-1">linsuli</div>
<style type="text/css"> div[id$=\-1]{background: pink;} </style>
注意:当属性值不用“”括起来时,该属性选择器中在指定匹配字符前必须加上“\”这个escape字符。或者是写成:div[id$=“-1”]{background: pink;}
4.利用[att$=val]属性选择器,可以根据超链接中不同的文件扩展符使用不同的样式。
eg:
<ul> <li><a href="http://linshuling/">HTML5+CSS3权威指南</a></li> <li><a href="http://linshuling/css.html">CSS3的特性</a></li> <li><a href="test.jpg">图片素材</a></li> </ul>
a[href$=\/]:after,a[href$=html]:after,a[href$=htm]:after{ content: "web网页"; color:red; } a[href$=jpg]:after{ content: "jpge图像文件"; color:green; }
H5与CS3权威下.18 and 19 选择器(1)的更多相关文章
- H5与CS3权威下.19 选择器(2)结构性伪类选择器
1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器 ...
- H5与CS3权威上.5 绘制图形(1)
1.canvas元素基础知识 (1)在页面上放置canvas元素,相当于在页面上放置一块"画布",可以用Javascript编写在其中进行绘画的脚本. (2)在页面中放置canva ...
- 通通玩blend美工(6)下——仿iPhone滚动选择器的ListBox(交互逻辑)
原文:通通玩blend美工(6)下--仿iPhone滚动选择器的ListBox(交互逻辑) 上一篇我们已经把界面画出来了,这篇我们就来制作交互的逻辑吧.上一篇的电梯: http://www.cnblo ...
- Windows7下PHP5.6.19+Apache2.4.18+MySql5.7环境配置
此安装参考了网上各方资料,最终整理的内容为本次安装涉及的部分. 一.准备安装材料: 1.从http://windows.php.net/download/ 下载5.6.19 线程安全版(使用apach ...
- OpenGL第18,19,20讲小结
18讲是通过调用库函数画一些简单的二次几何体,比如球体.圆锥体.圆盘等等. 19讲简单的讲了下粒子系统.其实就是三角形贴上星星的纹理,通过启用混合(GL_BLEND)来达到一种动态的粒子效果.通过修改 ...
- 《linux就该这么学》第十七节课:第18,19,23章,mariadb数据库、PXE无人值守安装系统和openldap目录服务。
第23章 (借鉴请改动) openldap数据的特点:1.短小.2.读取次数较多 上述说明: openLDAP服务端配置: 1.yum install -y openldap openldap ...
- CentOS下常用的 19 条命令
玩过Linux的人都会知道,Linux中的命令的确是非常多,但是玩过Linux的人也从来不会因为Linux的命令如此之多而烦恼,因为我们只需要掌握我们最常用的命令就可以了.当然你也可以在使用时去找一下 ...
- 小游戏——js+h5[canvas]+cs3制作【五子棋】小游戏
五子棋小游戏学习—— 有一个问题是,棋盘线的颜色,在canvas中,明明设置了灰色,但在我的预览中还是黑色的,很重的颜色. 以下是复刻的源码: <!DOCTYPE html> <ht ...
- linux下18种监测网络带宽方式
1. nload nload是一个命令行工具,让用户可以分开来监控入站流量和出站流量.它还可以绘制图表以显示入站流量和出站流量,视图比例可以调整.用起来很简单,不支持许多选项. 所以,如果你只需要快速 ...
随机推荐
- Qt Creator(编译器MinGW)中使用__attribute__(packed)的问题
http://www.bttr-software.de/forum/mix_entry.php?id=11767 假设我们从串口中读到一串数据,当我们想要处理这串数据的时候通常是这样做的: 1 将这些 ...
- C语言运算符表(优先级)
http://www.is.pku.edu.cn/~qzy/c/operator.htm
- C#网络编程系列(两)它Socket同步TCPserver
声明原文 笔者:竹zz 本文地址http://blog.csdn.net/zhujunxxxxx/article/details/44258719 转载请注明出处 文章系列文件夹 C#网络编程系列文 ...
- Java凝视Override、Deprecated、SuppressWarnings详细解释
一.什么是视线 说起目光,你必须先提什么是元数据(metadata). 所谓元数据是数据的数据.那.元数据是描述数据的叙述. 像在表中的数据字段,叙述了这个字段下的数据的含义.而J2SE5.0 ...
- Centos中如何配置Texlive2013中文字体的问题
Centos中如何配置Texlive2013中文字体的问题: 第一步是下载你需要的字体,我从windows/fonts中拷贝的比较多,你只要复制你需要的字体即可. 注意只要文件扩展名为ttf的文件,t ...
- Visual Studio 当前不会命中断点的问题
这个问题一般有两个版本 1.当前不会命中断点,还没有为该文档加载任何符号. 2.当前不会命中断点,源代码与原始版本不同. 要解决第一个问题,就要了解一种文件格式“PDB(Program DataBas ...
- c#自带压缩类实现数据库表导出到CSV压缩文件
c#自带压缩类实现数据库表导出到CSV压缩文件的方法 在导出大量CSV数据的时候,常常体积较大,采用C#自带的压缩类,可以方便的实现该功能,并且压缩比例很高,该方法在我的开源工具DataPie中已经经 ...
- js 将long日期格式 转换为标准日期格式方法
我们经常在操作的时候会发现从后台传递到view层的json中datetime类型变成了long型,当然你也可以从后台先转为string类型,但是如果是从和数据库对应的object中封装的话,就不能再去 ...
- poj2187(未完、有错)
凸包求直径(socalled..) 采用Graham+Rotating_Calipers,Graham复杂度nlogn,RC算法复杂度n,所以时间复杂度不会很高. 学习RC算法,可到http://cg ...
- Asp.Net Web API 导航3
Asp.Net Web API 导航 Asp.Net Web API第一课:入门http://www.cnblogs.com/aehyok/p/3432158.html Asp.Net Web A ...