免费教程
子选择器与后代选择器类似,不过子选择器只会匹配某个元素的直接后代(元素与其子元素之间只有一层嵌套关系),子选择器由两个或多个选择器组成,选择器之间用大于号>分隔开
Web前端教程
Web前端入门教程:CSS选择器(下)
来源:易牛云朗沃
  |  
发布时间:2021-09-28 23:32
  |  
关键词:成都Web前端开发
  |  
阅读量:
6. 子选择器

子选择器与后代选择器类似,不过子选择器只会匹配某个元素的直接后代(元素与其子元素之间只有一层嵌套关系),子选择器由两个或多个选择器组成,选择器之间用大于号>分隔开,如下所示:

成都Web前端开发

p > strong选择器会将下面代码中第一个<p>标签的子标签<strong>内的文字设置为红色,但对第二个<p>标签中的<strong>标签则没有影响。

<p>欢迎访问<strong>编程帮</strong>!</p>

<p><em><strong>编程帮(biancheng.net)</strong></em>,一个在线学习编程的网站,专注于分享优质编程教程。</p>

7. 相邻兄弟选择器

相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素,这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号+,加号两边为相邻的两个元素,选择器会匹配加号后面的元素,如下所示:

成都Web前端开发

h1 + p选择器会匹配同一父级元素下紧邻<h1>标签并在其后的<p>标签。ul.task + p选择器则会匹配同一父级元素下紧邻<ul>标签并在其后的<p>标签,但<ul>要具有class="task"属性。

8. 通用兄弟选择器

通用兄弟选择器与相邻兄弟选择器非常相似,但却没有那么严格。通用兄弟选择器同样会匹配同一父级元素下的兄弟元素,但兄弟元素之间无需紧邻。定义通用兄弟选择器需要用到波浪号~,波浪号两边为同一父级元素下的两个元素,选择器会匹配波浪号后面的元素,如下所示:

成都Web前端开发

h1 ∼ p选择器会匹配同一父级元素下<h1>标签之后的所用<p>标签。

9. 分组选择器

分组选择器可以将同样的样式规则应用到多个选择器中,每个选择器之间使用逗号,进行分隔,这么做可以避免定义重复的样式规则,最大程度地减少 CSS 样式表中的代码。例如,在 CSS 样式表中,不同的选择器中可能包含同样的样式规则,如下所示:

成都Web前端开发

我们可以看到选择器h1、h2、h3中包含相同的样式font-weight: normal;,这时就可以先使用分组选择器为h1、h2、h3定义它们之间同样的样式规则,然后再分别定义它们之间不同的样式规则,如下所示:

成都Web前端开发

10. 属性选择器

属性选择器用来匹配具有特定属性的元素。属性选择器的定义方式与标签选择器相似,只不过需要在标签的后面使用方括号[ ]来指定标签具有的属性信息,如下所示:

成都Web前端开发

input[type="text"]选择器会匹配所有具有type="text"属性的<input>标签。

属性选择器中方括号[ ]内的属性信息还支持以下几种写法:

[target]:选择所有带有target属性元素;

[target=_blank]:选择所有具有target="_blank" 属性的元素;

[title~=flower]:选择title属性包含单词“flower”的所有元素;

[lang|=en]:选择lang属性正好是“en”或以“en”为开头的所有元素。

点击知道更多编程知识

文章来源于网络