css选择器拾遗

原创 2016年11月21日 12:15:50

前言:说大量学习‘前端’的人CSS选择器水准停留在元素选择、类选择、ID选择、简单的属性选择、:hover以及后代选择器是不过分的。很多人觉得类似~、+这种同辈选择符不过是鸡肋一般的存在,实际上随着CSS3的兴起,CSS已经能够承担大量之前必须依靠js才能完成的页面效果,有些效果让你难以置信,而且美得没话说。纯CSS代码不仅有更好的性能,而且解救了一大批强迫症。这一切的基础都在于CSS选择器,请认真对待之。熟练运用以下各种选择符一定会给你带来更优质的体验。

属性选择符

1、[hidden]

对于一些全局样式,如果你希望所有带有hidden属性的元素都消失掉,简单地在你的样式表头部加上下面一句代码:

[hidden] {
  display: none;
}

以下标签均不再显示:

  <div hidden>...</div>
  <p hidden class="art">...</p>
  <ul hidden id="title">...</ul>

2、input[type=”text”]

单独把这个拿出来说是因为属性选择符在定义表单样式的时候特别有用。因为诸如文本框(type=”text”)、复选框(type=”checkbox”)、单选(type=”radio”)、提交(type=”submit”)、文件(type=”file”)等都是使用的<input>标签,它们的外观和功能便是通过type属性值来区分的。

2、属性选择器的^= $= *=

属性选择符另一个强大之处在于它能够选择以特定属性值开头、结尾或包含特定属性值的标签。如下:

选取所有ssl安全链接:(href属性以https://开头的a标签)

a[href^="https://"]

选取指向doc文档的链接:(href属性以.doc结尾的a标签)

a[href$=".doc"]

选取src属性包含’prof’的img标签:

img[src*="prof"]

将选取

<img src="jim_prof.jpg" />
<img src="tom_prof.jpg" />
<img src="mike_prof.jpg" />

:not选择符

:not否定伪类实际上是一个十分有用的选择符。

例如我们选择了所有定义了.warning类的p标签,指定他们为特定的样式。我们如果希望选择所有没有定义.warning的剩余标签的样式,以下代码可以做到:

p:not(.warning){

}

另外它也可以配合属性选择符使用,会让人有种事半功倍的感觉,例如我们想选择除了lucy(她可能是一个特殊人物)之外所有人的图像,可以这样:

img[src*="prof"]:not[src*="lucy"] {

}

或者选择除了本站之外的链接:

a[href^="http://"]:not[href^="http://wyuhao.com"] {

}

子代选择符

1 >

注意区分子代选择符和后代选择符,后代选择符用要给空格表示,他将包含所有子孙后代。而子代选择符将只包含直接子元素,它的基本用法是一个尖括号>

例如我们在做导航栏的时候可能会嵌套无序列表,例如:

  <ul class="navList">
    <li></li>
    <li>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </li>
    <li></li>
    <li>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </li>
  </ul>

一级导航菜单’li’

  ul.navList > li {
  }

二级导航菜单

  ul.navList > li > ul > li {
  }

这样将会轻松地将1级、2级导航分开来添加样式。

:first-child :last-child :nth-child :only-child

这几个选择符可能会造成误会:

div:first-child

它的含义不是选取div的第一个直接子元素,而是选取作为第一个直接子元素的div。

看下面的html结构:

<body>
    <h1 id="h1-first"></h1>
    <div>
      <h2 id="h2-first"></h2>
      <p>
        <strong><a></a></strong>
      </p>
    </div>
    <h2></h2>
    <ul>
        <li class="li-first"></li>
        <li>
            <ul>
                <li class="li-first"></li>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li></li>
    </ul>
</body>
h2:first-child  /* 选择#h2-first */
li:first-child  /* 选择li.li-first,见上图,2个li将被选中 */
h1:first-child  /* 选择#h1-first */

:last-child,:only-child同理不再赘述。另外插一句,一个好的设计师在设计html结构的时候会有特别的讲究,比如说在一个<div>或者<article>中唯一只有一个p段落,这个段落可能有特别的含义,做特殊样式设计的时候可以通过以下选择符选择:

  p:only-child {

  }

关于:nth-child,就比前面的几个子代选择符复杂了。

p:nth-child(1)  /* 等同于 p:first-child */

注意子代元素从1开始计数而不是0。

li:nth-child(2)  /* 作为第二个子元素出现的li */
li:nth-child(odd)  /* 作为第奇数个元素出现的li */
li:nth-child(even)  /* 作为第偶数个元素出现的li */
li:nth-child(2n+1)  /* n可以取0 */
li:nth-child(n+3)  /* 第二个及以后出现的li */
li:nth-child(-n+3)  /* 第3个及以前出现的li */

特别提醒,注意nth-child()括号中的n是可以取零的。

下面一张图说明:

:first-of-type :last-of-type :nth-of-type

使用nth-child()可以实现强大的功能,尤其在处理列表元素的时候。但如果我希望选择某一个<div>下的第一个h2标签,然而我又不确定该标签是不是一定会作为第一个子元素出现,该怎么做?

h2:first-of-type  //选择所有同辈元素中第一个出现的h2标题
p:last-of-type  //选择最后一个段落
img:nth-of-type(odd)  //第奇数个img标签(在所有同辈img标签中第奇数个)

简单地说-of-type限定了标签的type,其余用法同-child,不再赘述。

同辈选择符

1、 +

同辈选择符将选择的范围固定在同辈元素中,同辈元素即拥有同一个父元素的所有元素。

相邻的同辈元素使用 + 选取:

h2 + p /* 选择所有紧随h2之后的p段落 */

以上代码选择紧随h2之后的第一个段落。注意!如果p和h2之间还间隔有其他元素,这个选择是无效的。这种选择往往用于将紧随标题的段落和其他段落区分开来添加样式。

2、 ~

该选择符称为普通同辈组合选择符。用于选择在同辈标签中所有指定的标签,不包括它自己

h2 ~ p  /* 选择和h2同级的所有p标签 */
p.special ~ p  /* 选择p.special所有同级的p标签,不包含自己 */

该选择器在选择除自己之外的同级其他元素时有妙用。推荐大家看一个纯css写的gallery应用库,里面广泛用到了这种选择器:http://benschwarz.github.io/gallery-css/.

:target选择符

在一个很长的单页面中,我们常用利用锚点和元素的id属性来制作一个目录,当我们点击该锚点的时候(通常形如<a href="#art-detail">详情</a>)浏览器滚动到该锚点指定元素id的位置。此时浏览器地址栏中的url末尾将包含一个#art-detail,如http://wyuhao.com/demo#art-detail

:target选择器就是在被页内链接选定的时候起作用的。利用这样一个选择符可以做很多有趣的事,比如用它来隐藏、展开一个段落:

  #para1 {
    display: none;
  }
  #para1:target {
    display: block;
  }

  <a id="para1-a" href="para1">展开</a>
  <p id="para1">abcabcabcqwertyuiop<a href="#para1-a">关闭</a></p>

