记录一点CSS学习心得

参考资料

 

前言

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

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

 

选择器

选择器(selector) 是CSS与HTML文档交流的桥梁, 是设置CSS样式必需的工具. 选择器的用法难度方差特别大, 用的高级的选择器不亚于使用JS, 而用的随意的选择器也非常适合入门者使用

如果你要在CSS中使用选择器, 你需要为HTML元素设置id和class

<div id="div_1" class="container">...</div>

 

基础选择器

id选择器

id选择器可以选择有特定id的HTML元素, 在CSS中用#定义, 使用语法如下

#div_1{
    background-color: red;
}

注意: 在同一个HTML文档中, 不允许id的重复; 同时, id不允许以数字开头

 

class类选择器

class类选择器能选择一类带有相同class的HTML元素, 在CSS中用.定义

.container{
    background-color: red;
}

 

标签选择器

标签选择器能选择所有这类标签的HTML元素, 例如我想选取body标签下, 所有h1标签的HTML元素

h1{
    color: blue;
}

 

内联选择器

内敛选择器即是直接在HTML标签内的代码

<h4 style="border: solid;">Text</h4>

 

冲突处理

当CSS选择器发生冲突, 例如同时对一个属性做出修饰时, 优先级遵循以下规律

  • 内联 > id > 类 > 标签

因此, 当你修改了选择器的某个属性, 但是发现没有任何变化, 你可以检查其优先级更高的选择器有没有对这个属性做过修饰

 

常用选择器

后代

回忆我们在盒子理论一文中提到的, HTML的盒子支持多层嵌套, 为了能更加精准的定位到嵌套层数更深的子元素, CSS的选择器支持后代, 即可以通过类似于树的方式, 一层一层搜索到层数比较深的节点

{parent} {child}{
    ...
}
其中{}代表某种选择器

比如我们想选择.container下的.content类的元素, 但是不想选择到其他.content类的元素, 我们可以这样

.container .content{
    ...
}

注意: 在使用后代选择器时, 由于CSS会对整个HTML文档向上做出匹配, 其开销是特别大的, 因此我们有要注意一些特别的点, 以提高CSS选择器的性能

  • 避免限制id选择器
    不推荐
    .container #input{...}
    推荐
    #input{...}
    原因: 在HTML文档中, id是唯一的, 因此不需要做出特别限制; 做出限制之后, 反而会让CSS向上进行无意义的匹配, 徒增开销
  • 避免多层后代
    不推荐
    .card #container div li a p{...}
    推荐(为p添加一个类)
    .p-in-card{...}
    原因: 同上, 多层匹配会增加很大的开销

 

属性

CSS提供了属性选择器, 可以根据元素的属性名和属性值选择特定的元素

<input type="text">
<input type="password">
input[type="text"]{
    border: solid;
}

上面这个例子就使用了属性选择器, 专一地选择了前者而不是两者都选

此外, 属性选择器支持正则表达式, 因此你只需要用一部分内容就能匹配整个内容(多用于链接的匹配)

  • X[href^=“start”]: 表示选择href属性以start开头的元素X
  • X[href$=“end”]: 表示选择href属性以end结尾的元素X

 

清空

清空选择器可以选择某个父元素下的所有子元素

* {
    margin: 0;
    padding: 0;
}

上述例子就能使整个HTML文档的所有元素的内外边距修饰为0, 同理, 我们也可以选择某个父元素下的子元素

.container * {
    margin: 0;
    padding: 0;
}

注意: 尽量不要使用清空选择器, 因为它的负担实在是太大了()

 

其他选择器(我觉得有用的)

在介绍其他选择器之前, 我们介绍一个强大的概念: 伪类Pseudo-classes和伪元素Pseudo-element

伪类是CSS中, 用来添加一些特殊效果的选择器, 之所以叫他伪类, 是因为伪类是不出现在HTML文档中的, 它是基于文档之外的抽象概念

一般来说, 伪类使用如下的语法selector:pseudo-classes, 而伪元素使用如下的语法selector::pseudo-element

伪类和伪元素的使用可以使你的HTML页面活起来, 有时能起到不亚于JS的作用

使用前者选择未被访问的链接, 后者选择被访问过的链接

X + Y

相邻选择器, 选择X的直接后继元素Y(指某个元素后面的第一个层级相同的元素)

X > Y

子节点组合选择器, 选择X的直接子元素Y

X ~ Y

兄弟节点组合选择器, 选择X后面所有层级相同的元素Y(可以有间断)

X:checked

选择X元素的, 被选中的单选框和复选框

X::after & X::before

在X元素的后面或前面生成一些内容

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
}

.clearfix { 
   display: inline-block; 
   _height: 1%;
}

上述代码会在目标标签后补上一段空白后将其清除, 可以用于overflow:hidden不起作用的情况

X:hover

选择鼠标悬停着的X元素

X:not(Y)

选择除了Y元素以外的所有X元素