CSS进阶指南-优快云博客

本文链接：https://blog.youkuaiyun.com/slwbcsdn/article/details/53177209

为了继续爱打谁打谁web游戏，重新翻出了之前学习的CSS课程，发现很多细节还是还给了mooc。都是一些蛮重要的细节，那就在这里记下了。
类选择器和ID选择器的区别中有两点还是很容易被落下的。第一个，同名的类选择器可以根据需要出现多次，而某一个名称的ID选择器只能出现一次，只能出现一次，只能出现一次。当然了，是指在一个HTML文件中。无知的我居然忘记了类选择器有这个特点，以为只能用子选择器实现一个样式用于多个标签的功能。
这里写图片描述
类选择器有一个列表方法，说起来就是一个class=“”引号里头可以放多个样式，而ID选择器则不行。
六个选择器、两个选择选择符，欧尼酱你能说出来几个呢？

然后我遇到了CSS选择器混合使用的问题，因为你得把多个Element设置成一种样式，混合使用能极大提高效率。经过我不懈的尝试，结论如下：多个ID选择器和分组选择符可以合起来用，而不是非得只有标签才能用分组选择符，例如：
h1,span{color:red;}
但是呢，多个ID选择器和子类选择器合在一起使用是没有效果的。

对于web新手来说，div真的是一个很变态的存在，都知道布局它最有用（毕竟不能用table了），但是用起来却很麻烦/(ㄒoㄒ)/~~。那些教程里头真的应该专门开辟一章来讲讲div成功阻拦了多少人走进前端的道路。在此必须抨击一下div反人类的性质。下面看一个一针见血的问题，你如何让多个div存在于一行之中？这个问题的核心在于，如何解决浏览器在 div 元素前后放置的那个换行符。
好吧，人类，当你准备解决这个问题的时候先去学学盒子模型的原理吧。(⊙﹏⊙)。理解清楚这个之后再会用浮动模型就OK了。(^o^)/~

再后来，我隐隐的感觉，能用span的地方就尽量用span，代替div。但是span也有很大的限制：内联元素的高度、宽度及顶部和底部边距不可设置，元素的宽度就是它包含的文字或图片的宽度，不可改变。。也就是说div的坑我是跳不出去了嗖。

下面看一个案例：

            <!--分享按键区域-->
                <div class="bshare-custom">
                    <a title="分享到QQ空间" class="bshare-qzone"></a>
                    <a title="分享到新浪微博" class="bshare-sinaminiblog"></a>
                    <a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a>
                    <span class="BSHARE_COUNT bshare-share-count">0</span>
                </div>
                <!--图片地址输入框,最大长度50，不限字符类型-->
                    <span id="textInputSpan">
                        URL:
                        <input id="textInput" maxlength="50" type="text" width="150" />
                        <button onclick="changeText()">GO!</button>
                    </span>