css选择器

• id选择器

  #abc {}

   

• 类选择器

  .abc {}

   

• 标签选择器--所有div标签

  div {}

   

• 交集选择器--类为abc的p标签

  p.abc {}

   

• 并集选择器--p标签和abc类

  p,.abc {}

   

• 伪类选择器--div的onhover事件

  div:hover {}

   

• 伪元素选择器--div开头加上内容

  div::before {content: "XXXX"}

   

• 后代选择器--div中所有span，无论层级关系。

  div span { background-color: DodgerBlue; }

   

•  子选择器--div中直接子元素span生效，span中的span不生效。

  div > span {background-color: DodgerBlue;}

   

• 相邻选择器--(+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

  former_element + target_element { style properties }

   

• 兄弟选择符，位置无须紧邻，只须同层级，former~target选择former元素之后所有同层级target元素。

  former_element ~ target_element { style properties }