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. 关闭vscode打开新文件自动关闭预览文件功能

    经常碰到这个问题,我打开文件就是有用的,每次给我自动关闭了我还得去打开. 当然这个问题可以双击文件,接触那个文件的预览状态就可以解决了.不过还有一个更懒的方法,直接修改vscode配置就好了. // ...

  2. ABC103

    Wow今天听同学说了这个网站,做了一次比赛的题目,只有四道题. A.三个数a,b,c,找两个最小的差相加,显然是中间数与另外两个数的差,也就是最大值减最小值了 B.两个字符串,判断能否通过对一个进行每 ...

  3. 废弃sqlite代码,备查

    using System.Linq; using System.Text; using System.Threading.Tasks; using System.Reflection; using T ...

  4. Duplicate the UIButton and Move it

    http://stackoverflow.com/questions/19241208/duplicate-the-uibutton-and-move-it/26438692#26438692 1do ...

  5. windows安装scrapy

    1.安装Twisted 直接pip install Twisted 然后报错 error: Microsoft Visual C++ 14.0 is required. Get it with &qu ...

  6. javascript验证前端页面

    数据表结构 1.html页面 <!DOCTYPE html> <html> <head> <title>注册</title> <met ...

  7. ios 最新系统bug与解决——微信公众号中弹出键盘再收起时,原虚拟键盘位点击事件无效

    最近ios发布新版本系统12.1,随着部分用户的系统更新,一些问题也渐渐暴露出来... 公司用户反映微信公众号出现了点击无效的bug!!测试调查发现,只有iphonex.iphone6,ihpone7 ...

  8. 请教一下16aspx上的源代码要如何在自己的服务器上运行

    很正常呀,,我下载的也有运行不成功的你要去他们16aspx论坛发帖子问这里很少有人回答你这样的问题

  9. HDU 2063.过山车-Hungary(匈牙利算法)

    过山车 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  10. 华农oj 2192: hzk又在打人【CRT合并/待补】

    2192: hzk又在打人 Time Limit: 12 Sec Memory Limit: 512 MB Submit: 52 Solved: 1 [Submit][Status][Web Boar ...