034 - 初学CSS的噩梦（Ⅰ）

不二如是 · 发表于 2019-11-5 08:39:48

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2019-12-18 08:07 编辑

上一集：033 - 还能这么玩

哈哈，废话不多说了，#敲黑板时刻！

在线视频：传送门

课程思维导图

猛戳

登录/注册后可看大图

超清

一段基础代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
<style>
</style>
</head>
<body>
<h1>FishC.com</h1>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consequuntur deserunt dolor doloribus ea eius enim eos esse explicabo facere, harum in laboriosam necessitatibus nulla obcaecati optio perspiciatis porro quibusdam. </span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, adipisci beatae ea earum, eius facere itaque natus neque nobis perferendis perspiciatis quae quas quasi repudiandae saepe! Commodi labore nesciunt possimus!</p>
</body>
</html>

复制代码

接下来本讲演示都是基于此。

html 中我们用到了块级（h1、p）和行内元素（span）。

1、::first-line

::first-line 选择器用于选取指定选择器的首行。

添加样式：

::first-line
{
background-color:green;
}

复制代码

我们本意对所有元素的首行添加样式。

但是只有块级元素才会生效，行内元素没有效果。

因为只有块级才有换行（按照浏览器宽度自动换行）的概念，而行内本身就是一行。

还可以指定元素添加 ::frist-line：

p::first-line
{
background-color:green;
}

复制代码

效果：

2、::first-letter

::first-letter 选择器用于选取指定选择器的首字母。

添加样式：

::first-letter
{
font-size:200%;
color:green;
}

复制代码

没错，还是只针对块级元素。

也可以指定为具体元素添加样式： p::first-letter{}

3、::before

::before 选择器在被选元素的内容前面插入内容。

行内和块级都可以。

注意：

游客，如果您要查看本帖隐藏内容请回复

为 p 元素添加样式：

p::before
{
content:"鱼C - ";
}

复制代码

效果：

4、::after

::after 选择器在被选元素的内容后面插入内容。

还是通过 content 属性来指定要插入的内容。

为 span 添加样式：

span::after
{
content:"- 我爱鱼C";
}

复制代码

5、::selection

::selection 选匹配元素中被用户选中或处于高亮状态的部分。

只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。

为 p 元素添加选中样式：

p::selection
{
color:green;
}

复制代码

当 p 元素被选中后，字体颜色会变为绿色：

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：035 - 初学CSS的噩梦（II）

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅淘专辑（传送门）（不喜欢更要订阅

）

LeoDong-77 · 发表于 2019-11-12 23:05:11

大风包子 · 发表于 2019-11-16 15:56:36

跟上进度了

Albertdjy · 发表于 2020-2-16 14:07:54

为什么我按照视频输入，但是一点效果都没有，已经保存了

若习~岚 · 发表于 2020-2-22 13:27:26

看一看

MYlindaxia · 发表于 2020-3-12 09:11:21

before在之前添加，after在之后添加

Fire4EVER · 发表于 2020-6-21 16:12:12

Bright06 · 发表于 2020-8-14 23:35:35

我要好好学习= · 发表于 2020-8-20 17:47:42

昵称_cwb · 发表于 2020-8-27 10:13:00

兴南 · 发表于 2020-9-7 22:56:57

huiyi479 · 发表于 2020-9-18 14:17:33

pym131420 · 发表于 2020-11-9 20:34:15

trefrn · 发表于 2020-12-5 15:13:15

我爱鱼c

natapon · 发表于 2021-1-13 23:44:24

回复快快快

笙歌醉梦 · 发表于 2021-1-20 12:01:31

只想白嫖 · 发表于 2021-2-4 17:58:19

鱿鱼追不上我 · 发表于 2021-3-11 22:57:30

13998929493 · 发表于 2021-3-22 09:21:33

初学css

yuxijian2020 · 发表于 2021-3-29 16:21:10

痛苦

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 034 - 初学CSS的噩梦（Ⅰ）

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐: