css3是移动Web开发的主要技术之中的一个。当前。CSS3技术最适合在移动Web开发中使用的特性有增强的选择器、阴影、强大的背景设置

、圆角边框

接下来我们主要解说增强型的选择器。主要分两种,属性选择器和伪类选择器

1、属性选择器

1.1全然匹配选择器

语法:[attribute=value]

<span style="font-family:Microsoft YaHei;"><div id="article">属性匹配选择器</div>
<style type="text/css">
[id=article]{
color:red;
}
</style></span>

1.2包括匹配选择器

语法:[attribute*=value]

<span style="font-family:Microsoft YaHei;"><div id="article">属性匹配选择器</div>
<div id="subarticle">属性匹配选择器</div>
<div id="article1">属性匹配选择器</div>
<style type="text/css">
[id*=article]{
color:red;
}
</style></span>

1.3首字符匹配选择器

语法:[attribute^=value]

<span style="font-family:Microsoft YaHei;"><div id="article">属性匹配选择器</div>
<div id="subarticle">属性匹配选择器</div>
<div id="article1">属性匹配选择器</div>
<style type="text/css">
[id^=article]{
color:red;
}
</style></span>

1.4尾字符匹配选择器

语法:[attribute$=value]

<span style="font-family:Microsoft YaHei;"><div id="article">属性匹配选择器</div>
<div id="subarticle">属性匹配选择器</div>
<div id="article1">属性匹配选择器</div>
<style type="text/css">
[id$=article]{
color:red;
}
</style></span>

2、伪类选择器

CSS3选择器中,伪类选择器种类许多,在CSS2.1时代。伪类选择已经存在。比如超链接的四个状态选择器

a:link、a:visited、a:hover、a:active

CSS3添加了许多的选择器,当中包含:

first-line 伪元素选择器

first-letter伪元素选择器

root选择器

not选择器

empty选择器

target选择器

[CSS3]移动Web开发系列之CSS3增强型选择器的更多相关文章

  1. [Python] 利用Django进行Web开发系列(二)

    1 编写第一个静态页面——Hello world页面 在上一篇博客<[Python] 利用Django进行Web开发系列(一)>中,我们创建了自己的目录mysite. Step1:创建视图 ...

  2. [Python] 利用Django进行Web开发系列(一)

    1 写在前面 在没有接触互联网这个行业的时候,我就一直很好奇网站是怎么构建的.现在虽然从事互联网相关的工作,但是也一直没有接触过Web开发之类的东西,但是兴趣终归还是要有的,而且是需要自己动手去实践的 ...

  3. 高性能Web开发系列

    1. 高性能WEB开发基础 http://www.uml.org.cn/net/201404225.asp 2. 高性能WEB开发进阶(上) http://www.uml.org.cn/net/201 ...

  4. Python Web框架本质——Python Web开发系列一

    前言:了解一件事情本质的那一瞬间总能让我获得巨大的愉悦感,希望这篇文章也能帮助到您. 目的:本文主要简单介绍Web开发中三大基本功能:Socket实现.路由系统.模板引擎渲染. 进入正题. 一. 基础 ...

  5. 【前端开发系列】—— CSS3属性选择器总结

    想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...

  6. 【HTML5开发系列】CSS3

    选择器 属性 背景和边框 盒模型 布局 文本 动画 其他

  7. Web开发系列【1】实用的网页布局(PC端)

    在熟悉那些常用的软件.工具后,我们正式开始开发,在前期准备工作之后,我们要做的事情是写页面,也就是网页布局.在w3c.菜鸟.慕课网等等网站上都有基础的 HTML+CSS 知识讲解,在初期学习中,跟着教 ...

  8. 勤拂拭软件系列教程 - java web开发

    勤拂拭软件工作室持续推出Java Web开发系列教程与案例,供广大朋友分享交流技术经验,帮助喜欢java的朋友们学习进步: 1. 勤拂拭软件 java web 开发教程(1) - 开发环境搭建 勤拂拭 ...

  9. 系列教程 - java web开发

    代码之间工作室持续推出Java Web开发系列教程与案例,供广大朋友分享交流技术经验,帮助喜欢java的朋友们学习进步: java web 开发教程(1) - 开发环境搭建 技术交流QQ群: 商务合作 ...

随机推荐

  1. 服务器 阿里云服务器Ubuntu挂载数据盘

    服务器 阿里云服务器Ubuntu挂载数据盘  转自:http://www.codingyun.com/article/24.html coding云运行在阿里云的Ubuntu 12.04 64位操作系 ...

  2. 输出读入优化——QAQ

    #include<bits/stdc++.h> const int RN=1e5; ],*ip=ib+RN,ob[RN+],*op=ob; inline int gc(){ ip==ib+ ...

  3. img 标签下多余空白的解决方法

    在浏览器中,图片默认的vertical-align是baseline.那么,我们该如何去掉这多余的空白呢? 1)将图片转换为块级 img{display:block;} 2) 设置图片的垂直对齐方式 ...

  4. poj 2079 Triangle (二维凸包旋转卡壳)

    Triangle Time Limit: 3000MS   Memory Limit: 30000KB   64bit IO Format: %I64d & %I64u Submit Stat ...

  5. 培训补坑(day5:最小生成树+负环判断+差分约束)

    补坑补坑((╯‵□′)╯︵┻━┻) 内容真的多... 一个一个来吧. 首先是最小生成树. 先讲一下生成树的定义 生成树就是在一张图上选取一些边,使得整个图上所有的点都连通. 那么我们要求的最小生成树有 ...

  6. 如何通过友盟分析发布后App崩溃日志

    http://blog.csdn.net/totogo2010/article/details/39892467 要分析崩溃日志,首先需要保留发布时的编译出来的.xcarchive文件.这个文件包含了 ...

  7. Spring整合Disruptor3

    一.什么是Disruptor 从功能上来看,Disruptor 是实现了“队列”的功能,而且是一个有界队列.那么它的应用场景自然就是“生产者-消费者”模型的应用场合了. 可以拿 JDK 的 Block ...

  8. c语言自动对齐原则

    转载一篇博客: http://blog.csdn.net/hairetz/article/details/4084088 1:数据成员对齐规则:结构(struct)(或联合(union))的数据成员, ...

  9. 可视化web日志分析工具Logstalgia

    https://blog.csdn.net/zrools/article/details/47250661

  10. Ac日记——Distances to Zero codeforces 803b

    803B - Distances to Zero 思路: 水题: 代码: #include <cstdio> #include <cstring> #include <i ...