关于css样式的若干小问题

最新推荐文章于 2023-09-30 22:10:15 发布

无法长大

最新推荐文章于 2023-09-30 22:10:15 发布

阅读量328

点赞数 1

本文链接：https://blog.csdn.net/m0_38082271/article/details/76261717

版权

一.类选择器

例 1:

<p class="important warning">
This paragraph is a very important warning.
</p>

这两个词的顺序无关紧要，写成 warning important 也可以。
我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素

还有一个银色的背景。就可以写作：
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一

个类名，匹配就会失败。

例 2:

.filter.is-active .x-icon-wrapper .x-icon {
transform: translateX(0);
}

即可用上边的情况来解释,注意空格表示'与'也就是'和'的意思.

二.区分

p span{

p,span{

两个有什么区别？

p span{}选择了P元素下的所有span元素。这是后代选择器，空格是后代选择器的标识符。

p,span{}选择了P元素和span元素。这是多元素选择器，同时选择多个元素，元素之间用逗号分隔。

三.一个冒号与两个冒号的区别

一个冒号(:)用于css3伪类,两个冒号(::)用于css3伪元素.

伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。

对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

四.calc()函数

个人第一次用到这个函数,总结一下.

calc() = calc(四则运算)

用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：height: calc(100% - 30px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
例如:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>calc()函数</title>
<style>
.test {
width: calc(100% - 50px);
background: grey;
}
</style>
</head>
<body>
<div class="test">宽度为100% - 30px</div>
</body>
</html>

五. .cur文件

cur是cursor(光标)的缩写，格式是静态光标文件。图标文件:一种是扩展名是·ico的文件。

一般情况下，你可以把一个图标文件改名后直接作为鼠标指针来使用。当然，一些色彩丰富的大图标，如果用作鼠标指针的话，在硬件不足的情况下，会出现闪烁的现象。

怎么使用:

cursor 属性规定要显示的光标的类型（形状）。

该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。

cursor:help;此光标指示可用的帮助（通常是一个问号或一个气球）。
cursor:url(),auto;需使用的自定义光标的URL.
注释：请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。
更多的样式使用可以参考w3c.网址:http://www.w3school.com.cn/cssref/pr_class_cursor.asp

六. div边框显示阴影

这个还是比较简单的,所以就不班门弄斧了,直接上例子.

例子:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.shadow {
width: 100px;
height: 100px;
background: rgba(33, 150, 243, 0.69);
box-shadow: 10px 10px 5px #636161;
}
</style>
<body>
<div class="shadow"></div>

无法长大

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于css样式的若干小问题

一.类选择器例 1: This paragraph is a very important warning. 这两个词的顺序无关紧要，写成 warning important 也可以。我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中
复制链接

扫一扫