CSS选择器

晚安_good night

于 2024-07-16 21:12:28 发布

阅读量238

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/yellow_important/article/details/140476982

版权

标签选择器 div {}

类名选择器 .container {}

ID选择器 #top {}

交集选择器(组合) div.header {}

并集选择器 .header , .main , .footer { }

后代选择器 .container .header h3 {}

直接子代选择器 .container > div {}

间接后代选择器 .container h3 {}

选择器就是选择页面标签的方式，id选择器权重高于类名选择器。类名选择器权重高于标签选择器

标签选择器数值：1 类名选择器数值：10 id选择器数值：100

优先级： id选择器 > 类名选择器 > 标签选择器

    !important  最高级

特殊情况下: 1) 行内样式权重高于id选择器

2) 加了 !important 的属性权重比行内样式权重还要高

伪类选择器 (:)

伪类选择器 ul li:nth-child(n) {}

伪类选择器简称“伪类”，是用来表示元素的一种状态的CSS选择器。

伪类选择器是一种不存在的类，用来表示HTML元素的一种状态，这些状态不是由HTML标签直接表示的，而是通过CSS来定义的。伪类选择器用冒号来表示，它们可以用来选择元素的不同状态，如链接的不同状态（未访问、已访问、悬停、活动）、表单元素的启用或禁用状态、以及元素的特定位置（如第一个子元素、最后一个子元素等）。

 <style>
        p:nth-child(1) {
            color: red;
        }
        /* n: 1,2,3,4,5,........ */
        /* 选择偶数对应标签 */
        p:nth-child(2n) {
            color: blue;
        }
        /* 选择奇数对应标签 */
        p:nth-child(2n-1) {
            color: yellowgreen;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>一段文本1</p>
    <p>一段文本2</p>
    <p>一段文本3</p>
    <p>一段文本4</p>
    <p>一段文本5</p>
    <p>一段文本6</p>
    <p>一段文本7</p>
    <p>一段文本8</p>
    <p>一段文本9</p>
    <p>一段文本10</p>

    <style>
        /* 选择ul标签下的第一个li子元素 */
        ul li:first-child {
            color: red;
        }
        /* 选择ul标签下的最后一个li子元素 */
        ul li:last-child {
            color: red;
        }

        /* 选择ul标签下的第一个div类型的子元素 */
        ul div:nth-of-type(1) {
            font-size: 40px;
        }
        /* 选择ul下的偶数系列的li标签 */
        ul li:nth-of-type(2n) {
            color: yellowgreen;
        }
    </style>
    <ul>
         <div>块标签1</div>
         <li>无序列表标签</li>
         <li>无序列表标签</li>
         <li>无序列表标签</li>
         <li>无序列表标签</li>
         <li>无序列表标签</li>
         <!-- <div>块标签2</div> -->
    </ul>

    <!--  
        child： 子元素
        type:   类型，标签类型

        选择器:伪类 {}
        标签选择器:伪类 {}
        类名选择器:伪类 {}

        最常见就是链接标签的伪类选择器
        a:link {}
        a:visited {}
        a:hover {}
        a:active {}
    -->

属性选择器

属性选择器 input[type="text"] {}

可以通过class属性值来选择标签

  /* 选择class属性值为“i”字符开头的标签 */
        [class^="i"] {
            width: 60px;
            height: 60px;
            background-color: red;
            border-radius: 6px;
            margin: 5px;
        }
        /* 选择class属性值以“1”字符结尾的标签 */
        [class$="1"] {
            background-color: green;
        }
        [class$="2"] {
            background-color: blue;
        }
        [class$="3"] {
            background-color: purple;
        }
        /* 选择class属性包含字符 “o”的标签 */
        [class*="o"] {
            font-size: 50px;
        }

        /* 属性选择器 */
        [class="box"] {
            width: 60px;
            height: 60px;
            background-color: yellowgreen;
            margin: 5px;
        }
    </style>
    <div class="icon1">1</div>
    <div class="icon2">2</div>
    <div class="icon3">3</div>
    <div class="icon4">4</div>
    <div class="box">5</div>

    <style>
        /* 属性选择器 */
        input[type="text"] {
            height: 60px;
            border: 2px solid red;
        }
        input[type="password"] {
            height: 40px;
            border: 2px solid green;
        }
    </style>
    <input type="text">
    <input type="password">

    <!-- 
      总结：  
         像class、 type 、src 、href 、 alt 、 id 等等这些是什么？
         这些是标签属性
    -->

晚安_good night

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

选择器就是选择页面标签的方式，id选择器权重高于类名选择器。类名选择器权重高于标签选择器标签选择器数值：1 类名选择器数值：10 id选择器数值：100优先级： id选择器 > 类名选择器 > 标签选择器特殊情况下: 1) 行内样式权重高于id选择器2) 加了!important 的属性权重比行内样式权重还要高。
复制链接

扫一扫