CSS3_01之选择器、Hack
1、兄弟选择器:①相邻兄弟选择器:元素的后一个兄弟元素,选择器1+选择器2;②通用兄弟选择器:元素后的所有兄弟元素,选择器1~选择器2;
2、属性选择器:attr表示属性名称,elem表示元素名;①[attr]:页面中所有带有attr属性的元素;②elem[attr]:页面中所有带attr属性的elem元素;③elem[attr1][attr2]……:页面中所有既带attr1属性又带attr2属性……的elem元素;④elem[attr=value]:页面中所有带attr属性,且其值为value的elem元素;⑤elem[attr~=value]:页面中所有带attr属性且其值列表中包含独立值value的elem元素(多用于元素class类属性);⑥elem[attr^=firstchar]:页面中所有带attr属性且其值以firstchar(一个字母或字符串)开头的elem元素;⑦elem[attr$=lastchar]:页面中所有带attr属性且其值以lastchar(一个字符或字符串)结尾的elem元素;⑧elem[attr*=everchar]:页面中所有带attr属性且其值包含everchar(一个字符或字符串)字符的elem元素;
3、目标伪类:~:target,凸显html锚;
4、元素状态伪类:①~:enabled,每个被启用的元素;②~:disabled,每个被禁用的元素;③~:checked,每个被选中的元素(单选/复选框);
5、结构伪类:①~:first-child,其父元素的首个子元素;②~:last-child,其父元素的最后一个子元素;③~:nth-child(n),其父元素的第n个子元素;④~:empty,所有没有子元素的元素(没有子元素即没有内容,没有空格换行);⑤~:only-child,其父元素中的唯一子元素;
6、否定伪类:~:not(selector),该元素中所有不满足selector选择器的元素;
7、伪元素选择器:①~:first-line或~::first-line,该元素的首行;②~:first-letter或~::first-letter,该元素的首字符;③~::selection,该元素下用户选中区域部分;
8、计数器:①声明/复位计数器:counter-reset:计数器名称 值;(* 值可省,默认为0;可一次声明多个,counter-reset:名1 值1 名2 值2……;计数器声明不能放在使用的元素上;);②计数器增量:counter-increment:计数器名称 增量值;(* 不可省,默认值为1,放于使用元素中;);③计数器调用:counter(计数器名称);(放于调用元素中);
9、内容生成:①选择器::before和:after,生成位置前/后;②属性:content,插入的内容,取值:url()(插入图像)/字符串(“纯文本”)/计数器(有规律的数字);
10、多列:①分割列:column-count:数字;②列间隔:column-gap:数字px;③列规则:column-rule:宽 样式 颜色;(* 即列间隔边框样式);④兼容性:IE10+,Opera支持;
11、CSS Hack:①CSS类内部:样式规则加前缀;-:IE6;+:IE7;②选择器:选择器加前缀:*:IE6;*+:IE7;③头部引用:<!--[if 条件 IE 版本]>内容……<![endif]-->;(* 条件:a、gt:大于;b、gte:大于等于;c、lt:小于;d、lte:小于等于;!非IE;);④媒体查询:@media screen{};
CSS3_01之选择器、Hack的更多相关文章
- css3复杂选择器+内容生成+Css Hack
1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过 ...
- css常用hack
原文地址:css常用hack 突然想起今天早上在CNZZ看到的统计数据,使用IE6.7的用户比例还真多,看到之后我的心都碎了.微软都放弃了为毛还有这么多人不死心? 所以说,IE下的兼容还是得做的. – ...
- CSS Hack
CSS HACK,网上有很多,主要是IE版本不同造成的,尽量不要用CSS HACK,实在调不过去可以用一用,相信以后随着IE低版本的淘汰,CSS HACK也将不在使用. 类内部HACK IE6识别 - ...
- hack
1.Firefox @-moz-document url-prefix() { .selector { property: value; } }上面是仅仅被Firefox浏览器识别的写法,具体如: @ ...
- CSS 兼容解决之hack
什么是CSS hack 由于不同的浏览器,甚至同一浏览器的不同版本对CSS的解析认识不一样,导致生成的页面效果不一致,写出针对不同浏览器CSS code就称为CSS hack. 常用的CSS hack ...
- CSS Hack解决浏览器IE部分属性兼容性问题
1.Css Hack 不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持.解析不一样,导致在不同浏览器的环境中呈现出不 ...
- 【荐】说说CSS Hack 和向后兼容
人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了.增长总是快于消亡导致了浏览器兼容是成了谈不完的话题.说 到浏览器兼容,CSS HACK自然而然地被我们想起.今 ...
- 各种浏览器的Hack写法(chrome firefox ie等)
Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack. 然后将Hac ...
- 聊聊css hack
什么是CSS hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如 ...
随机推荐
- DBobjectsCompareScript(数据库对象比较).sql
use master goIF EXISTS (SELECT * FROM sysobjects WHERE id = OBJECT_ID(N'[func_CompareDBobjectsReColu ...
- Linux基础介绍【第六篇】
定时任务crond介绍 crond是什么? crond是linux系统中用来定期执行命令或指定程序任务的一种服务或软件.一般情况下,安装完CentOS5/6 linux操作系统之后,默认便会启动cro ...
- Linux实战教学笔记08:Linux 文件的属性(上半部分)
第八节 Linux 文件的属性(上半部分) 标签(空格分隔):Linux实战教学笔记 第1章 Linux中的文件 1.1 文件属性概述(ls -lhi) linux里一切皆文件 Linux系统中的文件 ...
- mac下生成ssh keys 并上传github仓储
使用github仓储需要本机生成一个公钥key 添加到自己的git账户SSH keys中 mac 生成方法: 1. 打开终端 输入 ssh-keygen 然后系统提示输入文件保存位置等信息 ...
- 2DToolkit官方文档中文版打地鼠教程(一):初始设置
这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...
- 让Mono 4在Raspberry Pi上飞
最近公司有项目想要在树莓派上做,代替原来的工控机(我们是把工控主机当作小的主机用,一台小的工控主机最少也要600左右,而树莓派只要200多).于是,公司买了一个Raspberry Pi B+和一个Ra ...
- AutoMapper(五)
返回总目录 Dynamic和ExpandoObject映射 AutoMapper不用任何配置就可以从dynamic(动态)对象映射或映射到dynamic对象. namespace FifthAutoM ...
- Html5下拉控件同时支持文本输入和下拉代码
有时候,下拉框不能满足我们的业务需求,还需要同时支持用户输入内容,默认的select标签是不支持用户输入的,下面我说一下原生的select如何支持用户输入,代码如下: <!DOCTYPE htm ...
- Protobuf使用规范分享
一.Protobuf 的优点 Protobuf 有如 XML,不过它更小.更快.也更简单.它以高效的二进制方式存储,比 XML 小 3 到 10 倍,快 20 到 100 倍.你可以定义自己的数据结构 ...
- ubuntu 安装Elasticsearch5.0(Debian包)
通过Debian包安装Elasticsearch Elasticsearch的Debian包可以从downloaded from our website或APT repository 它可以用于在任何 ...