巧妙地利用css实现页面的交互是不是略显神奇,事实上在上文提到的gallery应用库:http://benschwarz.github.io/gallery-css/中也利用了:target实现了更酷的相册。

这里有一个小的例子可以看一下target实现纯css相册

::selection选择符

该选择符是css3中新增选择符,用于选定用户在页面中选中的内容,我们可以以此做一些细节的修改(主要是照顾强迫症或者完美主义者)。

通常我们选定的文字默认为蓝底:

做以下修改:

  ::selection {
    color: #fff;
    background-color: #936;  
  }

将选定文字换成更契合主题的蓝紫:

结语

日渐强大的css将给我带来前所未有的体验,但这一切的基础都是css选择器,这是基础中的基础,熟练掌握它们将会给你想不到的收益。

版权声明:本文为博主原创文章,未经博主允许不得转载。

OpenGL选择与拾取GL_SELECT 附源码

讲述在OpenGL下,如何选择和拾取(selecting and picking)三维物体,这里使用3D模型中的obj格式的模型。...
  • Mahabharata_
  • Mahabharata_
  • 2016年12月13日 13:19
  • 2198

数据挖掘笔记-特征选择-遗传算法

基于遗传策略的特征选取 遗传算法通常实现方式为一种计算机模拟。对于一个最优化问题,一定数量的候选解(称为个体)的抽象表示(称为染色体)的种群向更好的解进化。传统上,解用二进制表示(即...
  • wulinshishen
  • wulinshishen
  • 2014年08月13日 13:11
  • 4256

css中 :not() 选择器的用法

:not() 选择器用于一些特殊的功能的呈现上
  • Candy_home
  • Candy_home
  • 2014年11月18日 05:19
  • 5926

前端知识深入学习-----CSS3新增选择器

CSS常见的选择器有:通配符选择器, 元素选择器,类选择器, ID选择器,后代选择器CSS3新增基本选择器有:子元素选择器,相邻兄弟选择器,通用兄弟选择器,群组选择器基本选择器—-子元素选择器概念:子...
  • kf_qyl
  • kf_qyl
  • 2018年01月08日 17:12
  • 4

css选择器的权值与优先规则

前言在html设计当中,经常会遇到一个问题——如果对同一标签的相同属性设置了不同的值,那么哪一个值是有效值呢?答案就是权值高的覆盖掉权值的值,权值相同的采取就近原则。...
  • Mrcxt
  • Mrcxt
  • 2016年07月25日 16:35
  • 3237

css3中属性选择器的使用

本篇简要介绍一下css3中属性选择器的使用,例。 CSS3中属性选择器的使用 /*[id*= section1]{ */ /*back...
  • u012859748
  • u012859748
  • 2016年09月16日 16:40
  • 407

Acticle 19:css3选择器的汇总

css3选择器分为基本选择器、层次选择器、属性选择器、伪类选择器和伪元素选择器。 今天主要讲了,基本、层次、属性、伪类选择器一、基本选择器 * 通配选择器 选择文档中所有的html元素 ’*...
  • amytun_yu
  • amytun_yu
  • 2016年11月16日 18:25
  • 123

jquery、css 的选择器(逗号/空格/英文句号/大于号/加号/波浪号)备忘

转自:http://hi.baidu.com/vguishjxghimpxs/item/e893c42510a1c5102a0f1c54 在選擇器里面幾種符號 1,(逗號) 2 (空格) 3.(英文...
  • chelen_jak
  • chelen_jak
  • 2014年03月03日 16:56
  • 7840

为什么CSS选择器是从右往左解析

一、CSS选择器的解析顺序相信很多人在一开始接触CSS的时候都会看到一条规则就是尽量少使用层级关系,比如尽量不要写成:#div P.class { color: red; }而是写成:.cla...
  • jinboker
  • jinboker
  • 2016年08月05日 09:38
  • 2599

CSS选择器详解(伪类)

CSS选择器详解 之 伪类伪类对大小写不敏感结构伪类选择器结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文档变得...
  • Panda_m
  • Panda_m
  • 2015年11月28日 19:09
  • 10785
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css选择器拾遗
举报原因:
原因补充:

(最多只允许输入30个字)