前端基础：结构伪类选择器的书写规范

clearwater · 发表于 2020-1-20 08:37

本帖最后由 clearwater 于 2020-1-21 19:26 编辑

前两位正确回答并且我能理解的大神，各给一个热心（如果手上的热心用完，一一排队今明两天内给，不是厚此薄彼）。因为能量有限，后面回复的大神，如果答案雷同，楼主在此表示感谢，就无法一一评分了。
水神、毒舌，求放过。
***************************
1、求教，在结构伪类选择器中，

是不是块级元素，后面跟冒号：要空一格？
而行内元素，后面跟冒号，不要空一格？两者挨在一起。

我看下面的截图就是这么写的。（有点废话的感觉，不过想确认一下。）
捕获.PNG

2. 为什么我的编译器是VS 英语版，H5的表单属性，写出来的提示却是中文的。这是因为我的系统是WIN的中文版的原因吗？如果我的系统是英语版的，提示是不是变成英语的？
我怎么样才能把提示变成英语的呢？

捕获2.PNG

补充第三个问题：
3. 为什么我用span当选择器的标签，结果出现的是span第一和第二个娃，a都选出来？
选择器后面一定要有div之类的块级盒子包着？

我把这些代码也上传到一个网站上了，可以在线看。你们哪一个方便就用哪一个吧、
https://codepen.io/iwater/pen/VwYVjoK

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=m, initial-scale=1.0">
    <title>Document</title>
    <style>
        span:first-child {
            background-color: pink;
        }
    </style>

</head>

<body>

    <div>
        <span>
            <a href="">123</a>
            <a href="">abc</a>
        </span>
        <span>333333</span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

</body>

</html>

69之皇 · 发表于 2020-1-20 08:59

VS需要下载中文插件才会变中文版直接去拓展商店下载即可 chinese(simplifed) language ,至于伪类的话不需要空格就行 CSS3 有一些新的伪类是需要两个：：的，这个注意一下，祝你学有所成

ixeliap · 发表于 2020-1-20 09:25

浏览器问题吧

clearwater · 发表于 2020-1-20 10:43

谢谢楼上两位大神的回复。
~~~~~~~~~~~~~~~~~~~~~
@氖气
@XXXXXMY
要是看到的话，能不能帮助我一下？

被遗忘的路人 · 发表于 2020-1-20 11:01

本帖最后由被遗忘的路人于 2020-1-20 11:03 编辑

看了半天没看懂

<el-row>
         <transition name="el-zoom-in-center">
            <el-col class="topList" v-show="boxTransition">
                  <h2>新增用户 (今日)</h2>
                  <h1>{{newNum.newNum}}</h1>
                  <p>相比昨日: {{newNum.percentageNew}}%</p>
            </el-col>
         </transition>
         <transition name="el-zoom-in-center">
            <el-col class="topList" v-show="boxTransition">
                  <h2>启动次数 (今日)</h2>
                  <h1>{{startNum.startNum}}</h1>
                  <p>相比昨日: {{startNum.percentageStart}}%</p>
            </el-col>
         </transition>
         <transition name="el-zoom-in-center">
            <el-col class="topList" v-show="boxTransition">
                  <h2>登录用户 (今日)</h2>
                  <h1>{{loginNum.loginNum}}</h1>
                  <p>相比昨日: {{loginNum.percentageLoginNum}}%</p>
            </el-col>
         </transition>
         <transition name="el-zoom-in-center">
            <el-col class="topList" v-show="boxTransition">
                  <h2>充值金额 (今日)</h2>
                  <h1>{{rechargeNum.rechargeNum}}</h1>
                  <p>相比昨日: {{rechargeNum.percentageRechargeNum}}%</p>
            </el-col>
         </transition>
      </el-row>

