html，css基础7

最新推荐文章于 2024-09-30 08:51:48 发布

止语c

最新推荐文章于 2024-09-30 08:51:48 发布

阅读量55

点赞数

分类专栏： HTML和CSS学习之路文章标签： css

本文链接：https://blog.csdn.net/weixin_53333752/article/details/128382924

版权

HTML和CSS学习之路专栏收录该内容

27 篇文章 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>
  </head>
  <body>
    <!-- 
        父元素
            直接包含子元素的元素
        子元素
            直接被父元素包含的元素
        祖先元素
            直接或间接包含后代元素的元素
            父元素也是祖先元素
                        
        后代元素
            直接或间接被祖先元素包含的元素
            子元素也是后代元素
        兄弟元素
            拥有相同父元素的元素

     -->
    <!-- 元素选择器
        根据标签名来选中指定的元素
        语法：标签名｛｝        列如：p{} h1｛｝ div{}-->

    <!-- id选择器
        根据元素的id属性值选中一个元素 
        语法: #id属性值｛｝ #box{} #red{}
        -->

    <!-- 类选择器
        根据元素的class属性值选择一个元素 
        语法：.class属性值-->

    <!-- 通配选择器
        选择页面中的所有元素
        语法：* -->

    <!-- 交集选择器
        选中同时符合多个条件的元素
        语法：选择器1选择器2选择器n{}
        交集选择器中如果有元素选择器，则必须以元素选择器开头-->

    <!-- 并集选择器 
            同时选择多个选择器对应的元素
            语法：选择器1，选择器2，选择器n{}-->

    <!-- 子元素选择器
            选中指定父元素的指定子元素
            语法：父元素>子元素｛｝-->
    <!-- 后代元素选择器
            选中指定元素内的指定后代元素
            语法：祖先 后代｛｝ -->
    <!-- 兄弟元素选择器
            语法：上一个元素+下一个元素（选择下一个兄弟元素）
                元素~元素（选择下面所有的兄弟元素） -->

    <!-- 属性选择器
        语法：
            [属性名]选择含有指定属性的元素
            [属性名=属性值]选择含有指定属性和属性值的元素
            [属性名^=属性值]选择属性值以指定值开头
            [属性名$=属性值]选择属性值以指定值结尾的元素
            [属性名*=属性值]选择属性值中含有指定值的元素
    
    -->

    <!-- 伪类选择器
        伪类（不存在的类，特殊的类）
            伪类用来描述一个元素的特殊状态
            伪类一般使用冒号开头
            ：frist-child
            :last-child
            :nth-child()选中第n个子元素
            ：nth-child(n)选中所有元素
            :nth-child(2n)或nth-child(even)选中偶数位的元素
            :nth-child(2n+1)或nth-child(odd)选中奇数位的元素
            
            
            :frist-of-type
            :last-of-type
            :nth-of-type()
            功能和上述类似，不同点是他们是在同类型元素中进行排序-->
  </body>
</html>