css选择器

元素选择器

1
2
/* 选择使用的div元素 */
div {}

类选择器

使用点(.)类名(class的值)的方式选择

1
2
3
4
5
/* 选择class值等于red的元素*/
.red {}

/* 选择div中calss值等于red是元素 */
div.red {}

id选择器

使用#id名(id的值)选择

1
2
/* 选择id等于red的元素 */
#red {}

后代选择器

后代选择器用于选取某元素的后代元素。

1
2
/* 选择ul标签里面所有的li标签 */
ul li { }
  • 父元素和后代元素用空格隔开
  • 最终选择的是后代元素
  • 后代元素可以是儿子也可以是孙子,只要是父元素的后代就可以
  • 父元素和后代元素可以是任意的基础选择器

子选择器

与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素。

语法:父元素 > 子元素 { 样式声明 }

1
2
/* 选择div里面的子元素a,孙子不可以 */
div>a { }
1
2
3
4
5
6
7
8
<div>
<a href="">div a</a>
<ul>
<li>
<a href="">li a</a>
</li>
</ul>
</div>
  • 只能选择div的第一层a元素,不能选择div下li里面的a

  • 最终选择的是子元素

相邻兄弟选择器

选择在第一个元素之后相邻的元素,二者有相同父元素。

1
2
/* 选择在div之后相邻的span元素,二者有相同的父级元素 */
div+span{}

后续兄弟选择器

选取所有指定元素之后的兄弟元素。

1
2
/* 选择div之后ul元素,二者有相同的父级元素 */
div~ul {}

并集选择器

选择多个元素

语法:元素1, 元素2 { 样式 }

1
2
/* 同时选择ul和ol */
ul, ol {}

伪类选择器

用来添加一些选择器的特殊效果。