基础选择器

最新推荐文章于 2024-07-19 12:58:53 发布

深林最里人已无

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量57

点赞数

分类专栏： css 文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_56490825/article/details/131781074

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>
        /* 
        css选择器分类：
            一、基础选择器  (标签选择器,类选择器,id选择器,通配符选择器,群组选择器) 
            二、层次选择器  (后代，子代，兄弟选择器，通用选择器) 
            三、伪类，伪元素选择器  (CSS 伪类用于向某些选择器添加特殊的效果。)
            四、属性选择器  (属性选择器是根据元素的属性及属性值来选择元素。)
            五、层叠性和继承性  (层叠性是指多种 CSS 样式的叠加。) 

        补充：css优先级高低排序：!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承 > 浏览器默认属性
        */
    </style>
</head>
<body>
    <h4>  -------------------------基础选择器------------------------------------</h4>

    <style>
        /* 1.标签选择器：html 代码中的标签，如 html、body、h1、p、img. */
        p {
        color: red;
        }
    /* 2.类选择器：不能是纯数字，不能是标签名。一般是 . + 对应样式描述 */
    /* 单个元素可以有多个类名(以空格分开多个类名的形式书写)。 */
        .bgc{
        color:coral;
        }
        .one{
            font-size: 30px;
            /* color:aquamarine; */
        }
    /* 3.id选择器：id 是对 HTML 标签中 id 属性进行选择。选择符是 (#)  */
        #box{
            border:solid 1px;
        }
    /* 4.通配符选择器：匹配页面中所有的元素。选择符是 (*)  */
     *{
        color: rgb(10, 10, 10);
     } 

     /* 5. 全局选择器的一种用法是让选择器更易读，更明显地表明它们的作用。
     例如，如果我想选中任何<div>元素的第一子元素，不论它是什么元素，都给它加背景颜色，
    我可以将:first-child选择器（我们将会在伪类和伪元素课中进一步了解）用作<div>元素选择器的一个后代选择器：*/

    div *:first-child{
        background-color: yellow;
    }

    </style>
        <p>标签选择器</p>
        <p class="bgc one">类选择器</p>
        <div id="box">id选择器</div> 

        <div>
            <h2>111</h2>
            <h2>hello world!!!!<span>你好 全局选择器</span></h2>
            <h2>222</h2>
        </div>
</body>
</html>