移动端 table 伪类不显示

移动端: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

CSS3:nth-child()伪类选择器，Table表格奇偶数行定义样式

转自爱设计原文链接http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹.虽然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一

移动端1px边框伪类宽高计算

移动端1px边框在手机上看显得比较粗,于是我们用伪类结合css3缩放的方法去设置线条,但是如果设置div的一条边,水平线就设置宽度100%,垂直线就设置高度100%,那么如果是div的四条边呢?宽高100%会出现问题,那么如何解决? 请看下面代码: after:{ border: 1px solid #c1c0c0; height: 303%; content: ''; width: 303%; position: absolute; bottom: 0; right: 0; transform

CSS-弹性布局-伪类选择器-复杂选择器

1.定位 1.堆叠顺序一旦将元素变为已定位元素的话,元素们则有可能出现堆叠的效果. 如何改变堆叠顺序? 属性:z-index 取值:无单位的数字,数字越大越靠上. 注意: 1.父子元素间,z-index无效,永远都是子元素压在父元素上. 2.只有已定位元素才能使用z-index属性. 2.固定定位 1.什么是固定定位将元素固定在页面中的某个位置,位置不会随着滚动条而发生改变,始终固定在可视化区域. 2.语法 position:fixed; 配合偏移属性使用 3.特点 1.固定定位的元素会变成

CSS 基础知识点样式选择器伪类

CSS 基础知识点汇集版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的一种样式设计语言.样式通常存储在样式表中,外部样式表通常存储在 CSS 文件中,多个样式定义可层叠为一. HTML 标签被设计为用于定义文

谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少谈谈一些有趣

:target伪类制作tab选项卡

:target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</a> </div> <div id="demo1">测试结果</div> CSS代码: :target{ color: #343434; border: 1px solid red; background-color: red; } #demo1写

【转载】CSS 伪类-:before和:after

:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下: #example:before { content: "#"; color: red; } #example:after { content: "$"; color: red; } 这段代码会在#example元素内容之前插入一个'#',以及在内容之后添加一个'$',插入的行内元素是作为#example的子元素,效

CSS伪类对象before和after的用法

一直感觉这两个伪类对象不是很重要,并且IE对它两兄弟并不支持,所以也没有怎么静下心来研究,只有在清楚浮动clearfix的时候会用到哈,其他都很少用!不过最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很巴适的效果,所以就来研究研究哈! 一.先来看哈他们的定义哈! 1.selector:before( sRules ) 它要和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容: 2.selector:after( sRules ) 和before用

CSS中伪类的使用

原文:http://www.cnblogs.com/guopei/archive/2011/04/16/2017627.html 何为伪类? 也就是实际实现了类的效果,但是并没有实际添加到标签中的类,这样的就是伪类.伪类的典型构成就是使用了(:)冒号. 1.先说最常用的a链接的伪类,目前市场上的主流浏览器都支持. :link 链接样式 :visited 链接访问过后的样式(只要访问历史记录存在) :hover 鼠标悬停样式 :active 鼠标按下样式其中有些规则,需要按着(Love ha)的

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

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

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

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

一、关于a标签伪类中的visited不起作用问题

一.代码示范 <html> <head> <title>伪类超链接</title>  <style type="text/css"> a:link { color:red; font-size

谈谈css伪类与伪元素

前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. 在这里也许有不少人都见过:before,::before这样的写法,估计有些人很纳闷,这两者有什么区别吗? 有疑问,那我们就先把疑问解决了先,不要把疑问留着.其实:before,::before这两种写法都是等效,只是:befor是CSS2的写法,::before是CSS3的写法.双冒号(::)这是CSS3

巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为这个动作赋予了更加多的功能——就如同:hover 一样你可以做一些样式定义. 先上效果图正如标题所说,本文是教你如何巧用CSS3 :target 伪类制作Dropdown下拉菜单,原生HTML+CSS,无JavaScript.为了吸引各位往下看,先上实际例子,再进行剖析. Duang~ 实际例子其

CSS 之伪类及伪元素

伪类和伪元素用起来非常的方便,在查阅资料及测试后整理下来. 一.伪类 CSS 伪类用于向某些选择器添加特殊的效果.伪类对元素进行分类是基于特征(characteristics)而不是它们的名字.属性或者内容:原则上特征是不可以从文档树上推断得到的. 伪类即 CSS 内植类,CSS 内部本身赋予它一些特性和功能,也就是不用再class=...或id=...就可以用伪类获取元素,当然也可以改变它的部分属性(如: a:link{color:#FF0000;

::before ::after CSS3中的伪类和伪元素

::before和::after伪元素的用法一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容. 这些添加不会出现在DOM中,不会改变文档内容,不可

CSS的伪类 :before 和 :after

CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了. Creative Button Styles 一基本语法在了解进阶的应用之前,先来了解一下语法规则.平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用

CSS基础--属性选择器、伪类选择器

属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> .red{ color: red; } .blue{ color: blue; } .darkred{ color: darkred; } .blueviolet{ color:bluevi

巴特西