关于css类名

最新推荐文章于 2024-05-27 09:00:00 发布

路边的小西瓜

最新推荐文章于 2024-05-27 09:00:00 发布

阅读量2.5k

点赞数 3

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_51332774/article/details/115073393

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS选择器：

类名为什么要一层一层写：直接.class也是可以的，但如果有一个项目中出现两个一样的类名就会出现样式覆盖的问题。按层级写就可以保证样式的唯一性以及结构清晰。
css样式表中的样式覆盖顺序，两个class同时存在会怎样？

id和class的区别

Class 在程序中称“类”，同时在CSS中也书面语也叫“类”。在CSS样式中以小写的“点”及“.”来命名

而且class(类)在同一个html网页页面可以无数次的调用相同的class类。这也说明class一般是用来调用css中的预配制属性的，比如说有一个预配制属性为如这里的“.class01{属性：属性值;} ”，这样就可以像调用函数一样不用再一个网页页面里重复的配置一个“类”属性，而只需要写上一个class类选择，就可以在同一个页面里任何位置调用选择具有相同的CLASS类。

ID是表示着标签的身份，在JS脚本中会用到id，当JS要修改一个标签的属性时，JS会将id名作为该标签的唯一标识进行操作。也就是说ID只是页面元素的标识，供其他元素脚本等引用。假如你的页面里出现了两个ID那JS效果特性较出现逻辑错误不知道依据哪个ID来改变其标签属性。在CSS里的ID不一定为JS而设置的，但是同样ID在页面里也只能出现一次，并且是唯一性。虽然可能我们才学DIV+CSS爱好者在一个页面里同时调用相同的ID多次但是仍然没有出现页面混乱错误，但是我们为了W3C及各个标准我们也要遵循ID在一个页面里唯一性。以免出现浏览器兼容问题。

#id和.class中间有空格和无空格的区别

首先中间有空格的情况：
是选择到.class1类下的.class2类子节点，即.class2类的节点要是.class1类子节点
代码：

<style>
    .class1 {
        color: black;
    }
    .class1 .class2 {
        color: red;
    }
    </style>
<body>
<div class="class1">
    I'm class1
    <div class="class2">I'm class2,son of class1</div>
</div>
</body>

结果：
在这里插入图片描述

无空格情况：
是选择到同时拥有.class1和.class2的节点
代码：

 <style>
        .class1 { color: black; }
        .class1 .class2 { color: red; }
        .class1.class2 { color: blue; }
 /*注意优先级，.class1 .class2的优先级比.class1.class2高，.class1 .class2写在.class1.class2后，.class1.class2会被覆盖*/
</style>
<body>
<div class="class1">
    I'm class1
    <div class="class2">I'm class2,son of class1</div>
    <div class="class1 class2">I'm class1class2,son of class1</div>
</div>
</body>

结果：
在这里插入图片描述
现在清楚了，不过还有一种情况是：在IE浏览器的“怪异模式”（“quirks” mode）下，.class1.class2 会没有效果，因为不支持 multiple selectors ，这时需要在文件开始加上 DOCTYPE ，像或者其他 DOCTYPE 。

逗号和空格的区别：

1.css中用逗号隔开表示两个不同类的样式名用同一个样式
2.空格隔开表示从属包含关系，是当前的元素子元素
3.逗号隔开表示并列关系，两者之间没有任何关系，可以使用同一个样式
在这里插入图片描述

CSS中inav ul li ul与inav>ul>li这两种写法的区别

">"是指只能一代接一代，比如： nav>ul>li>ul>li，必须是下面这样的

 <nav>
        <ul>
            <li>
                <ul>
                    <li></li>
                </ul>
            </li>
        </ul>
    </nav>

nav ul li ul只要求后面的元素是在nav标签下的顺序即可，对中间隔了几层不敏感，比如：

<nav>
    <ul id="a">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li>
            <ul id="b">
                <li></li><li></li>
            </ul>
        </li>
        <li>
            <ul id="c">
                <li></li><li></li>
            </ul>
        </li>
    </ul>
</nav>

nav>ul只选择nav下一级里面的ul元素，例如上面dom结构里id为a的ul。
nav ul选择nav内所包含的所有ul元素，例如上面dom结构里面id为a、b、c的全部ul。

nav>ul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。

路边的小西瓜

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于css类名

CSS选择器：类名为什么要一层一层写：直接.class也是可以的，但如果有一个项目中出现两个一样的类名就会出现样式覆盖的问题。按层级写就可以保证样式的唯一性以及结构清晰。css样式表中的样式覆盖顺序，两个class同时存在会怎样？id和class的区别Class 在程序中称“类”，同时在CSS中也书面语也叫“类”。在CSS样式中以小写的“点”及“.”来命名而且class(类)在同一个html网页页面可以无数次的调用相同的class类。这也说明class一般是用来调用css中的预配制属性的，比如说有
复制链接

扫一扫