Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 第四课:位置选择器的四种类型以及基本使用
Blogger Information
Blog 12
fans 0
comment 0
visits 7716
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
第四课:位置选择器的四种类型以及基本使用
屈世明
Original
606 people have browsed it

在CSS选择器中,在最基本的标签选择器(div,P等)和属性选择器([],.class,#id)之外,稍微有点难度的就是位置选择器:所谓位置选择器就是根据已经明确的选择内容通过一定的表示方法,选择出其子代,后代,兄弟或后面的同级元素,以此来添加相应显示属性.

基于上述要求,位置选择器首先要有一个明确的参照元素,这个元素用基本的标签或属性选择器明确后,再添加对应的位置选择符号,来达到选择相应元素的目的

位置选择器的四种类型以及基本标识

我们网页原始结构如下:

  1. <body>
  2.     <ul class="list">
  3.       <li class="item">item1</li>
  4.       <li class="item">item2</li>
  5.       <li class="item">item3</li>
  6.       <ul>
  7.         <li class="item">item3-1</li>
  8.         <li class="item">item3-2</li>
  9.       </ul>
  10.       <li class="item four">item4</li>
  11.       <li class="item">item5</li>
  12.       <ul>
  13.         <li class="item">item5-1</li>
  14.         <li class="item">item5-2</li>
  15.       </ul>
  16.       <li class="item">item6</li>
  17.       <ul>
  18.         <li class="item6">item6-1</li>
  19.         <li class="item6">item6-2</li>
  20.         <ul>
  21.           <li class="item6-2">item6-2-1</li>
  22.           <li class="item6-2">item6-2-2</li>
  23.         </ul>
  24.         <li class="item6">item6-3</li>
  25.       </ul>
  26.       <li class="item">item7</li>
  27.       <li class="item eight">item8</li>
  28.     </ul>
  30.     <ul>
  31.       <li class="newitem">newitem-1</li>
  32.       <li class="newitem">newitem-2</li>
  33.     </ul>
  34.   </body>

各类选择器操作

  1. 父子关系,选择其子代.所有标识为”>”
    该标识能且只能将参照元素的所有子代选中,实例如下:
  1. .list > .item{
  2.   color: red;
  3. }
  1. 父子关系,选择其后代,包括子代和孙代以及再后代.所用标识为”空格”
    该标识能且只能将参照元素的所有子代选中,实例如下:
  1. .list  .item{
  2.   color: red;
  3. }

特殊备注说明,子代的样式如果用”星星号”替代后,则同后代的意思一样,也即上面的代码等同于下面的代码:

  1. .list > .*{
  2.   color: red;
  3. }
  1. 兄弟选择器,选择参照元素相邻的紧按着的下一个元素(但注意下一元素与参照元素必须属于同一父元素,也即两者必须是兄弟才行)
  1. /* 可以让item4之后的item5生效 */
  2. .list > .item.four + .item{
  3.         border: 1px solid red;
  4.       }
  5. /* 无法让item8之后的newitem-1生效 */
  6. .list > .item.eight + * {
  7.         border: 1px solid blue;
  8.         background-color: black;
  9.       }
  10. /* 上述代码中,我们常常用+*来代替下一个元素的类,在这个类型中,*无法包含到后代*/
  1. 同级后面元素,用符号”~”,如选定第四个元素后面的所有同级元素:
  1.       /* 可以让item4之后的item5-8生效 */
  2.       .list > .item.four ~ .item {
  3.         border: 1px solid red;
  4.       }
  6.       /* 可以让item4之后的item5-8生效,同时对中间间插的ul生效 */
  7.       .list > .item.four  ~*{
  8.         border: 1px solid red;
  9.       }
  11.       /* 可以让item4之后的item5-8生效,同时item5-8的所的后
  12.       效 */
  13.       .list > .item.four  ~* *{
  14.         border: 1px solid red;
  15.       }
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post