.topList {
      color: #ffffff;
      width: 230px;
      padding: 30px 0;
      border-radius: 16px;
      margin-right: 30px;
      text-align: center;
      margin-bottom: 30px;
      /*cursor: pointer;*/
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.topList:nth-child(1) {
      margin-left: 10px;
      background-image: linear-gradient(-45deg, #3885e3 0%, #a9e6ff 100%), linear-gradient(#ffffff, #ffffff);
}

.topList:nth-child(2) {
      background-image: linear-gradient(-45deg, #f38f43 0%, #ffdc99 100%), linear-gradient(#999999, #999999);
}

.topList:nth-child(3) {
      background-image: linear-gradient(-45deg, #5966ba 0%, #cbd2ff 100%), linear-gradient(#ffffff, #ffffff);
}

.topList:nth-child(4) {
      margin-right: 0;
      background-image: linear-gradient(-45deg, #8654bd 0%, #efc4ff 100%), linear-gradient(#a9a9a9, #a9a9a9);
}

这是我的,应该和你写的是一样的,

不要问我为啥不循环,非要写四遍~ 我也很操蛋,老大那样反的数据,不让循环,拿人工资我也没办法

a361690548 · 发表于 2020-1-20 11:13

第三个问题
span a:first-child {
         background-color: pink;
      }
你要选择span标签包含的一堆a标签的第一个标签
不一定非要div包含
可能解释不到位

氖气 · 发表于 2020-1-20 21:43

首先我并不是大神，其次，在我自己开发的时候
1、伪类选择器的语法就是：选择器名:伪类选择器名，冒号两边都没有空格隔开，无论是块级元素还是行内元素或者行内块元素；多嘴一句：按照我的理解，举个例子，div:first-child(2) 选中的是“第二个子元素，并且这个子元素是div”的一个标签；

C:\Users\hasee\Desktop\Snipaste_2020-01-20_21-37-15.png
思考一下为什么div1和divb都是蓝色；
2、这个问题我的意见跟3楼一样，是因为浏览器语言设置为中文，所以提示就是中文的；不严谨的说，编译器（如VScode）是负责编译代码的，而浏览器是负责根据代码渲染页面的，两者并不是一样的环境；换句话说，提示是在浏览器上弹出的，而不是编译器弹出来的，应该先从浏览器考虑；
3、第三个问题6楼回答了，我再多说一些：两个a标签嵌套在span标签里，那这两个a标签也就属于这个span标签的一部分，我看你的代码是对span标签设置字体颜色color，这个样式可能会被span标签里的子元素继承；
给楼主一个小建议，一般我开发是按照：1需求→2分析思路→3代码实现的顺序来进行的，你提问也可以按照这个顺序来描述，至少先说清楚你的需求（要实现的效果，如设置字体红色，宽度100px等等）。

clearwater · 发表于 2020-1-20 22:52

本帖最后由 clearwater 于 2020-1-20 22:54 编辑

氖气发表于 2020-1-20 21:43
首先我并不是大神，其次，在我自己开发的时候
1、伪类选择器的语法就是：选择器名:伪类选择器名，冒 ...

谢谢您和楼中各位的帮助。您的回复非常详尽和透彻。

一楼的第一个问题，就是我把div与冒号之间的空格去掉之后，CSS中的样式就消失了。
请看我的动画。（第一次是有空格，样式正确显示；然后我把空格去掉，发现样式就消失了。）

我的编译器用的是VS CODE，和SUBLIME，两个都试过了，结果都是这样的。
您能解释一下我哪里出问题了吗？

我附上我正在学习的某马视频的教程，在开始的01：02分钟左右，视频老师也是带空格。
链接: https://pan.baidu.com/s/1Cy2p4BGbJncscuTNsx6k8w 提取码: 1ixd

您的回帖里一张图片好象没上传成功，能不能麻烦您重新上传一下？

我这些问题是零零碎碎的，有的不是太重要，我就攒在一起问。我现在也不是在做啥项目，是跟着某马老师的视频学习。他讲到哪，我就抄到哪，然后不理解的地方我才发帖问，所以逻辑有点乱。

以后我会尽量说清楚我的问题。

ixeliap · 发表于 2020-1-20 23:02

哎呀，这个热心值受之有愧，当时随便浏览只看到了问题2。。。现在重新说一下我的看法。
第一个问题，空不空没区别。第二个问题，原观点原因是中文浏览器。第三个问题，你说的是多级标签的第一个标签，当然会把这个标签里面的所有都算上，爷爷说老大家，你爸是老大，你和你的亲兄弟姐妹当然都是老大家的。span标签和div是有一点区别的，具体我不知道怎么说，但是既然叫标签，叫块，当然是为了分类使用方便。

氖气 · 发表于 2020-1-21 13:57

clearwater 发表于 2020-1-20 22:52
[md]谢谢您和楼中各位的帮助。您的回复非常详尽和透彻。

---

看了楼主的动态图，我试了一下，认为是这样：
1、加了空格整体就形成一个后代选择器：选中div标签里第5个子元素（只要符合这个条件，多级嵌套的标签也会被选中，参考以下图片），具体到楼主的例子，就是选中那个内容为abcde的span标签；
2、不加空格整体就是交集选择器：选中“第5个子元素，并且这个子元素是div”的一个标签，楼主的例子里没有符合条件的标签，所以不起作用。
补充一下，:nth-child()这个选择器适合用在选择并列关系的标签，嵌套多级标签时要慎用，除了想要选择的标签外，还可能会选中其他符合条件的标签，可以通过设置合理的类名或id名解决。

楼主提的这个问题也给我涨姿势了，以前没试过加空格会有什么效果。

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

[已解决] 前端基础：结构伪类选择器的书写规范

免费评分

免费评分

免费评分

免费评分

免费评分

免费评分