前端基础：结构伪类选择器的书写规范
本帖最后由 clearwater 于 2020-1-21 19:26 编辑前两位正确回答并且我能理解的大神，各给一个热心（如果手上的热心用完，一一排队今明两天内给，不是厚此薄彼）。因为能量有限，后面回复的大神，如果答案雷同，楼主在此表示感谢，就无法一一评分了。
水神、毒舌，求放过。
***************************
1、求教，在结构伪类选择器中，
是不是块级元素，后面跟冒号：要空一格？
而行内元素，后面跟冒号，不要空一格？ 两者挨在一起。
我看下面的截图就是这么写的。（有点废话的感觉，不过想确认一下。）
2.为什么我的编译器是VS 英语版，H5的表单属性，写出来的提示却是中文的。这是因为我的系统是WIN的中文版的原因吗？ 如果我的系统是英语版的，提示是不是变成英语的？
我怎么样才能把提示变成英语的呢？
补充第三个问题：
3.为什么我用span当选择器的标签，结果出现的是span第一和第二个娃，a都选出来？
选择器后面一定要有div之类的块级盒子包着？
我把这些代码也上传到一个网站上了，可以在线看。你们哪一个方便就用哪一个吧、
https://codepen.io/iwater/pen/VwYVjoK
<!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> VS需要下载中文插件 才会变中文版 直接去拓展商店下载即可 chinese(simplifed) language ,至于伪类的话 不需要空格就行 CSS3 有一些新的伪类是需要两个：：的，这个注意一下，祝你学有所成 浏览器问题吧 谢谢楼上两位大神的回复。
~~~~~~~~~~~~~~~~~~~~~
@氖气
@XXXXXMY
要是看到的话，能不能帮助我一下？
本帖最后由 被遗忘的路人 于 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);
}
这是我的,应该和你写的是一样的,
不要问我为啥不循环,非要写四遍~ 我也很操蛋,老大那样反的数据,不让循环,拿人工资我也没办法 第三个问题
span a:first-child {
background-color: pink;
}
你要选择span标签包含的一堆a标签的第一个标签
不一定非要div包含
可能解释不到位
首先我并不是大神，其次，在我自己开发的时候
1、伪类选择器的语法就是： 选择器名:伪类选择器名，冒号两边都没有空格隔开，无论是块级元素还是行内元素或者行内块元素；多嘴一句：按照我的理解，举个例子，div:first-child(2) 选中的是“第二个子元素，并且这个子元素是div”的一个标签；
C:\Users\hasee\Desktop\Snipaste_2020-01-20_21-36-08.png
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:54 编辑
氖气 发表于 2020-1-20 21:43
首先我并不是大神，其次，在我自己开发的时候
1、伪类选择器的语法就是： 选择器名:伪类选择器名，冒 ...
谢谢您和楼中各位的帮助。您的回复非常详尽和透彻。
---
一楼的第一个问题，就是我把div与冒号之间的空格去掉之后，CSS中的样式就消失了。
请看我的动画。（第一次是有空格，样式正确显示；然后我把空格去掉，发现样式就消失了。）
我的编译器用的是VS CODE， 和SUBLIME，两个都试过了，结果都是这样的。
您能解释一下我哪里出问题了吗？
我附上我正在学习的某马视频的教程，在开始的01：02分钟左右，视频老师也是带空格。
链接: https://pan.baidu.com/s/1Cy2p4BGbJncscuTNsx6k8w 提取码: 1ixd
---
您的回帖里一张图片好象没上传成功，能不能麻烦您重新上传一下？
---
我这些问题是零零碎碎的，有的不是太重要，我就攒在一起问。我现在也不是在做啥项目，是跟着某马老师的视频学习。他讲到哪，我就抄到哪，然后不理解的地方我才发帖问，所以逻辑有点乱。
以后我会尽量说清楚我的问题。 哎呀，这个热心值受之有愧，当时随便浏览只看到了问题2。。。现在重新说一下我的看法。
第一个问题，空不空没区别。第二个问题，原观点原因是中文浏览器。第三个问题，你说的是多级标签的第一个标签，当然会把这个标签里面的所有都算上，爷爷说老大家，你爸是老大，你和你的亲兄弟姐妹当然都是老大家的。span标签和div是有一点区别的，具体我不知道怎么说，但是既然叫标签，叫块，当然是为了分类使用方便。 clearwater 发表于 2020-1-20 22:52
谢谢您和楼中各位的帮助。您的回复非常详尽和透彻。
---
看了楼主的动态图，我试了一下，认为是这样：
1、加了空格整体就形成一个后代选择器：选中div标签里第5个子元素（只要符合这个条件，多级嵌套的标签也会被选中，参考以下图片），具体到楼主的例子，就是选中那个内容为abcde的span标签；
2、不加空格整体就是交集选择器：选中“第5个子元素，并且这个子元素是div”的一个标签，楼主的例子里没有符合条件的标签，所以不起作用。
补充一下，:nth-child()这个选择器适合用在选择并列关系的标签，嵌套多级标签时要慎用，除了想要选择的标签外，还可能会选中其他符合条件的标签，可以通过设置合理的类名或id名解决。
楼主提的这个问题也给我涨姿势了，以前没试过加空格会有什么效果。
页:
[1]
2