css 选择符中的 >,+,~,=,^,$,*, 您所在的位置:网站首页 css中选择符的概念 css 选择符中的 >,+,~,=,^,$,*,

css 选择符中的 >,+,~,=,^,$,*,

2024-04-25 16:08| 来源: 网络整理| 查看: 265

 

 

一,作为元素选择符

* 表示通配选择符

* {} // 所有元素

 

二,作为关系选择符

空格 表示包含选择符

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开头并用连接符"-"分隔的字符串的元素

 

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

: 表示伪类或伪对象

:: 表示伪对象

 



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有