Blog

上篇博文中我们了解了四个基本的结构性伪类选择器，之所以单独列出去，也算是抛砖引玉吧，当作是对结构性伪类选择器的初步消化。其实换个角度，不要想的那么抽象，所谓“结构性”，那就从结构形式上来理解，加上这些选择器名称的语义，你会发现这些只是需要死记硬背的东西而已。下面开始罗列吧（为方便理解和记忆，我把有关联性的选择器给并在一起列出了）： 1、:first-child选择器和:last-child选择器。 顾名思义，前者表示选择某类元素的第一个元素，后者表示选择某类元素的最后一个元素。 2、:nth-child选择器和:nth-last-child选择器。（* :nth-last-child与:nth-child用法相同，只不过是倒数元素而已，下面就以:nth-child来介绍。） 此选择器使我们可以选择某类元素列表的任何一个元素或一类元素，用法有三： （1）.选择某一个指定元素： Element:nth-child(n)表示选择该数列的第n个元素； （2）.此外，:nth-child还有个高级用法——筛选奇偶数列：< Element:nth-child(odd)表示选择该数列的所有奇数行； Element:nth-child(even)则表示选择该数列的所有偶数行。 （3）.更高级的用法——以表达式代替n循环使用样式： :nth-child(i*n+x)，其中1≤x≤i（i为非零正整数）。表示选择从第一个元素算起，每隔i个（包含第i个）的一系列数列。 3、:nth-of-type选择器和:nth-last-of-type选择器。（* :nth-last-of-type与:nth-of-type用法相同，只不过是倒数元素而已，下面就以:nth-of-type来介绍。） 这两个选择器与上面提出的两个奇偶数列选择器类似，不过在特殊情况下使用显得更精确一些。两者的区别在于，上者在计算该元素是奇数列or偶数列时，是连同与其共一父级元素的所有同级元素来计算的，而后者只针对同一类别的元素进行计算。如此来看，比如若是单纯的ul列表，判断li元素奇偶行，那么两者都适用；如果是dl列表，内含dt和dd两种元素，而只需选择dt奇偶列不同来定义样式，此时就只能用:nth-of-type选择器。语法同上。 4、:only-child选择器。 表示选择某元素所在的父级元素下其是单独存在的元素。 有了这些选择器，我们又省掉了很多JS了，真是太棒了。语法已经描述的比较到位了，我就不贴源码示例了，大家多动手，多实践，这样才更容易掌握哈。

前面我们一起了解过CSS3新增的一些属性选择器，今天我们就接着来看看另一大类选择器——伪类选择器，相对于可以自行命名的类选择器，伪类选择器是固定的，也就是默认已定义好的选择器，不可随便起名，比如我们常会用到的a:hover里的:hover伪类选择器。伪类选择器又分结构性伪类选择器和状态伪类选择器。下面我们先来看看CSS3的一些相当有用的结构性伪类选择器吧。 :root 选择器。根元素，HTML文档的根元素（or称最顶层元素），即。 :not选择器。譬如想对某个结构元素内的元素使用一种样式，但是又想排除这个元素下面的某个子元素，让它不使用此样式，可以使用:not。 :empty选择器。可规定当某元素内容为空白的时候，使用其所定义的样式。 :target选择器。使用此选择器来对页面中的target元素（该元素的ID被当作超链接对象）指定样式，该样式只在用户点击了对应的超链接，并跳转到target元素后起作用。 以上是四个最基本的结构性伪类选择器，咱们放在一起看示例：     CCJK本地化官方博客 我们提供专业的网站开发、翻译本地化、网络推广一站式解决方案 CCJK提供专业的多语种翻译，网站开发，翻译本地化，网络推广以及elearning等一站式解决方案。 请依次点击查看下面对应列表效果：NO.1NO.2NO.3 我的ID为"no1" 我的ID为"no2" 我有两行内容。 我的ID为"no3" 我有三行内容。 我有三行内容。 大家可以将此代码另存后查看对应的选择器用法哈。

