css-选择器

发表于 更新于 分类于

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 {}

伪类选择器

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