CSS中你不知道的小细节

最新推荐文章于 2024-01-02 16:35:09 发布

githubcurry

最新推荐文章于 2024-01-02 16:35:09 发布

阅读量1.9k

点赞数 10

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/weixin_45277161/article/details/110392784

css 专栏收录该内容

28 篇文章

订阅专栏

本文整理了常见且易犯错的CSS属性。包括anchor伪类的顺序要求，隐藏元素的不同方式及影响，透明度设置差异，修改input中placeholder字体样式，元素外边距设置，强制文本段落不换行，以及CSS禁止文字被鼠标选中的属性等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

今天整理了几个常见的并且很容易犯错的CSS属性供大家参考，略有不足，还请各位小伙伴补充补充！

1.anchor伪类


a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

其中要注意的是，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
2. 隐藏元素
隐藏一个元素可以使用display: none和visibility: hidden，其中第一个可以隐藏元素，并且隐藏起来的元素不会占用任何空间。就是说，不仅元素看不见了，而且还不影响其他元素的布局。第二个就是隐藏起来了但是还是占据原来应有的空间，会影响整体布局。
3. 透明度
opacity属性设置之后，下面的子代属性都会有这个透明度。rgba的a通道设置的是当前元素的透明度
4. 修改input中placeholder的字体样式


/* webkit内核浏览器 */
        input::-webkit-input-placeholder{
            color: green;
        }
        /* Firefox 18- */
        input :-moz-placeholder{
            color: greenyellow;
        }
        /* Firefox 19+ */
        input ::-moz-placeholder{
            color:red;
        }

        input:-ms-input-placeholder{
            color: teal;
        }

元素设置外边距
行内元素可以设置左右margin，但是不能设置上下margin。想要调整高度的话可以设置line-hight。或者display: inline-block设置为行内块级元素后调整上下边距。块级元素可以设置上下左右的margin。

6.强制文本段落不换行


p
{
    white-space:nowrap;
}

文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。

7.CSS禁止网页或DIV中的文字被鼠标选中

CSS3中有个user-select属性，这个属性可以设置某个DIV元素中的文本不被选中，在我们设置页面的时候，不想一个div的光标为 ‘I’ 一样的输入光标，就可以禁用这个属性，然后在设置为cursor: pointor就可以了！
这个user-select有四个值，分别为：none | text | all | element，它的默认值为text

none:文本不能被选择

text:可以选择文本

all：当所有内容作为一个整体时可以被选择。如果双击或者在 上下文上点击子元素，那么被选择的部分将是以该子元素 向上回溯的最高祖先元素

Element:可以选择文本，但选择范围受元素边界的约束