前面已经了解过HTML5针对表单新增的一个form属性，随着后面的深入了解，大家会发现HTML5在表单这块的改善是多么令人兴奋。大家都知道，表单是用来收集网站客户群信息的，那么为了提高信息的有效性，我们需要在前端就做一些基本的判断，比如说必填项，咱不能说收集到的信息该有的没有，却只收集到一些附填项吧。而之前做这样的判断都是需要用JS来实现的，现在好了，HMTL5一个简单的属性就做到啦。今天咱就先来看几个实现表单基本验证的新属性： 1、 required 。该属性用于大多数的输入元素（除了隐藏元素、图片元素按钮等）。用法： required type="text"/> 顾名思义，required属性表示此输入框是必填项，提交表单的时候，若此输入框为空，那么将提示用户输入后提交。如图： 2、 pattern。先看用法： 该属性的值一般为正则表达式，当用户输入的内容符合一定的格式，才能提交成功，否则将提示用户匹配相应格式，上面的“d{8}”表示必须输入8位数字。我只输入7位，看看结果： 3、min和max。很显然这两个属性是与数字相关类型的输入框专用的，它可以用来限制数值或日期范围，属性值显然是数字了。如限定一个大于8小于11的输入范围写法为： 4、step。该属性控制输入框的值增加或减少的步幅，举个例子来看看具体用法：比如想让用户输入的值在0-20之间，并且要是是4的倍数，那么就这么写： 针对后面两个属性，火狐表示不再支持，不过大家可以在谷歌和Opera里看到效果，我用谷歌的故意输入错误信息的效果分别如下：

网页的视觉效果无非取决于文字和图像，而文字又占据着举足轻重的主导地位。所以UI设计师在设计效果图时都要花不少心思在字体运用上，首先是根据网站风格和面向对象来选择合适的字体，其次要根据内容重要性、板块主次性来运用粗、斜体、大小字号来表达视觉层次感。 显然，UI设计注重于美观效果，这是无可厚非的；但是到了网页美工切图时，问题就不这么单一了，比如说效果图中的字体是不是大众电脑系统的通用字体等，是需要考虑些实用性的。下面就说说我所遇到的两个问题及其解决方案和可选性： 一、当网页运用字号小于12px的字体时，部分浏览器表现固执，默认都只显示为12px的字号，譬如谷歌浏览器。 通常情况，尤其是中文网站，我们最小都是用的12px的字号，但是一些英文网站为了达到一定效果，一般都会需要些小字号字体来映衬，不知道大家遇到过没有，反正我是遇到过，也曾特别不理解，因为在谷歌浏览器测试时发现，我设为8px字号的字体俨然就是12px的大小，很不服气地又试了试，终于发现，凡是低于12px的字号，谷歌浏览器统统默认显示为12px大小，唉，感叹谷歌浏览器的开发者在用户体验上做的如此细微。可是个别情况还是得定当别论，请教了高手，问题解决，只需在样式里添加这样一个针对谷歌浏览器的专有属性设置：-webkit-text-size-adjust:none;真的是解铃还须系铃人啊，既然你谷歌做了默认设置，那咱就想法改变这个设置啦。 二、当网页运用字体不是大众电脑系统的通用字体时，咱改如何实现呢？ 好在CSS确实够强大，咱可以尽情的调用你所拥有的任何字体文件，看具体方法： @font-face { font-family : name(字体名称) ; src : url (绝对或相对 url 地址指定OpenType字体文件) ; sRulesZ(样式表定义) } 但是试了后发现，兼容方面还不合格，继续努力发现问题出在字体文件的格式上： * .TTF或.OTF，适用于Firefox 3.5、Safari、Opera * .EOT，适用于Internet Explorer 4.0+ *…

