强大的CSS选择器

摘要

选择器可以说是CSS的核心。从最初的通配符*、元素、id、class选择器,过渡到伪元素以及CSS3中提供的丰富的伪类、属性选择器,让我们在选取网页中的元素变得越发的简便、快捷。

平时我们在写网页的过程中,多数时候都是为了完成页面表现而去写代码,从来没有仔细去探究过更加简洁、好用的CSS选择器。少数时候我们为了实现一些页面表现还会借助于JavaScript。事实上,当我们花点时间研究一下CSS选择器,我们便会发现:我们完全有能力在不借助JS的情况下通过CSS选择器来实现想要的效果。

选择器可以说是CSS的核心。从最初的通配符*、元素、id、class选择器,过渡到伪元素以及CSS3中提供的丰富的伪类、属性选择器,让我们在选取网页中的元素变得越发的简便、快捷。

平时我们在写网页的过程中,多数时候都是为了完成页面表现而去写代码,从来没有仔细去探究过更加简洁、好用的CSS选择器。少数时候我们为了实现一些页面表现还会借助于JavaScript。事实上,当我们花点时间研究一下CSS选择器,我们便会发现:我们完全有能力在不借助JS的情况下通过CSS选择器来实现想要的效果。

1、通配符*

选择所有元素

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }

注:*代表了网页中的任何元素,因其“杀伤力”过于巨大,所以笔者建议此选择器尽量少用。当然,特殊情况特殊对待。

2、元素选择器

选择指定的一类元素

  1. a {
  2.     text-decorationnone;
  3. }

3、id选择器

选择id为wrap的元素

  1. #wrap {
  2.     color#f00;
  3. }

4、class选择器

选择class为box的一类

  1. .box {
  2.     line-height: 1;
  3. }

5、伪元素选择器

选择网页中包含的文本,伪元素使用双冒号::定义,多数单冒号:也能被识别

  1. p:first-letter {
  2.     /* 段落文本首字变红 */
  3.     font-weight#f00;
  4. }
  5. p:first-line {
  6.     /* 段落文本首行加粗 */
  7.     font-weightbold;
  8. }
  9. p:before {
  10.     content"前插文本";
  11. }
  12. p:after {
  13.     content"后插文本";
  14. }

注::before和:after须配合content一起使用才能生效。

  1. p::selection {
  2.     /* 用户选中的段落文本变红 */
  3.     color#f00;
  4. }

注:

1、::selection目前只支持双冒号::定义;

2、::selection只可以应用于少数的CSS属性:color, background, cursor和outline;

3、如果发现浏览器(IE低版本不支持)添加之后不生效,请添加对应浏览器前缀试试,火狐如下:

  1. p::-moz-selection {
  2.     /* 用户选中的段落文本变红 */
  3.     color#f00;
  4. }

6、关系选择器

E, F: 组合选择器,选择所有的E元素和F元素

  1. div, p {
  2.     color#f00;
  3. }

E F:后代选择器,选择E元素内部的所有F元素

  1. ul li {
  2.     border-bottom1px solid #f00;
  3. }

E > F:子选择器,选择E元素的直接子元素中的所有F元素

  1. ul > li {
  2.     border-bottom1px solid #f00;
  3. }

注:仅限ul的直接子元素li,如果li里面还嵌套着一个ol时,最里面的li将被忽略

E + F:相邻兄弟选择器,选择与E元素具有相同父级且下一个紧邻E的F元素

  1. div + p {
  2.     border-bottom1px solid #f00;
  3. }

E ~ F:一般兄弟选择器,选择与E元素具有相同父级且位于E之后的所有F元素

  1. div ~ p {
  2.     border-bottom1px solid #f00;
  3. }

7、属性选择器

E[attr]:选择所有具备属性attr的E元素

  1. input[name] {
  2.     border-bottom1px solid #f00;
  3. }

E[attr=val]:选择所有具备属性attr且属性值为val的E元素

  1. input[type=password] {
  2.     outline1px solid #f00;
  3. }

E[attr~=val]:选择所有具备属性attr且属性值含有单词val的E元素

  1. p[class~=a] {
  2.     outline1px solid #f00;
  3. }

注:如:class="a"、class="a b"、class="b a c"均可,但class="ab"、class="aa b"不可。

E[attr*=val]:选择所有具备属性attr且属性值包含val的E元素

  1. p[class*=a] {
  2.     outline1px solid #f00;
  3. }

注:[attr*=val]和[attr~=val]的区别在于:其不但具备[attr~=val]的特性,还可以选择class="ab"、class="aa b"这样的元素。

E[attr|=val]:选择所有具备属性attr且属性值以单词val或val-开始的E元素

  1. p[class|=a] {
  2.     outline1px solid #f00;
  3. }

注:如:class="a"、class="a-b"、class="a-b c"均可,但class="ab"、class="ca-b"、class="c a-b"不可。

E[attr^=val]:选择所有具备属性attr且属性值以val开头的E元素

  1. p[class^=a] {
  2.     outline1px solid #f00;
  3. }

注:[attr^=val]和[attr|=val]的区别在于:其不但具备[attr|=val]的特性,还可以选择class="ab"这样的元素。

E[attr$=val]:选择所有具备属性attr且属性值以val结尾的E元素

  1. p[class^=a] {
  2.     outline1px solid #f00;
  3. }

8、伪类选择器

:link:选择未访问的链接

:visited:选择已访问的链接

:hover:选择鼠标悬停元素

:active:选择被激活时的元素,可用于任何具有tabindex属性的元素

:focus:选择获得焦点时的元素,可用于任何具有tabindex属性的无线

:enabled:选择可被编辑或只读的表单元素

:disabled:选择不可被编辑的表单元素

:read-only:选择只读的表单元素

:target:选择被设置了锚点且被触发时的目标元素

  1. #info:target {
  2.     color#f00;
  3. }

注:当访问的地址如abc.html#info时,id="info"的元素将字体变红

E F:nth-child(n):选择E元素的第n个子元素F

E F:nth-last-child(n):选择E元素的倒数第n个子元素F

E F:nth-of-type(n):选择E元素第n个指定类型的子元素F

E F:nth-last-of-type(n):选择E元素倒数第n个指定类型的子元素F

E F:first-child:选择E元素的第1个子元素F

E F:last-child:选择E元素的倒数第1个子元素F

E F:first-of-type:选择E元素第1个指定类型的子元素F

E F:last-of-type:选择E元素倒数第1个指定类型的子元素F

E F:only-child:选择E元素中有且仅有1个的子元素F

E F:only-of-type:选择E元素中有且仅有1个指定类型的子元素F

E:empty:选择没有子元素且无文本节点的E元素

E:lang(val):选择具有lang属性且值为val或val-开始的E元素

E:not(selector):选择不是指定选择器的E元素

  1. p:not(.box) {
  2.     color#f00;
  3. }

特别提醒:

1、由于CSS3选择器低版本的浏览器不支持,所以使用的时候最好确保项目应于IE9+;

2、对于样式的优先级:我们只需要记住下面的关系即可:

!important > 行间 > id > class > 元素

3、我们在书写CSS的过程中,要尽可能的减少层级关系,一般最好不要超过3层。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: