CSS选择器

最新推荐文章于 2024-09-05 11:00:53 发布

遇上日落

最新推荐文章于 2024-09-05 11:00:53 发布

阅读量79

点赞数 1

分类专栏： css属性选择器文章标签： java 前端 html

本文链接：https://blog.csdn.net/m0_63639281/article/details/125879233

版权

css属性选择器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

语法:

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

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

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

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

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

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

<style>
      [id] {
            color: red;
        }
    </style>
</head>

<body>
    <h1>css属性选择器</h1>
    <h2 id="a">满江红·写怀</h2>
    <h3 id="b">岳飞·宋</h3>
    <p>靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p>驾长车，踏破贺兰山缺。</p>
    <p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p>待从头、收拾旧山河，朝天阙。</p>

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

<style>
      [id=a] {
            color: red;
        }
    </style>
</head>

<body>
    <h1>css属性选择器</h1>
    <h2 id="a">满江红·写怀</h2>
    <h3 id="b">岳飞·宋</h3>
    <p>靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p>驾长车，踏破贺兰山缺。</p>
    <p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p>待从头、收拾旧山河，朝天阙。</p>

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

 <style>
       [id^=a]{
            color: red;
        }
    </style>
</head>

<body>
    <h1>css属性选择器</h1>
    <h2 id="ab">满江红·写怀</h2>
    <h3 id="b">岳飞·宋</h3>
    <p id="abc">靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p id="abcd">驾长车，踏破贺兰山缺。</p>
    <p id="cd">壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p id="bcd">待从头、收拾旧山河，朝天阙。</p>

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

 <style>
       [id$=d]{
            color: red;
        }
    </style>
</head>

<body>
    <h1>css属性选择器</h1>
    <h2 id="ab">满江红·写怀</h2>
    <h3 id="b">岳飞·宋</h3>
    <p id="abc">靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p id="abcd">驾长车，踏破贺兰山缺。</p>
    <p id="cd">壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p id="bcd">待从头、收拾旧山河，朝天阙。</p>

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

<style>
       [id*=cd]{
            color: red;
        }
    </style>
</head>

<body>
    <h1>css属性选择器</h1>
    <h2 id="ab">满江红·写怀</h2>
    <h3 id="b">岳飞·宋</h3>
    <p id="abcde">靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p id="abcd">驾长车，踏破贺兰山缺。</p>
    <p id="cd">壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p id="bcd">待从头、收拾旧山河，朝天阙。</p>