后端转前端之选择器

选择器

今天学习了css的选择器,一共有这么几种

id选择器
通过#号加id的方式找到对应html标签,值得注意的点是id理论上是唯一的,所以实际上大部分用于某个特殊标签的处理,但是在大部分浏览器上id相同的html标签也能成功显示.

      #yty {
        background-color: red;
      }

类选择器
通过.号加classname的方式找到对应html标签,与id选择器的差别就是类选择器的目的就是对某些通用的标签进行处理,例如所有显示成功的地方都给一个success的类名,然后在css里把颜色设置成绿色,同理error的地方设置成红色.

      .yty {
        background-color: green;
      }

标签选择器
通过标签名直接找到对应html标签.

      body {
        background-color: grey;
      }

属性选择器
属性选择器的用法我就举两个例子,当然还有更多用法

	  //所有html标签中有class属性的
	  [class] {
        background-color: chartreuse;
      }
      [title] {
        background-color: chartreuse;
      }
      //这种就等价于类选择器中.yty的写法
      [class="yty"] {
        background-color: chartreuse;
      }

其实类选择器和id选择器在我的理解里就是特殊化处理的属性选择器.因为id和class也是一种属性.
当然属性选择器在为不带有 class 或 id 的表单设置样式时是非常好用的.例如input标签,通常是带着type="text"之类的,这时就可以用属性选择器,当然你也可以给这些标签添加class用类选择器.

通配符选择器
这个选择器我认为是标签选择器的特殊版本

 * {
   margin: 0;
   padding: 0;
 }

后代选择器和子元素选择器
这两个选择器放在一起讲,因为其实这个有点容易混淆.

//class名为box的标签中class名为inner的标签 后代选择器
.box .inner {
  color: red;
}
//class名为box的标签中子元素class名为inner的标签 子元素选择器
.box>.inner {
  color: green;
}
<span class="box">
      <span class="inner">123</span>
      <span>
        <span class="inner">123</span>
      </span>
      <span>
        <span>
          <span class="inner">123</span>
        </span>
      </span>
    </span>

第一个123是绿色的,第二个123是红色,第三个123是红色.为什么?
第一个123是box的子元素,第二个123是box的孙元素.子元素选择器只影响子元素,不影响孙元素,第三个就更远了.
而后代选择器则是子元素,孙元素以及更后面的都会影响.

相邻兄弟选择器和同胞选择器
这个就类似与子元素选择器的用法,子元素选择器是2个选择器之间用>,相邻兄弟选择器则是+,同胞选择器则是~.那么这两个直接的关系又类似与子元素选择器和后代选择器.相邻兄弟选择器是指选择紧接在指定元素后的元素,而同胞选择器则是所有的兄弟元素.

选择器分组
选择器分组其实就是如果你有某2个元素都需要实现相同的样式,除了给他们赋相同的class,也可以中间加个逗号

      .box .inner,
      .box > .inner {
        color: green;
      }

伪类选择器
伪类选择器的意思就是同一个标签，根据其不同的种状态，有不同的样式。
其实我一直有个疑问,为什么叫伪类选择器呢?
我查了很久其实我的理解是这样的,伪类选择器的语法是写死的,固定的,我们无法像类一样去定义,而且类似与a标签点击前,点击后的样式,我们是无法去具体定义的.
伪类选择器有一个特点就是
a:link 、a:visited 、a:hover 、a:active在css中的顺序必须是这样的.这里有个 “爱恨准则”：love hate。

a:link {color: #FF0000}	

伪元素选择器
CSS 伪元素用于向某些选择器设置特殊效果。
例如第一行,第一个元素.

p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }