记录一点CSS学习心得

参考资料

 

前言

想要高效快捷的学习CSS，你需要：

  • VSCode, with following extensions
    • Color Highlight | 颜色显示
    • Live Server | html热预览
  • 前置知识
    • 熟练的html
    • 入门的JavaScript
  • 辅助工具/网站
    • 配色参考
    • 图片素材
    • 优秀的榜样网站
  • 信息搜索能力
  • 一些小创意和小自信

tip: 阅读本文之前, 最好对选择器有一定的了解, 或先阅读上一篇文章

 

首字母大大大大写

利用伪类:first-letter, 我们可以单独对第 1 个字符设置属性

实例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            p:first-letter{
                color:#ff0000;  <!-- 红色 -->
                font-size:xx-large;
            }
        </style>
    </head>
    <body>
        <!-- 同样适用于中文 -->
        <p>You can use the :first-letter pseudo-element to add a special effect to the first character of a text!</p>
    </body>
</html>

 

选择除某一类标签以外的所有标签

在下面的实例代码中, 只有第一句话是红色的, 其余都是绿色, 利用了:not伪类

实例代码

<html>
    <head>
        <meta charset="utf-8">
        <style>
            .text:not(.class1 .text){
                color: #00ff00; <!-- 绿色 -->
            }
            .text{
                color: #ff0000; <!-- 红色 -->
            }
        </style>
    </head>
    <body>
        <div class="class1">
            <p class="text">
                text in class1
            </p>
        </div>
        <div class="class2">
            <p class="text">
                text in class2
            </p>
        </div>
        <p class="text">
            text out of any class
        </p>
    </body>
</html>