因为专注,所以专业
2005 - 2020

css兄弟选择器(+ 和 ~)的使用和区别

时间:2020-02-05 14:11:28    作者:八叔模板堂

+ 选择器

<style type="text/css">
    h1 + p {
        margin-top:50px;
        color:red;
    }
</style>
<p>This is paragraph.</p>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<style type="text/css">
    li + li {
        color:red;
    }
</style>

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>
  • List item 1
  • List item 2
  • List item 3

~ 选择器

<style type="text/css">
    h1 ~ p{
        color:red;
    }
</style>

<p>1</p>
<h1>2</h1>
<p>3</p>
<p>4</p>
<p>5</p>

2

赞(0
免费拨打  111-1111-1111
免费拨打  111-1111-1111免费拨打 111-1111-1111
微信二维码
手机二维码
返回顶部
返回顶部返回顶部