css的各种主要选择器

最新推荐文章于 2024-08-26 19:16:26 发布

༒消逝的光芒

最新推荐文章于 2024-08-26 19:16:26 发布

阅读量87

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_43350503/article/details/127208465

版权

css复合选择器

1.交集选择器

作用：选中同时满足多个条件的元素

语法：选择器1选择器2选择器3····{}

注意：如果选择器中有元素选择器，那么元素选择器必须放在第一位

举例：

<style>
div#red1.red{
        font-size: 34px;
      }
      h1,h3{
        color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <h1>满江红·写怀</h1>
    <h3>岳飞·宋</h3>
    <p class="red">怒发冲冠，凭栏处、潇潇雨歇。</p>
    <div class="red" id="red1">抬望眼，仰天长啸，壮怀激烈。</div>
    <div>三十功名尘与土，八千里路云和月。</div>
    <p>莫等闲，白了少年头，空悲切！</p>
    <p>靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p>驾长车，踏破贺兰山缺。</p>
    <p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p>待从头、收拾旧山河，朝天阙。</p>
  </body>

2、并集选择器

作用：同时选中满足条件的元素

语法：选择器1,选择器2,选择器3····{}

举例：

 h1,h3{
        color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <h1>满江红·写怀</h1>
    <h3>岳飞·宋</h3>
    <p class="red">怒发冲冠，凭栏处、潇潇雨歇。</p>
    <div class="red" id="red1">抬望眼，仰天长啸，壮怀激烈。</div>
    <div>三十功名尘与土，八千里路云和月。</div>
    <p>莫等闲，白了少年头，空悲切！</p>
    <p>靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p>驾长车，踏破贺兰山缺。</p>
    <p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p>待从头、收拾旧山河，朝天阙。</p>
  </body>

关系选择器

1、子元素选择器

作用：选中指定的父元素下面指定的子元素

语法：父元素>子元素{}

例如：div>p,#big>p{}

<div id="big">
      大超市
      <p class="sx">生鲜区</p>
      <div class="ym">
        衣帽区
        <span
          >上衣
          <em>男上衣</em>
          <em>女上衣</em>
        </span>
        <span>裤子</span>
        <span>帽子</span>
      </div>
      <p>零食区</p>
      <p>酒水区</p>
</div>

2、后代选择器

作用：选中指定祖先元素下面指定的后代元素

语法：祖先元素后代元素{}

例如：#big span{}

举例：

<div id="big">
      大超市
      <p class="sx">生鲜区</p>
      <div class="ym">
        衣帽区
        <span>上衣
          <em>男上衣</em>
          <em>女上衣</em>
        </span>
        <span>裤子</span>
        <span>帽子</span>
      </div>
      <p>零食区</p>
      <p>酒水区</p>
    </div>
    <div>
      <p>烟酒区</p>
      <p>饮料</p>
      小超市
    </div>

3、选择下一个兄弟(仅挨着我的)选择器

作用：选择下一个兄弟

语法：兄+弟{}

4、选择下面所有的兄弟(前面的不选)

语法：兄～弟{}

属性选择器

1:属性选择器

语法：[属性名]{} 选择含有指定属性的元素

[属性名=属性值]{} 选择含有指定属性和属性值的元素

[属性名^=属性值]{} 选择属性值以指定值开头的元素

[属性名$=属性值]{} 选择属性值以指定值结尾的元素

[属性名*=属性值]{} 选择属性值含有某值的元素

举例:

  [title*=abc]{
      color: red;
    }
    </style>
  </head>
  <body>
    <h1 title="a" id="abcd" class="ab" >满江红·写怀</h1>
    <h3 title="ab">岳飞·宋</h3>
    <p>····</p>
    <p title="abc" class="abc">靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p title="abcdab">驾长车，踏破贺兰山缺。</p>
    <p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p>待从头、收拾旧山河，朝天阙。</p>
  </body>