css 选择符中的 >,+,~,=,^,$,*,|,:,空格 的意思

 

 

一,作为元素选择符

* 表示通配选择符

* {} // 所有元素

 

二,作为关系选择符

空格 表示包含选择符

a div{} // 被a元素包含的div

> 表示子元素选择符

a > div{} // a元素的div子元素,不包括孙辈

+ 表示紧贴之后的元素

a + div{} // 紧贴在a元素之后的div

~ 表示元素后面的所有兄弟元素

a ~ div{} // a元素后面的所有div兄弟元素

 

三,作为属性选择符

= 表示等于

div[class="test"] {} // 具有class属性且属性值等于test

~ 表示用空格分隔的字词列表，其中一个等于

div[class~="test"] {} // 具有class属性且以空格为间隔的属性值中有一个等于test

^ 表示以val开头

div[class^="test"] {} // 具有class属性且以test开头

$ 表示以val结尾

div[class$="test"] {} // 具有class属性且以test结尾

* 表示包含包含val

div[class*="test"] {} // 具有class属性且包含test

| 表示以val开头并用连接符"-"分隔的字符串的元素

div[class|="test"] {} // 具有class属性且以test开头并用连接符"-"分隔的字符串的元素

 

四,作为伪类或伪对象选择符

: 表示伪类或伪对象

:: 表示伪对象