demo .page-one-content-area-inner-select-wrap height 200px margin-bottom 30px overflow auto &::-webkit-scrollbar {/*滚动条整体样式*/ width 4px /*高宽分别对应横竖滚动条的尺寸*/ height 4px } &::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius 5px -webkit-box-shadow i

伪类: 1.结构伪类 A:E : first-child{} E : nth-*(n){} E : first-*(even){}  E : first-*(odd){} B:nth-child 是根据其父元素中国子元素的总数进行计算 nth-of-type 是根据特定类型的子元素进行计数 nth-last-child 与nth-child类似,不过是从最后开始计算 nth-last-of-type 与nth-of-type 类似,不过是从最后开始计算 C:first-of-type .last

伪元素:(css3中将所有伪元素前变成了两个冒号,即::first-letter.::first-line.::before.::after.::selection.目的是为了区分伪元素与伪类.对于IE6~IE8,仅支持单冒号写法)1.::first-letter  :用来选择文本块的第一个首字母.2.::first-line :用来匹配元素的第一行文本.3.::befor 和 ::after :创建一个作为当前元素子元素的伪元素.常通过 content 属性来为一个元素添加修饰性的内容. 此元

各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正方形的填充色. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css&qu

作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最多算得上近房亲戚. 下面我们来开始讲讲单冒号(:)伪类和双冒号(::)伪元素有什么相同和不同点(另外在CSS2中单冒号“:” 也叫做伪对象,具体可看看http://www.mb5u.com/tool/css2/)   单冒号(:)早在CSS中已经存在了,相信用惯CSS的码农肯定对:hover伪类并不

selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 <p> 元素的首行,并为其设置样式. first-letter 选择每个 <p> 元素的首字母,并为其设置样式. before 在每个 <p> 元素的内容之前插入新内容.(IE7及以下不支持) after 在每个 <p> 元素的内容之后插入新内容.(IE7及以下不支持

文件夹: 1.背景图合并和CSS Spirit 2.PS基本快捷键 3.hack技术基本书写,为什么不用? 4.内核前缀 5.伪类afterbefore 1.背景图合并和CSS Spirit 背景图合并在使用时有两种方法: ①一种就是你会PS.能够自己PS实现背景图合并成一张图片.再用background-position实现背景图的定位. ②假设你不会PS.那能够用CSS背景图合并工具,直接选好图片后在线制作生成相相应格式的图片.方便快捷. background的语法: background-

CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 | 表示 多选一 ? 表示 0个或1个 * 表示 0个或多个 {}表示范围  {A}代表出现A次 ,{A,B}代表出现A次以上B次以下 ,B可以省略,{A,} 代表至少出现A次,无上限 # 出现1次以上,以逗号隔开,可以选择后面跟大括号的方式精确表示重复次数:<length>#{1,4}. !代表

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

考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</section> <ul> <li>item 1</li> <li> <ul> <li>sub item 1</li> <li>sub item 2</li> <li>sub item

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

先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代替,而是用纯css制作. 第一个是left按钮,即prev: .vmc-arrow-left:after { content: "\e079"; } 第二个是right按钮的,也就是next下一张的按钮: .vmc-arrow-right:after { content: "\e

 以你添加的元素为基础!在他的里面!也就是他的内容的前面或者后面添加东西!  如果原来的元素没有内容会出现什么情况?(伪类的宽和高和元素的相等)

本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的选择最终还是依靠的DOM提供的接口,jQuery只是最了最佳的方式最快的匹配到合适的位置 构建一个基础的jQuery对象有: 元素合集 元素数量 上下文 通过pushStack()方法构建的prevObject的引用储存,这个在DOM操作的时候特别有用 选择器 具体文章前面有分析,pushStack

一.实现如下效果 二.代码实现思路 图案一源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>伪类绘图</title> <style> .button { display: inline-block; position: relative; font-size: 30px; width: 90px; height: 90px;

伪类分为两种: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{}

CSS 伪类 (Pseudo-classes) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (padding) 实例 CSS 列表实例 CSS 表格实例 轮廓(Outline)实例 CSS 尺寸 (Dimension) 实例 CSS 分类 (Classification) 实例 CSS 定位 (Positioning) 实例 CSS 伪类 (Pseudo-class

<a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类,但它确实作为一个类来使用.(这些类确实存在,浏览器在后台会向这些类增加和删除元素) 我在看<CSS设计指南>时,它说到四个伪类的书写顺序一定要正确,否则浏览器可能不会显示预期的结果. 也即这样写: a:link{color:black;} a:visited{color:gray;} a:hove

HTML 超链接<a> 1.超链接可以是一个字.一个词.一组词.一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分. 2.当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手. 3.标签<a> 中使用了href属性来描述链接的地址. 默认情况下,链接将以以下形式出现在浏览器中: 一个未访问过的链接显示为蓝色字体并带有下划线. 访问过的链接显示为紫色并带有下划线. 点击链接时,链接显示为红色并带有下划线. 注意:如果为这些超链接设置了 CSS 样式,展示样式

CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: 伪元素和伪类的区别从作用也可以看出 伪元素:伪元素是创造关于文档语言能够指定的文档树之外的抽象.例如文档语言不能提供访问元素内容第一字或者第一行的机制.伪元素允许设计师引用它们,否则这是难以办到            的.伪元素还提供样式设计师给在源文档中不存在的内容分配样式(例

1. :link                     向未被访问的链接添加样式 :visited                向已被访问的链接添加样式 :hover                  当鼠标悬浮在元素上方时,向元素添加样式 :active                 向被激活的元素添加样式(被点击) 以上四种伪类应用于超链接时,a:hover必须在a:link和a:visited之后,a:active必须在a:hover之后,a:link和a:visited两者的顺序没