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）的更多相关文章

  1. H5与CS3权威下.19 选择器（2）结构性伪类选择器

    1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器 ...

  2. H5与CS3权威上.5 绘制图形（1）

    1.canvas元素基础知识 (1)在页面上放置canvas元素,相当于在页面上放置一块"画布",可以用Javascript编写在其中进行绘画的脚本. (2)在页面中放置canva ...

  3. 通通玩blend美工（6）下——仿iPhone滚动选择器的ListBox（交互逻辑）

    原文:通通玩blend美工(6)下--仿iPhone滚动选择器的ListBox(交互逻辑) 上一篇我们已经把界面画出来了,这篇我们就来制作交互的逻辑吧.上一篇的电梯: http://www.cnblo ...

  4. Windows7下PHP5.6.19+Apache2.4.18+MySql5.7环境配置

    此安装参考了网上各方资料,最终整理的内容为本次安装涉及的部分. 一.准备安装材料: 1.从http://windows.php.net/download/ 下载5.6.19 线程安全版(使用apach ...

  5. OpenGL第18，19，20讲小结

    18讲是通过调用库函数画一些简单的二次几何体,比如球体.圆锥体.圆盘等等. 19讲简单的讲了下粒子系统.其实就是三角形贴上星星的纹理,通过启用混合(GL_BLEND)来达到一种动态的粒子效果.通过修改 ...

  6. 《linux就该这么学》第十七节课：第18，19，23章，mariadb数据库、PXE无人值守安装系统和openldap目录服务。

    第23章 (借鉴请改动) openldap数据的特点:1.短小.2.读取次数较多 上述说明: openLDAP服务端配置:     1.yum install -y openldap openldap ...

  7. CentOS下常用的 19 条命令

    玩过Linux的人都会知道,Linux中的命令的确是非常多,但是玩过Linux的人也从来不会因为Linux的命令如此之多而烦恼,因为我们只需要掌握我们最常用的命令就可以了.当然你也可以在使用时去找一下 ...

  8. 小游戏——js+h5[canvas]+cs3制作【五子棋】小游戏

    五子棋小游戏学习—— 有一个问题是,棋盘线的颜色,在canvas中,明明设置了灰色,但在我的预览中还是黑色的,很重的颜色. 以下是复刻的源码: <!DOCTYPE html> <ht ...

  9. linux下18种监测网络带宽方式

    1. nload nload是一个命令行工具,让用户可以分开来监控入站流量和出站流量.它还可以绘制图表以显示入站流量和出站流量,视图比例可以调整.用起来很简单,不支持许多选项. 所以,如果你只需要快速 ...

随机推荐

  1. [LeetCode] ZigZag Conversion [9]

    称号 The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows li ...

  2. sql常用语句汇总

    --创建数据库 USE yuju CREATE database YuJu on primary ( name='YuJu', filename='B:\ceshi数据库\YuJu.mdf', max ...

  3. MVC5搜索/查询 流程功能的实现

    接着上次的篇幅,我们这篇手动来写一个查询的流程代码!  搜索/查询 流程功能的实现 那现在要做搜索(查询)功能我们第一步应该做什么呢!第一次是不是我们应该去Controller(控制器)里去搞一个搜索 ...

  4. jsoneditor显示Json data

    Git开源地址:https://github.com/josdejong/jsoneditor/blob/master/docs/api.md 1.引用JS文件 <!-- jsoneditor ...

  5. 变易算法 - STL算法

    欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/mutating-algorithms.h ...

  6. D0

    刚到长乐就被机房里众大神的气场给压倒了 orz....... 然后默默的感觉到自己貌似已经有一个星期没有打题了...就各种忧伤.... 还是说一下今天的计划吧 嗯傍晚5.30-6.00 &&a ...

  7. [转]Adventures in Xen exploitation

    Source:https://www.nccgroup.com/en/blog/2015/02/adventures-in-xen-exploitation/   tl;dr This post is ...

  8. MVC 5显示、创建、编辑、删除等功能实练

    MVC 5显示.创建.编辑.删除等功能实练 在前天的学习小结中<15天学习MVC后的小结(分享经历与想法)>http://www.cnblogs.com/insus/p/3369870.h ...

  9. ios7学习之路七（隐藏虚拟键盘，解决键盘挡住UITextField问题）

    再正式开始之前,先来介绍一下IOS的键盘类型: 一.键盘风格 UIKit框架支持8种风格键盘 typedef enum { UIKeyboardTypeDefault, // 默认键盘:支持所有字符 ...

  10. C# 从Excel2003将数据导入到SQL2005,数据发生截断的问题分析

    C# 从Excel2003将数据导入到SQL2005,数据发生截断的问题分析 问题描述:大家没有遇到过这种情况使用自己编写的工具读取Excel2003文件中的数据,然后执行插入语句将数据批量导入到SQ ...