2021-07-15 元素选择器、关系选择器、属性选择器

最新推荐文章于 2023-06-28 12:10:38 发布

前端畑鹿惊

最新推荐文章于 2023-06-28 12:10:38 发布

阅读量684

点赞数 1

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/m0_46522502/article/details/118766980

版权

这篇博客详细介绍了HTML和CSS中的选择器类型，包括元素选择器的6种形式，如通配符、标签名、ID和类等；关系选择器的4种，如子代、后代、相邻和兄弟选择器，并给出了相关实例；还探讨了属性选择器的各种匹配符号，如等于、包含等。通过这些选择器，可以更精确地定位和操作网页元素。

摘要由CSDN通过智能技术生成

1.元素选择器有以下6个

元素选择器:
1. 通配符选择器 * { }
2. 标签名选择器元素名 { }
3. id选择器 #id { }
4. 类名选择器 .class { }
5. 分组选择器选择器1, 选择器2,…,选择器n { }
6. 交集选择器选择器1选择器2 { }

/* * 通配符选择器: 选中页面中的所有的元素（会影响浏览器的性能） */
    *{
        letter-spacing: 5px;
    }

/* div 标签名选择器: 选中页面中所有的指定标签 */
    span{
        color: brown;
    }

/* #id  id选择器: 选中具有指定id的元素(不建议用id写样式) */
    /* 选中 id="ipt" */
    #ipt{
        border-style: dashed;
        border-color: gold;
    }

/* .class 类名选择器 */
    /* 选中 class="item" 的元素 */
    .item{
        border-bottom: 1px solid red;
    }
    /* 选中 class="nan" 的元素 */
    .nan{
        color: blue;
        font-weight: bolder;
    }

/* 分组选择器   选择器1, 选择器2, 选择器m {}*/
    /* 几个选择器选中的元素 共用一套样式 */
    p, li, #ipt, span{
        margin-left: 200px;
    }

/* 交集选择器 */
    /* 选中具有 index 类名的 input */
    input.index{
        background-color: lime;
    }

    /* 选中 input中,  id="ipt" 的 输入框*/
    input#ipt{
        color: mediumorchid;
    }

2.关系选择器

关系选择器有以下4个：
子代选择器：选择父类包含的所有子类元素；
后代选择器：选择祖先包含的所有后代元素；
相邻选择器：选择指定元素的下一个元素；
兄弟选择器：选择指定元素的后面所有元素。

实例：

<body>
    <ul>
        <li class="item1">这是第1个li 
            <span>后代元素</span> 
        </li>

        <li class="item2">这是第2个li 
            <span>后代元素</span>
         </li>

        <li class="item3">这是第3个li