当我们选中网页上的文字时,通常的效果是蓝底白字,其实,底色和字体颜色是可以改变的。
我们可以使用伪元素来实现这种效果:
首字下沉,是否似曾相识呢?哦,是在以前学 word 软件文字排版的时候。在一些报纸上经常都会看见首字下沉的效果,其他文字围绕在它周围。
看上去还是这么回事。
通过锚点,我们可以滚动到网页特定的位置,原始的锚点跳转是没有过渡效果的。注意滚动条:
通过 CSS scroll-behavior 属性可以让滚动变得更加丝滑。
caret-color 属性可以让我们自定义 input 框闪烁的光标,是不是很神奇鸭
给透明背景图片加背景,感觉很厉害的样子。两行 CSS 样式九搞定咯:
我们可以修改滚动条的样式,滚动条变得更加炫酷。
如果你不想让用户选中页面上的文字,就可以用这个特性了。
很多情况下都需要应用到IE盒子模型的特性,让元素的宽度、高度包含border和padding。
【这是我的学习笔记,你也可以拿去用】
1 元素选择器:比如p{xxxx},选择文档中所有的p元素;
2 类选择器:比如.center_bar{xxxx},选择文档中使用了类center_bar的元素;
3 id选择器:比如.button1{xxxx},选择文档中使用了button1的元素;
4 或选择器:用逗号连接多个选择器;
5 与选择器:多个选择器紧挨在一起;
6 后代选择器:用空格连接多个选择器;
7 子代选择器:用大于号连接多个选择器,它其实是后代选择器的特殊情况;
8 属性选择器:
(1) 比如p[id],选择标签上有属性“id”的p元素;
(2) 比如p[id="button1"],选择标签上有属性“id”并且id的值为“button1”的p元素;
(3) 比如p[id^=”b”],选择标签上有属性“id”并且id的值以“b”开头的p元素;
(4) 比如p[id$=”b”],选择标签上有属性“id”并且id的值以“b”结尾的p元素;
(5) 比如p[id*=”b”],选择标签上有属性“id”并且id的值包含“b”的p元素;
9 p:first-child:既是p元素,也是某元素的第一个孩子;
10 p:last-child:既是p元素,也是某元素的最后一个孩子;
11 p:nth-child(3):既是p元素,也是某元素的第三个孩子;
12 p:nth-child(odd):既是p元素,也是某元素的第奇数个孩子;
13 伪类选择器都是某种状态,比如active、link、hover,使用“:”;
14 伪元素选择器,确实有某些实体的东西,比如第一行文字、第一个文字、被选中的文字,使用“::”
15 只有多个选择器选中了同一个元素的同一个属性,才会出现优先级的问题;
16 如果两个选择器优先级相同,那么写在后面的选择器生效;
17 选择器优先级的排列:
(1) !important
(2) 内联样式
(3) id选择器
(4) 类和伪类选择器
(5) 元素和伪元素选择器
(6) *选择器
(7) 继承样式
你好 这个可以采用js 来实现 你可以写一个函数 每隔半秒执行一次 检测文字是否为选中状态 如果是选中的状态 你可以对这个文字的css样式进行相应的设置 祝你学习进步 生活愉快 谢谢