CSS选择器

简单选择器

1.通配选择器

*{ 
    color: red;
}
/*不推荐使用通配选择器,因为它是[性能最低的一个CSS选择器*/

2.标签选择器

p{
    color: red;
    font-size: 15px;
}

3.id选择器

#id{
    color: red;
}

4.类选择器

.content{
    color: red;
}

复杂选择器

属性选择器（CSS 属性选择器通过已经存在的属性名或属性值匹配元素。）

• [attr]
  表示带有以 attr 命名的属性的元素。
• [attr=value]
  表示带有以 attr 命名的，且值为"value"的属性的元素。
• [attr~=value]
  表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为"value"。
• [attr|=value]
  表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode编码为U+002D）开头。典型的应用场景是用来来匹配语言简写代码（如zh-CN，zh-TW可以用zh作为value）。
• [attr^=value]
  表示带有以 attr 命名的，且值是以"value"开头的属性的元素。
• [attr$=value]
  表示带有以 attr 命名的，且值是以"value"结尾的属性的元素。
• [attr*=value]
  表示带有以 attr 命名的，且值包含有"value"的属性的元素。
• [attr operator value i]
  在带有属性值的属性选型选择器表达式的右括号（]括号）前添加用空格间隔开的字母i（或I）可以忽略属性值的大小写（ASCII字符范围内的字母）

a {
  color: blue;
}

/* 内部链接，以“#”为开头 */
a[href^="#"] {
  background-color: gold;
}

/* 在URL中任何地方包含“example” */
a[href*="example"] {
  background-color: silver;
}

/* Links with "insensitive" anywhere in the URL,
   regardless of capitalization */
a[href*="insensitive" i] {
  color: cyan;
}

/*以“.org”结尾 */
a[href$=".org"] {
  color: red;
}

<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>

伪类选择器

下面是几个常用的例子：

• :link
  :link伪类选择器是用来选中元素当中的链接。它将会选中所有尚未访问的链接，包括那些已经给定了其他伪类选择器的链接（例如:hover选择器，:active选择器，:visited选择器）。为了可以正确地渲染链接元素的样式，:link伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：:link — :visited — :hover — :active。:focus伪类选择器常伴随在:hover伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。
• a:visited 已访问过的链接
• :hover 鼠标移动到元素上的样式
• :active 匹配被用户激活的元素
• :focus 获得焦点时的样式

选择器组合

• 相邻兄弟选择器
  • 前方元素 + 目标元素 {样式声明 } E + F
• 通用兄弟选择器
  • E ~ F {} 在使用 ~ 连接两个元素时,它会匹配第二个元素,条件是它必须跟(不一定是紧跟)在第一个元素之后,且他们都有一个共同的父元素
• 后代选择器
  • E F{}
• 子选择器
  • E > F{}