请教为什么css中>无效？

无·法 2018-09-11 11:14:35

根据百度到的结果：
css中“>”是:
　　css3特有的选择器，A>B 表示选择A元素的所有子B元素。
　　与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。

然而测试发现>和空格并没有区别，都是所有子元素都选择。

测试代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>新网页</title>

</head>

<style>

div > .c1{color:red;}

</style>

<body>

<div class="c1">123

	<span class="c1">456<label class="c1">789</label></span>

</div>

</body>

</html>

按道理789应该不变红。

...全文

341 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

eno_zeng 2018-10-18

打赏
举报

因为color属性会继承

无·法 2018-09-12

打赏
举报

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>新网页</title>

</head>

<style>

.main > div{border:1px solid red;}

.main2 div{border:1px solid red;}

</style>

<body>

<div class="main">123

	<div>456

		<div>789</div>

	</div>

</div>

<div class="main2">123

	<div>456

		<div>789</div>

	</div>

</div>

</body>

</html>

下午的时候我也找到范例了。

songtao728 2018-09-11

打赏
举报

因为label也是span的子元素，所以继承了span的color：red的样式

songtao728 2018-09-11

打赏
举报

span 标签和label标签均带有c1类名，都属于div的后代，所以456789变红，没问题

a1424674894 2018-09-11

打赏
举报

lable是继承的span的属性了，空格和>的对比如下

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>New Document</title>

</head>

<style>

div.c2 > span{color:red;}

div.c3 span{color:blue;}

</style>

<body>

<div class="c2">qwe

    <span class="c2">asd<label class="c1">123</label></span>

    <label class="c">zxc<span class="c2">456</span></label>

    <span class="c">asd</span>

</div>



<div class="c3">qwe

    <span class="c3">asd<label class="c1">123</label></span>

    <label class="c">zxc<span class="c2">456</span></label>

    <span class="c">asd</span>

</div>

</body>

</html>

a1424674894 2018-09-11

打赏
举报

引用 4 楼 a1424674894 的回复:

lable是继承的span的属性了，空格和>的对比如下

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>New Document</title>

</head>

<style>

div.c2 > span{color:red;}

div.c3 span{color:blue;}

</style>

<body>

<div class="c2">qwe

    <span class="c2">asd<label class="c1">123</label></span>

    <label class="c">zxc<span class="c2">456</span></label>

    <span class="c">asd</span>

</div>



<div class="c3">qwe

    <span class="c3">asd<label class="c1">123</label></span>

    <label class="c">zxc<span class="c2">456</span></label>

    <span class="c">asd</span>

</div>

</body>

</html>