CSS选择器大致可分为三类：基本选择器、属性选择器和伪类选择器。大家都知道，选择器主要是用来确定html的树形结构中的DOM元素节点。每个学习使用CSS的人都是从基本选择器开始的，自然而然就运用自如了吧，像通配符选择器（＊）、类选择器（.className）、ID选择器（#IDName）、元素选择器（ul、li等）等等，这里就不赘述了。 而属性选择器早在CSS2中就被引入了，其主要作用就是通过选择带有指定属性的HTML元素从而设置特殊样式。如今，使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。下面我们来看看CSS3中主要增加的几种属性选择器： Element [attribute]：表示将选择所有运用了属性attribute的元素定义样式。 Element [attribute="value"]：表示将选择属性attribute的属性值是 “value”的元素定义样式。 Element [attribute^="value"]：表示将选择属性attribute的属性值是字符串“value”开头的元素定义样式。 Element [attribute$="value"]：表示将选择属性attribute的属性值是字符串“value”结尾的元素定义样式。 Element [attribute|="value"]：表示将选择属性attribute的属性值是字符串“value”或 “value-”开头的元素定义样式。 Element [attribute*="value"]：表示将选择属性attribute的属性值包含字符串 “value”的元素定义样式。 Element [attribute~="value"]：表示将选择属性attribute里包含属性值“value”的元素，即指属性attribute的属性值是一个词列表，并且各词以空格隔开，其中词列表中包含了一个value词的情况。 下面我们用实例演示下具体用法和效果： 我的className是ccjk，ID是first 我的className是ccjk 我的className是cnccjk 我的className是ccjken 我的className是cnccjken 我的className有ccjk和en 我的className是ccjk-en 我的className是ccjk，ID是last 页面效果： 下面我们来依次尝试上面的几种属性选择器：…

记得在前面讨论过div+css实现圆角，那个方法在以前还是蛮受用的，不过随着CSS3的普及，我们将抛弃那个因CSS3出现而显得笨重的方法了。CSS3中直接添加了圆角属性border-radius，这个属性对于前端开发者来讲，简直振奋人心。下面我们来看看，这个属性是如何定义圆角的。 首先说一下border-radius的属性值，如border-radius：10px;即以像素为单位的数值，它表示的是圆角半径为10像素。很简单哦，只可惜IE浏览器仍然不友好啊，只有IE9以上版本才表示支持。 再者，针对不同内核的浏览器，写法也有所不同，例如： IE9+:border-radius:10px; Opera:-o-border-radius:10px; FireFox:-moz-border-radius:10px; Chrome & Safari:-webkit-border-radius:10px; 看起来有些麻烦又难记哦，不过没有关系，大家需要了解就好了，因为这几个主流浏览器的较新版本都是支持border-radius：10px;这个写法的。 border-radius:10px;还可以分解为： border-top-left-radius:10px; /*定义左上角*/ border-top-right-radius:10px; /*定义右上角*/ border-bottom-right-radius:10px; /*定义右下角*/ border-bottom-left-radius:10px; /*定义左下角*/ 仔细看看，这个很容易理解，就想我们用的边框属性border，可以分解为：border-top,border-right,border-bottom, border-left一样。 如此分解就说明我们可以随心所欲的定义一个盒模型某一个或某几个角为圆角，很方便实用。 好了，下面让我们来动动手实践下效果吧： 此标题四角均定义为圆角，无边框《CSS3随心所欲定义圆角》——CCJK提供专业的网站开发、翻译本地化、网络推广一站式解决方案 此标题四角均定义为圆角，设置四边实线边框《CSS3随心所欲定义圆角》——CCJK提供专业的网站开发、翻译本地化、网络推广一站式解决方案 此标题定义上面两个角为圆角，设置四边实线线边框《CSS3随心所欲定义圆角》——CCJK提供专业的网站开发、翻译本地化、网络推广一站式解决方案 此标题定义上面两个角为圆角，设置四边虚线线边框《CSS3随心所欲定义圆角》——CCJK提供专业的网站开发、翻译本地化、网络推广一站式解决方案