第四课:位置选择器的四种类型以及基本使用

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网

在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.       }
【转自：建湖网页制作公司 http://www.1234xp.com/jianhu.html 欢迎留下您的宝贵建议】
更多阅读