最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法，觉得十分实用，就自己尝试了一下，并把它给记录下来： 这是最基本的样式：1 2 li{3 list-style-type: none;4 float: left;5 width: 60px;6 height: 60px;7 background-color: #979698;8 margin-left: 10px;9 text-align: center; 10 line-height: 60px; 11 border-radius: 50%; 13 ...
《CSS3基本选择器》 一、通配符选择器（＊） *{ marigin: 0; padding: 0; } 二、元素选择器(E) ...
CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSer们只有望洋轻叹。虽 然如此，但有前瞻性的我们，又怎能停步不前呢？今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(a...
目标： css中after伪类，last-child伪类的使用。以及部分css3的属性。 过程： 在制作导航时，经常会遇到在每一个li后面添加一个分割符号，到最后一个元素的时候，分割符就会去掉的一种效果。 如图 那么制作这样的一个效果，怎么用纯css很简单的完成了。这里用到了css的伪类。 html部分 Home About Me Portfolio Blog Resources Contact Me 然后调用css样式 body{ background: #ebebeb;...
是不是觉得target有点眼熟?! 今天要讲的不是HTML的标签里面有个target属性。 target伪类是css3的新属性。 说到伪类，对css属性的人肯定都知道:hover、:link、:visited、:focus等等，target用法跟他们是同出一辙的。 官方定义是： URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。 :target 选择器可用于选取当前活动的目标元素。 如果你是第一次看到这个定义，是...
直接上源码：```html 使用CSS3美化按钮 body { padding-top: 50px; } .download-info { text-align: center; } /* 默认状态下的按钮效果 */ .btn { background-color: #0074cc; *background-color: #0055cc; /* IE6,7 */ /* CSS3渐变制作背景图片 */ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); background-image: -...
CSS3中的伪类选择器例如:hover，:before，:after在已经在前端开发中被广泛使用，但是可能开发者还不太熟悉:checked这个伪类选择器。本文将介绍:checked这个伪类选择器以及如何使用它写出更加有优雅的代码。 :checked伪类选择器顾名思义，表示的是 type="checkbox" 的input元素被选中的状态。在前端开发中，我们常用:hover伪类来设置鼠标悬浮时的样式，而由于checked状态的改变需要用户进行点击操作，使用:checked伪类，我们则可...
本篇文章给大家带来的内容是介绍css3的:out-of-range和:in-range伪类有什么用？（代码示例），让大家了解:out-of-range伪类和:in-range伪类的作用和使用方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。css3 :in-range伪类:in-range伪类选择器，用于对元素绑定的值在指定范围限制内时具有范围限制的元素进行样式设置。换句话说，当它匹配元素的value属性值在其指定的范围限制内时，可以设置这些匹配元素的...
本篇文章主要给大家介绍css3新增伪类有哪些？首先大家应该都知道css是什么吧？CSS是Cascading Style Sheet的缩写。译作”层叠样式表单“。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。简单的说CSS就是用于控制网页的样式和布局。 而css3是最新的 CSS 标准。那么这个最新的标准，相较于css2的标准有哪些新增的属性或者伪类呢？下面我们就为大家详细总结介绍，css新增的一些伪类。1、p:first-of-typ...
最近在梳理CSS的知识，发现了很多知识盲区，归根结底还是以前学习的时候低估了CSS，认为它太简单，应该把重点放在JS上面。今天就分享一个实用的CSS3小知识，即css3:target选择器，还可以用css3:target做一个类似tab的切换效果。相信很多人应该也不熟悉这是属性吧。那继续往下看吧。一、怎么使用CSS3:target选择器target是CSS3伪类选择器中的一种，用来匹配文本中某个标志符的目标元素。＃ 锚的名称是在一个文件中链接到元素的url，...
CSS3中新的属性给我们带来了不少的便利，比如伪类选择器 nth-child()，但是它在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)（比如nth-of-type(1)）这个特殊的类选择符可以设置更加个性的标题和段落等，不过，目前nth-of-type(n)只支持火狐3、opera、safari和chrome等部分浏览器。:nth-child()选择某个元素的一个或多个特定的子元素；你可以按这种方式进行选择： :nth-child(length);/*参数是具体数字 length为整数*/:nth-chil...
在工作中，经常会用到CSS中的选择器，选择器也分为很多种，比如：ID选择器，类选择器，标签选择器，伪类选择器等等，那今天就着重讲讲伪类选择器中的nth-child是什么意思，nth-child怎么使用，以及他与nth-of-type的不同，他们都是CSS3中的伪类选择器，而且很多人认为意思差不多，其实不然，他们还是有区别的，那接下里，就和大家聊聊CSS3 nth-of-type和nth-child的使用方法，以及他们之间的区别。一、nth-child( ) 与 nth-of-type...
这篇文章主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下所谓UI选择器：就是指定的样式只有当元素处于某种状态下时，才起作用，在默认状态下不起作用！浏览器兼容性：E:hover 支持firefox、safari、Opera、ie8、chrome ------------E:active 支持firefox、safari、Opera、chrome ...
CSS3 :default 伪类选择器只能作用在表单元素上，表示默认状态的表单元素。接下来通过本文给大家介绍CSS3 :default伪类选择器使用简介，感兴趣的朋友跟随脚本之家小编一起看看吧一、CSS3 :default伪类选择器简介CSS3 :default 伪类选择器只能作用在表单元素上，表示默认状态的表单元素。举个例子，一个下拉框，可能有多个选项，我们默认会让某个 <option> 处于 selected 状态，此时这个 <option> 可以看成是处于默认状态的表单元素...
这是通过css3伪类实现的3d按钮，html代码为： <p id="container_buttons"><p><a class="a_demo_three">点我！</a></p><p><a class="a_demo_three second_button">来嘛，别害怕！</a></p><p><a class="a_demo_three third_button">秋叶网络博客（www.mizuiren.com）</a></p></p>css代码为： #container_buttons{cursor:pointer;}.a_demo_three {background-color:#3bb3e0;font-family: Open Sans, sans-serif;font-size:12...