为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/HTML/CSS

/初识HTML(5)+CSS(3)-升级版

伪类选择器的设置效果为什么会被<p>段落标签断开？

在用伪类选择器时 . . .

...

....

. . . 为什么会出现鼠标滑过第一段第一段变为红色而第二段不滑不变色但是如果取消一套


就整体变红，是因为


将内容分割成段一段一个效果吗？求助大佬解答，谢谢。

晴天小蜗牛

2017-12-12

源自：初识HTML(5)+CSS(3)-升级版  8-9

关注问题 我要回答
1858
操作
收起

正在回答

3 回答

慕用6977649
2018-08-08

每个段落是一块，如果你可以让两个段落重合，同时划过，就可以同时变色了

0 回复 有任何疑惑可以回复我~
收起回答
滴水穿石201712
2017-12-12

就是使用伪类选择器时，如果设定了

<style type="text/css">
p:first-child {
  color: red;
  }
</style>

那么只作用于第一个p标签，结果如下，

<body>
<p>some text</p>/*这一行会变成红色*/
<p>some text</p>/*这一行不会变*/
</body>

如果没有设置 first-child应该不会被切断。如果是其他原因，请贴上代码？

0 回复 有任何疑惑可以回复我~
收起回答
#1

晴天小蜗牛 提问者

<style type="text/css"> .first:hover,#second:hover{ color:red!important; font-weight:bold; } </style> </head>
2017-12-12 回复 有任何疑惑可以回复我~
#2

晴天小蜗牛 提问者

<body> <h1>勇气</h1> <p class="first">三年级时，<span style="color:blue">胆小如鼠</span>的小女孩，<font color="green">上课从来不敢回答老师提出的问题，</font>生怕回答错了老师会批评我。</p> <p id="second"> 到了三年级下学期时，<span>问题</span>，班里很多同学都举手了，</p> </body>
2017-12-12 回复 有任何疑惑可以回复我~
#3

晴天小蜗牛 提问者

如果将两段的段落标签改为<br />就能一起变色，不过如果是两段都加上<p></p>就会出现滑过分别变色，是因为伪类选择符的效果被段落标签断开了吗？
2017-12-12 回复 有任何疑惑可以回复我~
#4

Mr_灵 回复 晴天小蜗牛 提问者

（我之前理解错了 不好意思啦）把代码去实现了下，意思是你选择的2个段落并不会因为鼠标拖到上面去而一起变色只会鼠标放置的那一段出现变色。 我的理解对吧~ 我感觉是因为 你...emm...就是设置的两段伪类选择器啊~~~你没发现你给出来的代码是一个类选择器和一个id选择器的分组来的嘛~~~当然是分开来的效果啦~
2017-12-12 回复 有任何疑惑可以回复我~
#5

晴天小蜗牛 提问者 回复 Mr_灵

小伙伴 666 我要先去试一下。
2017-12-12 回复 有任何疑惑可以回复我~
#6

晴天小蜗牛 提问者 回复 Mr_灵

可能这么说也对，但是把类标签去掉只加上段落标签并且用p;hover的伪类还是不能一起变色 但是将两段之间的段落标签换成空行标签就OK了，我觉得还是段落标签把两段效果也分割开了
2017-12-12 回复 有任何疑惑可以回复我~
#7

慕仙8028120 回复 晴天小蜗牛 提问者

我也试了一下代码；确实是<p></p>把两个段落分隔开了；用<br/>两段一起变色，包括两个段落之间也没有空行；因为<p>&<p>是平行关系，而且计算机是从上到下读代码所以两个<p>时候分别变色嘛。。。我猜想。。。
2017-12-28 回复 有任何疑惑可以回复我~
#8

lagina_lin 回复 晴天小蜗牛 提问者

我觉得不能说是标签把效果分割开吧，应该说:hover只是用户将定位设备（比如光标）悬停于某个元素上才生效，也就是说只有一个元素，
2018-01-10 回复 有任何疑惑可以回复我~
#9

lagina_lin 回复 晴天小蜗牛 提问者

可以把这些标签元素想象成一个一个盒子吧，然后把:hover想象成拿起盒子，<p>标签是块级元素，相当于一个大盒子，如果有两个<p>标签就相当于两个大盒子，<br>是内联元素，相当于放进去大盒子里面的小盒子，如果你规定的是p:hover,就相当于是拿起大盒子，然后大盒子就变红，那你拿起其中一个大盒子，另一大盒子肯定不会有变化（所以就是为什么两个<p>标签不一起变红），你用<br>标签把页面分成两段，只是相当于在大盒子里放了个隔层，实际上只有一个大盒子（这样当然你视觉上就是两个段落一起变红了）
2018-01-10 回复 有任何疑惑可以回复我~
#10

lagina_lin 回复 晴天小蜗牛 提问者

<div id="body"> <p>段落1</p> <p>段落2</p> </div> CSS样式里写上： #body:hover{ color:red; } 这样就能一起变红了。
2018-01-10 回复 有任何疑惑可以回复我~
查看7条回复
Mr_灵
2017-12-12

你应该是给<p>设置颜色了？ 我的理解是伪类选择器的权限不够。举个例子：超链接默认点击后变色，如果你不要这个效果的话可以选择用<span>去修改颜色强制取消变色功能。伪类选择器是类似功能。 萌新~错了勿喷那个（-.-

0 回复 有任何疑惑可以回复我~
收起回答
#1

晴天小蜗牛 提问者

很感谢，大家一起交流嘛。是这样的如果文本出现两个段落标签伪类标签的效果会被段落标签断开，就是鼠标移到哪段哪段才变颜色，但是将段落标签换为空行标签时只剩下一套段落标签，滑过效果就一致了，难道是段落标签把效果也隔断了吗？嘿嘿虽然不是什么大问题 但是感觉很奇怪就问一下。
2017-12-12 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1225808    人
  • 解答问题       18234    个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

本课相似问答

2 回答分组选择器设置伪类选择符

3 回答类选择器和标签选择器

2 回答标签选择器 类选择器 id选择器

2 回答伪类选择器

2 回答伪类选择器
搜索更多本课相关问答

伪类选择器的设置效果为什么会被<p>段落标签断开？

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信