css选择器拾遗

最新推荐文章于 2024-09-19 11:25:25 发布

RockyHills

最新推荐文章于 2024-09-19 11:25:25 发布

阅读量857

点赞数

分类专栏： css笔记文章标签： css 选择器

本文链接：https://blog.csdn.net/a153375250/article/details/53258082

版权

css笔记专栏收录该内容

4 篇文章 1 订阅

订阅专栏

前言：说大量学习‘前端’的人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选择器，这是基础中的基础，熟练掌握它们将会给你想不到的收益。

RockyHills

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录