css组合选择符和less中&作用

1.后代选择器（空格分隔）

2.子元素选择器（>分隔）

3.相邻兄弟选择器（+分隔）

4.普通兄弟选择器（~分隔）

1.后代选择器：用于选取某元素的后代元素

以下实例选取所有 <div> 元素中的<p> 元素

<style>
div p
{
    background-color:yellow;
}
</style>

<div>
<p>段落 1。 在 div 中。</p>  // 黄色
<span><p>段落 2。 在 div 中。</p></span>  // 黄色
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

2. > ：只能选择作为某元素直接/一级子元素的元素

以下实例选择了<div>元素中所有直接子元素 <p>

<style>
div>p
{
    background-color:yellow;
}
</style>

<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>  //黄色

<p>I live in Duckburg.</p>  //黄色
</div>

<div>
<span><p>I will not be styled.</p></span>
</div>

<p>My best friend is Mickey.</p>

3. + ：可选择紧接在另一元素后的元素，且二者有相同父元素

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素

<style>
div+p
{
    background-color:yellow;
}
</style>

<body>
<div>
<h2>DIV 内部标题</h2>
<p>DIV 内部段落。</p>
</div>

<p>DIV 之后的第一个 P 元素。</p> //黄色

<p>DIV 之后的第二个 P 元素。</p>
</body>

4. ~ ：选取所有指定元素之后的相邻兄弟元素

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p>

<style>
div~p
{
    background-color:yellow;
}
</style>

<body>  
<p>之前段落，不会添加背景颜色。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p> //黄色
<p>段落 4。不在 div 中。</p> //黄色
</body>

&：

1.当作父级类（&直接替换成.head）

.head{
    .content{
        ....
    }
    &.body{
       ....
    }
}

等价于

.head{

}
.head .content{
     ....
}
.head.body{
    ....
}

.a.b和.a .b的区别

前者为且的关系，后者为父子关系

<!--   .a.b    -->
<div class="a b"></div>

<!--   .a .b    -->
<div class="a">
    <div class="b"></div>
</div>

2.改变选择器顺序

.head{
    .content{
        ....
    }
    .body &{
       ....
    }
}

等价于

.head{

}
.head .content{
     ....
}
.body .head{
    ....
}

3.组合排列

p,a,ul,li {
   ...
   & + & {
      ...
   }
}

等价于

p,a,ul,li{
}

p+p,
p+a,
p+ul,
p+li,
a+p,
a+a,
a+ul,
a+li,
ul+p,
ul+a,
ul+ul,
ul+li,
li+p,
li+a,
li+ul,
li+li {
}

&会把所有的可能性排列出来

posted on 2023-04-11 15:22 zy89898976 阅读(568) 评论(0) 编辑收藏举报

css组合选择符和less中&作用

搜索

常用链接

随笔档案

阅读排行榜