这是我参与「第四届青训营」笔记创作活动的第4天

训练营的朋友们,大家好,我是练习时长4天半的前端练习生,喜欢html,css,js

今天写一下css的笔记,请多指教

html,css,js是前端必学的三件套,html控制内容,css控制样式,js控制行为

css可以设置字体和颜色,设置位置和大小,可以添加动画效果,那我们首先要找到我们的目标元素,css怎么找到目标元素呢?

这时候,就要用到css的选择器了,css的选择器有许多种,下面说一下

ID选择器

在一个 HTML 文档中，CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素，元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。

/* The element with id="demo" */
#demo {
  border: red 2px solid;
}

类选择器

在一个 HTML 文档中，CSS 类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。

.类名 {样式声明 }

CSS :active 伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。

/* Selects any <a> that is being activated */
a:active {
  color: red;
}

有许多伪类,这里不多介绍,选择它们的方法可跟这个类比

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

/* Add an arrow after links */
a::after {
  content: "→";
}

css的伪元素的选择方法如上,其他伪元素也是这么个选择法

这里介绍了一些常用的选择器,希望以后能掌握更多知识,成为更好的自己!