1 CSS3 结构伪类选择器1.E:root匹配E元素所在的根元素 即：html2. E:nth-child(n)（1）匹配E元素的父元素中第n个子元素，（2）且该位置的子元素类型必须是E类型。否则无效p:nth-child(1){color:red}<div> <p>这是红色的<p></div> <div> <h1>这是第一个子元素 但不是P类型，不是红色</h1> < p>这是黑色的 注意对比 nth-of-type(1) </p></div> 3. E:nth-of-type(n)匹配E的父...
伪类这个叫法源自它们与类相似，但实际上并没有类会附加到标记中的标签上。伪类分两种。UI伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上)，为该元素应用CSS样式。结构化伪类会在标记中存在某种结构上的关系时(比如某个元素是一组元素中的第一个或最后一个)，为相应元素应用CSS样式。一.UI伪类1.链接伪类Link:此时，链接就在那儿等着用户点击。Visited:用户此前点击过这个链接。Hover:鼠标指针正悬停在链接上。Active:链接...
p:nth-child(2)要满足两个条件，1：选择的是p元素的父元素的第二个子元素 2：选择的第二个子元素必须是p元素，如果不满足，则将不显示 p:nth-of-type(2)选择父元素下的第二个p元素原文：http://www.cnblogs.com/jingxinqiaodaima/p/6252711.html
1. 匹配第一个 <p> 元素在下面的例子中，选择器匹配作为任何元素的第一个子元素的 p 元素：<html> <head> <style type="text/css"> p:first-child {color: red;} </style> </head><body> <p>some text</p> <p>some text</p> </body> </html>2.匹配所有 <p> 元素中的第一个 <i> 元素<html> <head> <style type="text/css"> p > i:first-child {font-weight:bold;} </style> </head><body> <p>some <i>text</i>. some <i>text</i>....
先上学习地址：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: "\e080"; }最后是二者共同的样式代码：.vmc-arrow-left:after, .vmc-arrow-right:after {content: ‘‘;...
E:target 表示当前的URL片段的元素类型，这个元素必须是E E:disabled 表示不可点击的表单控件 E:enabled 表示可点击的表单控件 E:checked 表示已选中的checkbox或radioE::after 生成内容在E元素后 E:not(s) 表示E元素不被匹配 E~F表示E元素毗邻的F元素E:first-line选中第一行文字E:first-letter选中第一个字E::selection 当文字被选中时触发效果【注意是双冒号】Content 属性：E:after 利用content属性在元素末尾添加内容E:before...
CSS3样式：/* RADIO */.button-holder { width: 100%;}.regular-radio { display: none;}.regular-radio + label { -webkit-appearance: none; background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 50px; display: inline-block; position: relative;}.regular-radio:checked + label:after { content: ‘...
selection[CSS4]应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。（IE8及以下不支持）（火狐-moz-selection）first-line选择每个 <p> 元素的首行，并为其设置样式。first-letter选择每个 <p> 元素的首字母，并为其设置样式。before在每个 <p> 元素的内容之前插入新内容。after在每个 <p> 元素的内容之后插入新内容。cue backdrop placeholder marker spelling-error grammar-error 与伪类一样， 伪元素添加...
CSS3新增了很多强大的选择器 它可以让我们少写一些js事件脚本 我们先来看看各个版本的选择器有哪些 注： ele代表element元素 attr代表attribute属性，val代表value属性值 :xxx都属于伪类选择器，::xxx都属于伪元素选择器 有名字的选择器我尽量细分了CCS1选择器选择器类型示例说明.class类选择器.demo选择所有class包含demo的元素#idID选择器#unique选择所有id是unique的元素ele元素选择器p选择所有p元素ele,ele并列选择器h1,h2选择...
css选择符整理一、通配符 * *{margin: 0;padding: 0;}作用：将页面中所有元素的内外补丁设置为0； .class * {color:#ffffff;}将class类下面的所有元素字体颜色设置为白色；二、标签选择符 p,p,a,span,h1 {color: #FFFFFF;}html有很多标签，可以直接用标签选择符给他们加样式，但是标签选择符和通配符的选择范围都很大，建议配合其他选择符一起使用。三、类选择符 在页面中，我们可以给标签加上一个属性，class-类，自...
本篇文章主要给大家介绍如何用css after伪类清除浮动的方法。首先大家要了解什么是css浮动？使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。也可以这样理解：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。那么我们为什么要清除浮动呢？这是因为浮动元素有时会影响整体...
这篇文章主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！浏览器兼容性：E:hover 支持firefox、safari、Opera、ie8、chrome ------------E:active 支持firefox、safari、Opera、chrome ...
无论您是初学者还是经验丰富的CSS开发人员，您都可能听说过伪类。最着名的伪类可能是:hover，当指针设备（例如鼠标）指向它时，它允许我们在处于悬停状态时对元素进行样式化。按照我们之前关于margin：auto和CSS Floats的内容介绍，我们在这篇文章中对伪类进行了更深入的研究。我们将看到什么是伪类，它们是如何工作的，我们如何对它们进行分类，以及它们与伪元素的区别。（推荐教程：css视频教程）什么是伪类？一个伪类是我们可以...
这篇文章主要介绍了详解CSS中的伪类与伪元素及二者间的区别,实际上CSS3中规范了一种简单粗暴的方法,即伪类前用一个冒号表示,而伪元素前用两个冒号表示,这样就不容易混淆了,需要的朋友可以参考下CSS伪类的概念及作用CSS伪类(Pseudoclasses)是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudoclass{property:value;}，简单地用一个半角英文冒号(:)来隔开选择符和伪类。CSS很多的建议并没有得到浏...
#CSS伪类选择器##使用css伪类选择器需要注意的使用css的伪类选择器来选择某元素时，需要特别注意 :first-child 和 :nth-child(n) 等时， 网页渲染是从语句的后面开始读取的，也就是说，类似 p:first-child 这样的伪类选择器，指的是“某元素的以p元素作为第一子项的那项”，而不是“p元素的第一个子项”. 原因是因为，其实这里在p：之前，省略了 xxx & nbsp; 这几个字符，导致很容易产生误解。e.g. div p:f...