iOS Web开发激活css的active伪类

最近在做一个资讯客户端,用到UIWebview展示一些网页内容,本来想做一个简单的按压效果,发现在css中设置active属性一直不管用. 查阅了一下资料,今天发现,要让css active伪类生效,只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功. 下面简单以一个文本作为例子: <!DOCTYPE html> <html> <head> <style> p { color: yellow; } p:active { co…

手机端css实现active伪类

今天遇到手机端的css中a标签的active不起作用,原本想循环a标签,给当前的a标签添加class来解决,可觉得有点儿小麻烦,经查资料了解到解决此问题,只需要添加一个touchstart的空事件即可. 例子如下: <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>*{ m…

解决scroll在ios上卡顿问题和兼容ios不支持:active伪类情况

//有时候因为滚动层级元素过多会产生卡顿,特别在ios上十分明显,如果不想更换其他实现方式,可以加:-webkit-overflow-scrolling: touch; 开启硬件加速: 兼容ios不支持:active伪类 document.body.addEventListener('touchstart', function () {})…

css :active伪类的理解

/*active伪类为点击鼠标按下去还没松开鼠标的那一瞬间的事件*/…

移动端:active伪类无效的解决方法

:active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式.最常用于锚点<a href="#">这种情况,一般主流浏览器下也支持其他元素,如button等.在多按键的鼠标系统中,:active只适用于主按键,目前的大部分情况都是左键即主键.该伪类下定义的CSS样式只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示.使用键盘的tab键也可以触发:active状态. 说到:active伪类就不得不提到:link,:visited,:hover,:active这个…

移动端bug~~移动端:active伪类无效的解决方法【移动端：active样式无效】

移动端:active伪类无效的解决方法[移动端 :active样式无效]2016-09-26 15:46:50 问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone[safiri Mobiles]下没有效果显示! 解决:看来在iOS系统的移动设备中,需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态. 代码: //移动端:active伪类无效的解决方法 document.body.addEventListener('touchstart…

Web标准：五、超链接伪类

Web标准:五.超链接伪类知识点: 1.链接的四种样式 2.将链接转换为块状 3.用css制作按钮 4.首字下沉 1)链接的四种样式超链接有四个伪类,分别是: a:link 未访问的链接 a:visited 已访问的链接 a:hover 鼠标移动到链接上 a:active 选定的链接之所以称之为伪类,也就是说他不是一个真实的类,正常的类是以点开始,后面跟一个名称,而它是a开始后面跟一个冒号,再跟个状态限定字符. text-decoration在HTML语言中对文本进行修饰,例如…

css中的伪类

伪类用于向某些选择器添加一些特殊效果. 1):focus 伪类在元素获得焦点的时向元素添加特殊样式.一般用于输入文本域,按钮,以及超链接. a:focus{color:red;}超链接字体为红色 input:focus{background-color:red;}表单文本输入内背景为红色 button:focus{color:red;background-color:#000;}点击后按钮背景为黑色,字体为红色. 2):hover 在用户鼠标移动到元素上时会触发已添加的样式.用于字体大小,颜色,…

CSS Pseudo-classes（伪类）

CSS Pseudo-classes(伪类) CSS伪类是用来添加一些选择器的特殊效果. 一.语法伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class:pseudo-class {property:value;} 二.anchor伪类在支持 CSS 的浏览器中,链接的不同状态都可以以不同的方式显示 a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {co…

CSS属性、伪类选择器，CSS3选择器

CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!IE6在天朝何时能寿终就寝! 以上跟本文章无关,今天我们来CSS的选择器,虽然IE6不支持,但是jqurey实现了CSS的很多选择器的,所以就当温习jqurey的选择器. 因为伟大的IE6不支持CSS2的有些高级属性,所以CSS选择器一直没有发挥.要记住一点:对于站点功能很重要的元素还是不要用一些“高…

解决ios不支持按钮:active伪类的方法

mozilla开发社区上有 :active 不起作用的答案: [1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body>. 在iOS系统的移动设备中,需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态. document.b…

web开发：css总结与应用

一.常用标签的使用二.边界圆角三.背景样式四.精灵图五.盒模型布局细节六.盒模型案例七.w3c主页一.常用标签的使用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常用标签的使用</title>  <!-- <meta name="keywords" conte…

web开发： css高级与盒模型

一.组合选择器二.复制选择器优先级三.伪类选择器四.盒模型五.盒模型显示区域六.盒模型布局一.组合选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组合选择器</title> <style type="text/css"> /*群组选择器: 同时可以控制多个选择器*/ /*#dd, div, #…

CSS选择器：伪类（图文详解）

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就是属于box类.但是a属于什么类?不明确.因为需要看用户点击前是什么状态,点击后是什么状态.所以,就叫做"伪类". 静态伪类和动态伪类伪类选择器分为两种. (1)静态伪类:只能用于超链接的…

CSS中的伪类与伪元素

在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某些选择器添加特殊的效果.应用于一组 HTML 元素. 伪类的作用获取页面中不存在的信息,即通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息.一个元素可以同时设置多个伪类效果.伪类名称对大小写不敏感. 伪类有以下几种,截图引自W3School: 注: a:link /…

css伪选择器使用总结——css中关于伪类和伪元素的知识总汇

CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化.这里讲总结关于css伪类和伪元素的相关使用伪元素 :before/:before 在某个元素之前插入一些内容: ::after/:after 在某个元素之后插入一些内容: ::first-letter/:first-letter 为某个元素中的文字的首字母或第一个字使用样式: ::first-line/:first-line 为某个元素的第一行文字使用样式: ::selection…

CSS权威指南之css声明，伪类，文本处理--(简要笔记一)

1.css层叠的含义后面的会覆盖前面的样式 2.每个元素生成一个框,也称盒. 3.替换元素和非替换元素. img如果不指定src的外部路径,该元素就没有意义.他由文档本身之外的一个图像文件来替换. 大多数都是非替换元素.span中的内容由用户代理. 4.元素间的父子与祖先如果一个元素在另外一个元素的直接上一层,他们就有父子关系如果是从一个元素到另外一个元素的路径要经过两层或多层,那这个就是祖先与后代的关系 5.animate的动画叠加解决办法使用的时候在animate前面放上…

css定位浮动伪类 margin

一,margin .标准文档流,margin在竖直方向的不叠加,以较大的为准 .使用margin: auto;的盒子必须有明确的width,并且只有标准文档流的盒子才能使用margin: auto; .善于使用父亲的padding而不是儿子的margin; 二,css精灵 .css精灵优点,减少http请求 .通过background-position来控制显示位置 .background-attachment:fixed; 背景图片固定,不随滚动条滚动精灵的使用 background ur…

css 为元素选择器，css目标状态伪类，结构化选择器，多媒体选择器，清除表默认样式、属性选择器

伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点特点 1.默认是 inline 元素 2.必须包含 content 属性 3.content 属性的值 : 字符串或者CSS的函数(url(), attr(), counter()) 多个字符串使用空格连接注意事项: 规范要求是用::, 实际开发使用: 为了支持IE低版本浏览器. 使用场景: 1.清除浮动 e:after{ content: ""…

CSS选择器之伪类选择器（交互）

:link 选取未访问链接 :active 选取活动链接(单击某链接,未松开鼠标时). :visited 选取已被访问的链接. :target 链接指定的目标 :hover 当鼠标浮在元素上方时. :empty [CSS3]选择的元素里面没有任何内容(IE6-8不支持) :not [CSS3]排除特定的元素(IE6-8不支持) :focus 当用户点击或触摸元素或通过键盘的“tab”键选择它时会被触发.(IE7及以下不支持) :focus-within 表示一个元素获得焦点,或,该元素的后代元素…

前端 CSS的选择器伪类选择器

伪类选择器常用的几种伪类选择器. 伪类选择器一般会用在超链接a标签中没有访问的超链接a标签样式: a:link { color: blue; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge&quo…

CSS 中的伪类和伪元素

伪类(Pseudo classes) 由于状态的变化是非静态的,所以元素达到一个特定状态时,它可能得到一个伪类的样式:当状态改变时,它又会失去这个样式.由此可以看出,它的功能和 class 有些类似,但它是基于文档之外的抽象,所以叫伪类. 语法:selector:pseudo-class {} :root 选择 html 元素,在声明全局 CSS 变量时很有用. :root { --first-color: #488cff; --second-color: #ffff8c; } #firstPa…

CSS基础-5 伪类

一.伪类我们以a标签为例伪类标签分为4类 1. 设置超链接默认的样式 a:link {属性:值;.....} 或者 a { 属性: 值;} 推荐使用这种方式 2. 设置超链接访问过后的样式 a:visited {属性:值; ......} 注意:该伪类(visited )只能设置有关颜色的属性. 有浏览器缓存问题 3. 鼠标移动到超链接上的样式 a:hover {属性:值;.....} 4. 超链接激活状态下的样式 a:active {属性…

CSS笔记之伪类与伪元素

伪类分为两种:UI伪类与结构化伪类 UI伪类:a:link{} a:hover{} a:active{} a:visited{} input[type='text']:focus{} #title-one:target{} 结构化伪类: table tr:nth-child(even){} //even---下标为偶数的子元素 table tr:nth-child(odd){} //odd---下标为奇数的子元素 table tr:first-child{}…

微信浏览器或各种移动浏览器上:active伪类做的触觉反馈失效

在做移动端页面的时候,会发现PC上那种:hover的效果是不管用了的,但又要给用户一个点击反馈怎么办呢?我管它叫触觉反馈. 细心点就会发现浏览器有自带了一点触觉反馈,在点击a.button.input的时候都会出现,像这样: 应该有见过的吧..这个应该是浏览器的默认样式,有时候是想要这样的,可以加样式解决,比如: a,button,input{-webkit-tap-highlight-color:rgba(255,255,255,0);} 其实就是把a.button.input这些标签的系统触…