网站首页编程语言正文

CSS样式：样式的冲突样式的继承伪元素伪类

作者：那人独钓寒江雪. 更新时间： 2022-07-12 编程语言

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /*
    id选择器
        作用：根据元素的id属性值选中一个元素
        语法:#id属性值{}
        例子：#box{} #red{} 

    类选择器
        作用：根据元素的class属性值选中一组元素
        语法：.class属性值

    通配选择器
        作用：选中页面中的所有元素
        语法：*    

    将class为red的div字体大小设置为30px
    
    交集选择器
        作用：选中同时符合多个条件的元素
        语法：选择器1选择器2
        注意点：
            交集选择器中如果有元素选择器,必须使用元素选择器开头


    选择器分组（并集选择器）        
        作用：同时选择多个选择器对应的元素
        语法：选择器1,选择器2,选择器3

    p+span{
        color:red;
    }
    表示选择器应用在div的父元素下的子元素p后面的span里。不包含p里面的span

    p ~ span{
        color:red;
    }
    表示选择下边
    
    子元素选择器
        作用：选中指定父元素的指定子元素
        语法：父元素 > 子元素

    .box > span{
        color : orange;
    }

    */
    #red {
        color: red;
    }
    .red {
        color: yellow;
    }
    .blue {
        color: brown;
    }
    p + span{
        color: black;
    }
    p[title] {/* 可加* 元素选择器[属性选择器]
        p[title=abc] 改变指定一个元素
        p[title^=abc] 选择属性值以指定值开头的元素 
        p[title$=abc] 选择属性值以指定值结尾的元素
        p[title*=abc] 包含abc元素
        */
        color: orange;
    }
    /* 
    伪类（不存在类，特殊的类）
        -伪类用来描述一个元素的特殊状态
            比如：第一个子元素、被点击的元素、鼠标移入的元素.....
        -伪类一般情况下都是使用：开头
            :first-child 第一个子元素
            :last-child 最后一个子元素
            ：nth-child() 选中n个子元素
                特殊值：
                    n第n个 n的范围为0到正无穷
                    2n或even表示偶数位的元素
                    2n+1或odd表示奇数数位的元素
                
                -以上这些伪类都是根据所有的子元素进行排序 而不是第一个li
                :first-of-type
                :last-of-type
                :nth-of-type()
                        -这几个伪类的功能和上诉类似,不同点是他们在同类元素中排序,对不同元素不做任何改变


    */
    ul >li:first-child{
        color: black;
    }
    ul >li:last-child{
        color: brown;
    }
    ul >li:nth-child(n){
        color: chartreuse;
    }
    ul >li:not(:nth-child(3)){
        color: yellowgreen;
    }
    ul >li:not(:nth-of-type(3)){ /* 
        同类型排序的第三个
        */
        color: yellowgreen;
    }
    </style>
</head>
<body>
    <h1 id="red">标题</h1>
    <p class="red">少小离家老大回</p>
    <div class="blue">选择器2</div>
    <div class="lan">
        <p title="abc">儿童相见不相识</p>
        <p title="hello">秋水共长天一色</p>
        <span>345</span>
    </div>
    
    <ul>
        <span>我是一个span</span>
        <li>第一个</li>
        <li> 第二个</li>
        <li> 第三个</li>
        <li>第四个 </li>
    </ul>
</body>
</html>

原文链接：https://blog.csdn.net/m0_62491934/article/details/125541546

上一篇：CSS样式：行内元素盒子模型
下一篇：windows版wsl docker desktop 安装n

网站首页 编程语言 正文

CSS样式：样式的冲突 样式的继承 伪元素 伪类

相关推荐

网站首页编程语言正文

CSS样式：样式的冲突样式的继承伪元素伪类