css选择器进阶

css选择器进阶：

1、 属性选择器、属性和值选择器
2、 相邻兄弟选择器
3、 后代选择器（包含选择器）
4、 子元素选择器
5、 选择器分组

---

1、属性选择器、属性和值选择器：

/*1、 为带有 title 属性的所有元素设置样式： */
[title]
{
color:red;
}
/*2、 为 title="haha" 的所有元素设置样式： */
[title=haha]
{
border:5px solid blue;
}
/*3、 为 title的属性值中包含指定词汇的所有元素设置样式，适用于由空格分隔的属性值 */
[title~=haha]
{
border:5px solid blue;
}
/*4、 为 title属性以指定值开头的元素设置样式，该值必须是整个单词（不能是一个单词的一部分）适用于由连字符分隔的属性值 */
[title|=haha]
{
border:5px solid blue;
}

---

2、相邻兄弟选择器：

可选择紧接在另一元素后的元素，且二者有相同父元素

/* 选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素 */
h1 + p {margin-top:50px;}

---

3、后代选择器（包含选择器）：

后代选择器可以选择作为某元素后代的元素，以空格分隔。

---

4、子元素选择器：

子元素选择器（Child selectors）只能选择作为某元素子元素的元素，不能隔代，用 “ > ”来指向子代

h1 > strong {color:red;}

---

5、选择器分组）：

用逗号分隔

---