前端

集合选择器

交集选择器

选择同时符合多个条件的元素。
直接排列就代表且的意思。

1
2
3
4
/*选中标签为p并且类名为class_value1和class_value2的元素*/
p.class_value1.class2_value2 {
  color: red;
}

为什么能直接排列？
首先如果有标签名那么标签名必须写在第一位，其余后面的不管是类值还是id值，都带有天然的分隔’.’或者’#’。而且后面不会再跟其他标签，因为一个标签就是一个标签，不可能还含有另一个标签。

并集选择器

选择满足选择器条件中任意一条的元素。
‘,’就代表或的意思。

1
2
3
4
5
6
/*选择标签为p，类名为class_value1，id值为id_value1的元素*/
p,
.class_value1,
#id_value1 {
  color: red;
}

并集选择器一般竖着写，没有明确的先后顺序。

元素关系选择器

后代选择器

选择指定的元素中，所有符合要求的后代元素。

1
2
3
4
5
6
7
8
/*选择标签为div的元素中所有标签为a的后代元素。*/
div a {
  color: red;
}
/*选择类名为class_value1的元素中所有类名为class_value2且标签为p的元素。*/
.class_value1 p.class_value2 {
  color: red;
}

空格代表后代关系，可以叠加多层。选择的后代是所有后代，后代的后代也包括在内，只要符合条件就会被选中。

子代选择器

选择指定元素中，所有符合要求的子元素（就指儿子元素）。

1
2
3
4
5
6
7
8
/*选择标签为div的元素中，标签为p的子元素。*/
div>p {
  color: blue;
}
/*选择类名为class_value的元素中，标签为p的子元素。*/
.class_value>p {
  color: blue;
}

兄弟选择器

相邻兄弟选择器

选择指定元素的相邻（紧挨着的下一个，只有这一个！）的兄弟元素。

1
2
3
4
/*选择标签为p的元素的相邻的下一个标签为a的元素。*/
p+a {
  font-size: 100px;
}

注意，必须是紧挨着p元素的a，中间插入一个别的元素都不行，并且p和a必须是兄弟元素。

通用兄弟选择器

选择指定元素后面的所有符合条件的兄弟元素。

1
2
3
4
/*选择标签为p的元素的所有标签为a的兄弟元素。*/
p~a {
  font-size: 100px;
}

注意，虽说是所有元素，但只作用于指定元素的后面的元素，前面的不会被选。

属性选择器

包含某个属性的元素

选择包含某个属性的元素。

1
2
3
4
/*选择含有title属性的元素。*/
[title] {
  color: green;
}

‘[]’就是选择某个属性。

指定属性值

选择包含某个属性且属性值等于指定值的元素。

1
2
3
4
/*选择符合title="value"条件的元素。*/
[title="value"] {
  color: green;
}

指定属性值的开头

选择包含某个属性且属性值的开头等于给定值的元素。
‘^=’代表给定开头值。

1
2
3
4
5
6
7
[title^="v"] {
  color: green;
}
/*指定值可以是一个开头字母，也可以是多个字母甚至是一整个值，只要是开头就可以。*/
[title^="value"] {
  color: green;
}

指定属性值的结尾

选择包含某个属性且属性值的结尾等于给定值的元素。
‘&=’代表给定结尾值。

1
2
3
4
5
6
7
[title$="e"] {
  color: green;
}
/*同样地，给定值可以是一个字母也可以是多个字母。*/
[title$="lue"] {
  color: green;
}

指定属性值的包含部分

选择包含某个属性且属性值中含有给定值的元素。
‘*=’代表要求含有给定值。

1
2
3
[title*='alu'] {
  color: green;
}