CSS入门篇03.常用选择器及选择器权重（二）

大白菜·

已于 2022-08-14 14:53:23 修改

阅读量208

点赞数 2

文章标签： css html 前端 javascript java

于 2022-08-12 20:38:24 首次发布

本文链接：https://blog.csdn.net/m0_62404129/article/details/126310442

版权

接下来的我们来说下剩余的选择器以及选择器的权重

g.属性选择器

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

2. [属性名=属性值]{} 选择含有指定属性及属性值元素

3. [属性名^=属性值]{} 选择含有指定属性及属性值开头

4. [属性名$=属性值]{} 选择含有指定属性及属性值结尾

5. [属性名*=属性值]{} 选择含有指定属性，只要含有某个属性值的元素

以上代码演示为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  选择含有指定属性的元素*/
        [title]{
            font-size: 20px;
        }
        /*  选择含有指定属性及属性值元素*/
         [title=a]{
        color: red;
        }
        /* 选择含有指定属性及属性值开头 */
        [title^=b]{
            color: aqua;
        }
        /* 选择含有指定属性及属性值结尾 */
        [title$=b]{
            color: chartreuse;
        }
        /* 选择含有指定属性，只要含有某个属性值的元素 */
        [title*=b]{
            background-color: antiquewhite;
    </style>
</head>
<body>
    <H1 title="a">满江红·写怀</H1>
    <h3 title="ab">作者：岳飞（宋代）</h3>
    <p title="abc">怒发冲冠，凭栏处、潇潇雨歇。抬望眼，仰天长啸，壮怀激烈。</p>
    <p title="bcd">三十功名尘与土，八千里路云和月。莫等闲，白了少年头，空悲切！</p>
    <p title="ac">靖康耻，犹未雪。臣子恨，何时灭！驾长车，踏破贺兰山缺。</p>
    <p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。</p>
</body>
</html>

效果图为：

f.伪类选择器

全部类型中：first-child 第一个子元素

：last-child 最后一个子元素

：nth-child（n） n个子元素

同类型中：：first-of-type 第一个子元素

：last- of-type 最后一个子元素

：nth-of-type（n） n个子元素

否定伪类：not（）

以上代码演示为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* 全部类型中 ： */
        /* 第一个子元素*/ 
        p:first-child {
            color: antiquewhite;
        }
        /* 最后一个子元素 */
        p:last-child {
            color: aqua;
        }
        /* 第n个子元素 */
        p:nth-child(2){
            color: aquamarine;
        }
        /* 同类型中： */
        /* 第一个子元素 */
        p:first-of-type{
            font-size: 20px;
        }
        /* 最后一个子元素 */
        p:last-of-type {
            background-color: blueviolet;
        }
        /* 第n个子元素 */
        p:nth-of-type(3){
            font-weight: bold;
        }
    </style>
</head>
<body>
    <DIV>
        <P>君不见黄河之水天上来，奔流到海不复回</P>
        <p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
        <p>人生得意须尽欢，莫使金樽空对月。</p>
        <p>天生我材必有用，千金散尽还复来。</p>
        <p>烹羊宰牛且为乐，会须一饮三百杯。</p>
        <p>岑夫子，丹丘生，将进酒，君莫停。</p>
        <p>与君歌一曲，请君为我侧耳听。</p>
        <!-- <span>钟鼓馔玉不足贵，但愿长醉不愿醒。</span>
        <span>古来圣贤皆寂寞，惟有饮者留其名。</span> -->
    </DIV>
</body>
</html>

效果图为：

10伪元素选择器

Lorem 随机生成单词

：：first-letter 第一个字母

：：first-line 第一行

：：selection 选中的内容

：：before 在元素开始的位置前

：：after 在元素开始的位置后

11继承

背景、布局不会被继承

选择器的权重

样式冲突

优先级：

!important>内联>id选择器>class选择器/属性选择器>元素选择器>通配选择器>继承选择器

注意：1.选择器的权重一样，优先选用靠下的样式

2.如果是交集选择器，则所有选择器权重相加，最终谁大听谁的

3.如果是并集选择器，则选择器的权重各算各的

4.选择器的权重相加，再大也不会超过它上一级权重

总结：哪个选择器越具体，权重越大

实际应用过程中，样式没设置成功：

1.有没有选择2.选择器权重

大白菜·

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS入门篇03.常用选择器及选择器权重（二）

important>内联>id选择器>class选择器/属性选择器>元素选择器>通配选择器>继承选择器。5. [属性名*=属性值]{} 选择含有指定属性，只要含有某个属性值的元素。3. [属性名^=属性值]{} 选择含有指定属性及属性值开头。4. [属性名$=属性值]{} 选择含有指定属性及属性值结尾。2. [属性名=属性值]{} 选择含有指定属性及属性值元素。同类型中：：first-of-type 第一个子元素。语法：1.[属性名]{} 选择含有指定属性的元素。：：after 在元素开始的位置后。....
复制链接

扫一扫