css中那些容易被我们程序猿所忽略的选择器

css中那些容易被我们程序猿所忽略的选择器

作为一个程序猿,我们可能会遇到这样的问题,假如:有5个li,要求给第三个li设置背景颜色怎么办?有人会说,用JS啊,循环遍历出第三个不就行了。但是,用JS解决一个属于CSS样式的小问题,不觉得特别麻烦吗?

再举一个例子:现有5个input标签,给属性为disabled的input设置背景怎么办?还是用js循环对吧,不过就是太麻烦。如果不用js,那应该怎么办?那么,今天在就来介绍一下那些容易被我们遗忘的css选择器:

看了这个表格之后,我们再回过头来看下,刚刚说的两个例子:

第一个例子:在5个li中,给第3个li设置指定的背景色

  li:nth-child(3){
      background:red
  } //以背景色红色为例

  第二个例子:在5个input中,给属性为disabled的input设置背景色

  input:[disabled]{
      background:red;
  } // 以背景色红色为例

  这样一来是不是比直接用JS要简单许多呢?希望对您有所帮助。

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明。
原文地址:https://www.cnblogs.com/Lxb98117/p/CSS_Selector.html