4-1、CSS3选择器

4-1、CSS3选择器

基本选择器：

子元素选择器：子元素选择器只能选择某元素的子元素。

父元素 > 子元素

相邻兄弟元素选择器：可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素。

元素 + 相邻元素

通用兄弟选择器：选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素。
这里注意：中间穿插一个别的也不影响。

元素 ~ 后边所有兄弟相邻元素

群组选择器：将具有相同样式的元素分在一起，每个选择器之间使用“ , ”隔开。

元素1,元素2,...,元素n

---

属性选择器：

对带有指定样式的元素设置样式。
使用css3属性选择器，你可以只指定元素的某个属性，或者你也可以同时指定元素的某个属性和其对应的属性值。

Element[attribute]
选择所有带有attribute属性的元素。

a[href]
a[href="#"]

Element[attribute~=“value”]
选择attribute属性包含单词"value"的元素。

a[href~="#"]

Element[attribute^=“value”]
选择attribute属性值以value开头的所有元素。
这里注意，容易混淆，以下全都会生效。

a[href^="#"]{color: chartreuse; }

  <a href="#">asdadsadsa</a>
  <a href="#1">asdasdsa</a>
  <a href="#2">asdasda</a>
  <a href="#3">asdad</a>
  <a href="#4">asdsad</a>

Element[attribute$=“value”]
选择attribute属性值以value结尾的所有元素。

a[href$="##"]{color: chartreuse; }

  <a href="##">asdadsadsa</a>
  <a href="#1##">asdasdsa</a>
  <a href="#2##">asdasda</a>
  <a href="#3##">asdad</a>
  <a href="#4##">asda</a>

Element[attribute=“value”]*
选择attribute属性值包含value的所有元素。

a[href*="*"]{
      color: rgb(33, 47, 126);
    }
 
  <a href="##*#">asdadsadsa</a>
  <a href="#1##*#">asdasdsa</a>
  <a href="#2##*#">asdasda</a>
  <a href="#3##*#">asdad</a>
  <a href="#4##*#">asda</a>

Element[attribute | =“value”]
选择attribute属性值为"value"或者以"value-"的所有元素。
这一个在js种使用非常多，注意。