css_那些被忽略但有时又很强的选择器

忙里偷闲的学习

在切页面的时候,我们免不了要和css打交道,甚至说是颇深,在HTML中,想要快速的定位元素,除了广为人知的.class、#id、通配符*、element元素等选择器,css还为我们提供了更多在某些场景下,效率更高的选择器。所以,最好自己也尝试一下,不然就算你看过这篇随手记,也几乎没太大用处。即便不太容易记住,但是会留个印象,是吧~
PS:星星表示此选择器在本文中的强调程度。和常见度无关

CSS3选择器 —— 元素选择器 [element] (★★)

  1. element{}。这个会选择所有能匹配到的element;如div{},则所有的div都会被选中。
  2. element1,element2,....{}。这个会选择所有能匹配到element;如div, a, p{} ,则所有的div,a,p都会被选中。
  3. element1 element2{} 这个会选择父元素为element1的所有的element2子元素;如div a{},则div下所有的a都会被选中。
  4. element1>element2{}。这个会选择紧跟着element1的element2元素;如

    div+p{} ,则div中的第一个p会被选中。

CSS3选择器 — — 属性选择器 [attribute](★★★★)

这是一个demo1
这是一个demo2

选择器前面也可以添加元素,如:a[src^='https']{ … }, .info[title*='info']。

  1. [target]{}。这个会选择带所有带target属性的元素。在这里,上面两个a标签都会被选中。
  2. [target=_blank]{}。这个会选择所有带target属性且值为_blank的元素。在这里,上面两个a标签只有第一个被选中。
  3. [title~=hi]{}。这个会选择所有带title属性且值包含 hi 的元素。在这里,上面两个a标签第二个会被选中。
  4. [title|=a]{}。这个会选择所有带title属性且值是以a开头的元素。在这里,上面两个a标签只有第一个被选中。
  5. PS:上面2、3、4三个规则,属性的值是一个单词。而下面三个则是字符串。注意字符串和单词是不一样的
  6. [src^="https"]{}。这个会选择所有带src属性且值是以"https"开头的元素。在这里,上面两个a标签只有第一个被选中。
  7. [title$="hello"]{}。这个会选择所有带title属性且值是以"hello"结尾的元素。在这里,上面两个a标签第一个会被选中。
  8. [title*="hi"]{}。这个会选择所有带title属性且值包含 "hi" 的元素。在这里,上面两个a标签第二个会被选中。

CSS3选择器—— 伪 类/元素选择器 [:...](★★★★★)

前言

这个是本文中的重点所在了,说实话,很多伪类/元素选择器,真的很不错,但也真的很难在实际运用中见到,我想大概是因为繁琐吧,毕竟大家都习惯了class统治样式,其他的都是不入流的小招式,233333.

就拿我举例来说,在某个页面的样式中,需要将后端给的数据渲染到页面中,但是这个数量是一直增加的。每当第三个元素,就与其他的有所区别。我得知需求后,第一个想法就是js判断。。。可是这样违背了样式的控制权给了js

还好旁边的前端小哥经验颇深,且说我有什么不知道的或者觉得可以再优化的地方,就找他。滴~好人卡。。。

他看到这个问题,抢过我的键盘,啪啪啪啪,哦不,哒哒哒几行css代码完美的解决!

握草,这么吊。。。厉害了我的哥。

这时我也看到了 :nth-child(n);这个css选择器。对不起,请收下我的膝盖,我保证我之前看过这个选择器,但我也确定我只是看过而没有用,就忘记了。GG。遂在午休时候,认真的补了一遍css选择器,咋补?当然是选择原谅她啊,然后晚饭后写了这篇《那些被忽略但有时又很强的选择器》

在这个分类,选择器实在是太多了,详细说明我就不做搬运工了,我就挑几个我觉得不错的,写出来吧,在文末会给参考文档。

a标签相关选择器

  1. :link 选择所有未被访问的链接。
  2. :visited 选择所有已被访问的链接。
  3. :active 选择活动链接。

input相关的选择器

  1. :enabled 选择每个启用的input 元素。
  2. :disabled 选择每个禁用的 input 元素
  3. :checked 选择每个被选中的 input 元素。
  4. :focus 获取焦点的input元素。 这个常见的应用场景是在表单时,对应的输入框样式

常见伪类/元素选择器

  1. :hover 鼠标移动到上面的样式。 这个常见的应用场景是用作遮罩层
  2. ::before, ::after 元素的前后样式。 这个常见的应用场景有:清除浮动、添加特定的样式、等等
    1. PS:这里是用了两个冒号,因为它们是伪元素,虽然说用单冒号也能生效,但是为了推动css3,我们还是统一用双冒号咯。
    2. 附上两篇文章总结伪类和伪元素 ———— ——— 详解 CSS 属性 - 伪类和伪元素的区别
  3. :not(selector) 给非所选元素设定样式

这里有趣的几个有:

  1. ::first-letter : 给所选元素的首字母/中文 应用样式。这个选择器可以做首字母效果。很方便,代码如下:

    Oh my god

    我的天

  2. ::first-line: 给所选元素的首行应用样式。这个应用不太多吧。。

  3. ::selection 选择被用户选取的部分。 这个应用场景有,当用户选择文本是,就可以使用这个选择器,让被选取的的文本更有趣。这个选择器支持的样式也有限。

  4. :target 这个就很有趣了,不过不支持ie8及以下。 当前页面活动的锚点的样式。代码示例:

    
    jump target1
    jump target2
    

    target1

    target2

    效果体验如下。点击两个锚点,对应的id活跃时,就可以有背景。

    jump target1 ——— jump target2

    target1


    target2

  1. 最后一个当属 :nth-child(n) 啦

    就像我上面说的,这个选择器用来循环选择某个元素,简直不要太爽!

    aaa
    bbb
    ccc
    
    

    aaabbbccc

写到最后写懵逼了。

这懵逼的排版。。。。原谅我吧

233333333333

参考文档

CSS 选择器参考手册

原文链接

那些被忽略但有时又很强的选择器

你可能感兴趣的:(css_那些被忽略但有时又很强的选择器)