03-高级选择器

你离开我真会死。 提交于 2020-02-29 14:25:59

高级选择器分为:

  • 后代选择器

  • 子代选择器

  • 并集选择器

  • 交集选择器

后代选择器

使用空格表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)

1 .container p{
2     color: red;        
3 }
4 .container .item p{
5     color: yellow;
6 }
View Code

子代选择器

使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

1 .container>p{
2     color: yellowgreen;
3 }
View Code

并集选择器

多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素,可以使用并集选择器

1 /*并集选择器*/
2 h3,a{
3     color: #008000;
4     text-decoration: none;
5                 
6 }
View Code

比如像百度首页使用并集选择器。

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
      margin: 0;
      padding: 0
   }
/*使用此并集选择器选中页面中所有的标签,页面布局的时候会使用*/
View Code

交集选择器

使用.表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.active

比如有一个<h4 class='active'></h4>这样的标签。

那么

 1 h4{
 2     width: 100px;
 3     font-size: 14px;
 4 }
 5 .active{
 6     color: red;
 7     text-decoration: underline;
 8 }
 9 /* 交集选择器 */
10 h4.active{
11     background: #00BFFF;
12 }
View Code

 

它表示两者选中之后元素共有的特性。

 

  • 后代选择器

  • 子代选择器

  • 并集选择器

  • 交集选择器

后代选择器

使用空格表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)

1 .container p{
2     color: red;        
3 }
4 .container .item p{
5     color: yellow;
6 }
View Code

子代选择器

使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

1 .container>p{
2     color: yellowgreen;
3 }
View Code

并集选择器

多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素,可以使用并集选择器

1 /*并集选择器*/
2 h3,a{
3     color: #008000;
4     text-decoration: none;
5                 
6 }
View Code

比如像百度首页使用并集选择器。

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
      margin: 0;
      padding: 0
   }
/*使用此并集选择器选中页面中所有的标签,页面布局的时候会使用*/
View Code

交集选择器

使用.表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.active

比如有一个<h4 class='active'></h4>这样的标签。

那么

 1 h4{
 2     width: 100px;
 3     font-size: 14px;
 4 }
 5 .active{
 6     color: red;
 7     text-decoration: underline;
 8 }
 9 /* 交集选择器 */
10 h4.active{
11     background: #00BFFF;
12 }
View Code

 

它表示两者选中之后元素共有的特性。

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!