[CSS3]移动Web开发系列之CSS3增强型选择器
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增强型选择器的更多相关文章
- [Python] 利用Django进行Web开发系列(二)
1 编写第一个静态页面——Hello world页面 在上一篇博客<[Python] 利用Django进行Web开发系列(一)>中,我们创建了自己的目录mysite. Step1:创建视图 ...
- [Python] 利用Django进行Web开发系列(一)
1 写在前面 在没有接触互联网这个行业的时候,我就一直很好奇网站是怎么构建的.现在虽然从事互联网相关的工作,但是也一直没有接触过Web开发之类的东西,但是兴趣终归还是要有的,而且是需要自己动手去实践的 ...
- 高性能Web开发系列
1. 高性能WEB开发基础 http://www.uml.org.cn/net/201404225.asp 2. 高性能WEB开发进阶(上) http://www.uml.org.cn/net/201 ...
- Python Web框架本质——Python Web开发系列一
前言:了解一件事情本质的那一瞬间总能让我获得巨大的愉悦感,希望这篇文章也能帮助到您. 目的:本文主要简单介绍Web开发中三大基本功能:Socket实现.路由系统.模板引擎渲染. 进入正题. 一. 基础 ...
- 【前端开发系列】—— CSS3属性选择器总结
想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...
- 【HTML5开发系列】CSS3
选择器 属性 背景和边框 盒模型 布局 文本 动画 其他
- Web开发系列【1】实用的网页布局(PC端)
在熟悉那些常用的软件.工具后,我们正式开始开发,在前期准备工作之后,我们要做的事情是写页面,也就是网页布局.在w3c.菜鸟.慕课网等等网站上都有基础的 HTML+CSS 知识讲解,在初期学习中,跟着教 ...
- 勤拂拭软件系列教程 - java web开发
勤拂拭软件工作室持续推出Java Web开发系列教程与案例,供广大朋友分享交流技术经验,帮助喜欢java的朋友们学习进步: 1. 勤拂拭软件 java web 开发教程(1) - 开发环境搭建 勤拂拭 ...
- 系列教程 - java web开发
代码之间工作室持续推出Java Web开发系列教程与案例,供广大朋友分享交流技术经验,帮助喜欢java的朋友们学习进步: java web 开发教程(1) - 开发环境搭建 技术交流QQ群: 商务合作 ...
随机推荐
- 解决jquery与zepto等其它库冲突兼容的问题
解决jquery与zepto等其它库冲突兼容的问题;(function ($) { }) (jQuery); ;(function ($) { }) (Zepto); 在Bootstrap ...
- Selenium2 鼠标悬停效果实现
对一些js控件,鼠标悬停的时候出发下拉层的实现 1.使用Action public void moveToElement(WebDriver driver, By locator) { Actions ...
- 战斗机的祈雨仪式(NOIP模拟赛Round 7)
[问题描述] 炎炎夏日,如果没有一场大雨怎么才能尽兴?秋之国的人民准备了一场祈雨仪式.战斗机由于拥有操纵雷电的能力,所以也加入了其中,为此,她进行了一番准备. 战斗机需要给自己的Spear of Lo ...
- React中input框设置value报错解析
react input 不设置onChange的常见错误截图 表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑. React对表单元素做了专门的优化处理,他对表单元素做了一些抽象,使得他们 ...
- HDU 2795.Billboard-完全版线段树(区间求最值的位置、区间染色、贴海报)
HDU2795.Billboard 这个题的意思就是在一块h*w的板子上贴公告,公告的规格为1*wi ,张贴的时候尽量往上,同一高度尽量靠左,求第n个公告贴的位置所在的行数,如果没有合适的位置贴则输出 ...
- HDU 6268 Master of Subgraph (2017 CCPC 杭州 E题,树分治 + 树上背包)
题目链接 2017 CCPC Hangzhou Problem E 题意 给定一棵树,每个点有一个权值,现在我们可以选一些连通的点,并且把这点选出来的点的权值相加,得到一个和. 求$[1, m] ...
- MySQL-python install
Redhat 7.6 yum install python-devel mysql-devel gcc -y pip install MySQL-python==1.2.5
- [BZOJ5288][HNOI2018]游戏(拓扑排序)
传送门:https://www.luogu.org/problemnew/show/P4436 20分的暴力加一个Random_shuffle就A了.我还能说什么.. 不过这个也不是毫无道理,复杂度应 ...
- 用CSS3产生动画效果
相关属性: @keyframes规则:定义动画 语法:@keyframes animationname{keyframes-selector {CSS-style;}} animationname:动 ...
- Kyle 的 iOS 面试题
1.简单介绍下你对swizzling方法的了解,一般你什么时候使用. 2.有三个对象 A,B,C..:A retain B, B retain C, C retain B..当 A release B ...