html/css关于child的问题

ixeliap · 发表于 2020-2-10 20:14

本帖最后由 ixeliap 于 2020-2-10 20:22 编辑

最近因为工作被居家隔离了，赋闲在家，闲来无事学了一下web，遇到bug了

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
                  background-color: #ccc
                  } 

        div {
                   color : #ccc;
                   font : 700 80px '等线' ;
             }        
        div:first-child {
                              text-shadow : 1px 1px 1px #000 , -1px -1px 1px #fff;
                        }
        div:last-child {
                                 text-shadow : -1px -1px 1px #000 , 1px 1px 1px #fff;
                          }
    </style>
    <meta charset="UTF-8">
    <title>practice</title>
    <link rel="stylesheet" type="text/css" href="练习.css">
</head>
<body>
    <div >
      突起的文字
    </div>
    <div>
      凹下的文字
    </div>
</body>
</html>

代码如上。浏览器打开ok 360截图20200210201024195.jpg

。但是dw打开就不显示last-child 360截图20200210201130826.jpg

。
此外，如果在第二个div下面随意加任何标签浏览器也不显示凹下的文字 360截图20200210201245826.jpg

求教一下各位哪里出问题了呢？

深巷丶 · 发表于 2020-2-10 21:06

没用过DW，不清楚，IE和Chrome打开都没问题。
在第二个div加标签也没出现问题。

ixeliap · 发表于 2020-2-10 21:19

深巷丶发表于 2020-2-10 21:06
没用过DW，不清楚，IE和Chrome打开都没问题。
在第二个div加标签也没出现问题。

这样子，不是加在里面

缘来是熊孩子 · 发表于 2020-2-10 21:34

ixeliap 发表于 2020-2-10 21:19
这样子，不是加在里面

你这是p标签，你在前面的样式中只设置了div的样式，并没有设置p标签中的样式，所以，你在p标签中的内容就不会显示凹下的样式，不知道我理解的对不对，

深巷丶 · 发表于 2020-2-10 21:36

本帖最后由深巷丶于 2020-2-10 21:50 编辑

first-child和last-child选择器之前都没用过，查了资料才知道，你看看能理解不？

E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。

深巷丶 · 发表于 2020-2-10 22:04

如果无法理解，看看这两篇文章可能有所帮助
https://www.jianshu.com/p/4837fb9a6f6e
https://www.cnblogs.com/snowbaby-kang/p/3955672.html

ixeliap · 发表于 2020-2-10 22:33

缘来是熊孩子发表于 2020-2-10 21:34
你这是p标签，你在前面的样式中只设置了div的样式，并没有设置p标签中的样式，所以，你在p标签中的内容就 ...

‘凹下的文字’下面不论加什么，只要有加上任何标签，’凹下的文字‘的阴影都不显示出来。

ixeliap · 发表于 2020-2-10 22:36

深巷丶发表于 2020-2-10 22:04
如果无法理解，看看这两篇文章可能有所帮助
https://www.jianshu.com/p/4837fb9a6f6e
https://www.cnblog ...

和我描述的问题不一样

深巷丶 · 发表于 2020-2-10 23:03

本帖最后由深巷丶于 2020-2-10 23:04 编辑

ixeliap 发表于 2020-2-10 22:36
和我描述的问题不一样

哪里不一样了，你这个就是在第二个div标签下加了一个p标签，导致第二个div在父元素也就是body标签内不是最后一个标签了，因此last-child选择器失效了，就显示不出来了啊，我给你的文章写的是first-child而已，这俩选择器都一样啊

深巷丶 · 发表于 2020-2-10 23:05

你还无法理解我只能说我能力有限了。或者我的想法是错的

帐号		自动登录	找回密码
密码			注册[Register]

[求助] html/css关于child的问题