Westeros

Westeros 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

Westeros 回答了问题 · 2018-06-14

解决CSS:为什么子选择器和后代选择器的效果时而相同时而不同?

关于子选择器和后代选择器的区别,@止醉大神已经说的很形象很清楚

【此疑问解答】子元素会继承部分父元素的属性,color可以继承,而border不能继承,这区别也就造成了1.1的运行结果,子选择器的样式确实直接作用与第一层的<li>,而此样式的属性为color,所以能被第二层的<li>元素继承;至于2.1和2.2的运行结果不同是因为:border属性不能被子元素继承!【表达可能不规范,大概意思如此】

关注 3 回答 3

Westeros 提出了问题 · 2018-06-11

解决CSS:为什么子选择器和后代选择器的效果时而相同时而不同?

在多重信息列表中,样式设置为改变文本颜色,字体大小等,子选择器和后代选择器效果一样;而样式设置为文本加上边框,子选择器和后代选择器效果就不同了,这是为什么呢?

1.设置字体颜色,字体大小(两个选择器效果相同)

1.1子选择器

.sonSelector>li{
        color: red;
        font-size: 18px;
    }
----------
<ul class="sonSelector">
    <li>中国作家
        <ol>
            <li>朱自清</li>
            <li>莫言</li>
        </ol>
    </li>
    <li>外国作家
        <ul>
            <li>马克吐温</li>
            <li>托尔斯泰</li>
        </ul>
    </li>
</ul>

运行结果

clipboard.png
子选择器改变的只是第一层<li>的样式,也就是“中国作家”,“外国作家”这两条字体大小,颜色改变,这没有问题,问题在于里层的<li>列表为什么也变了???

1.2后代选择器(两个选择器效果不同)

.posteritySelector li{
        color: red;
        font-size: 18px;
    }
----------
<ul class="posteritySelector">
    <li>中国作家
        <ol>
            <li>朱自清</li>
            <li>莫言</li>
        </ol>
    </li>
    <li>外国作家
        <ul>
            <li>马克吐温</li>
            <li>托尔斯泰</li>
        </ul>
    </li>
</ul>

运行结果

clipboard.png

2.设置字体边框

2.1子选择器

.sonSelector>li{
    border: 1px solid orange;
    }
----------
<ul class="sonSelector">
    <li>中国作家
        <ol>
            <li>朱自清</li>
            <li>莫言</li>
        </ol>
    </li>
    <li>外国作家
        <ul>
            <li>马克吐温</li>
            <li>托尔斯泰</li>
        </ul>
    </li>
</ul>

运行结果

clipboard.png

2.2后代选择器

.posteritySelector li{
        border: 1px solid orange;
    }
----------
<ul class="posteritySelector">
    <li>中国作家
        <ol>
            <li>朱自清</li>
            <li>莫言</li>
        </ol>
    </li>
    <li>外国作家
        <ul>
            <li>马克吐温</li>
            <li>托尔斯泰</li>
        </ul>
    </li>
</ul>

运行结果

clipboard.png

关注 3 回答 3

Westeros 提出了问题 · 2018-06-11

解决CSS:为什么子选择器和后代选择器的效果时而相同时而不同?

在多重信息列表中,样式设置为改变文本颜色,字体大小等,子选择器和后代选择器效果一样;而样式设置为文本加上边框,子选择器和后代选择器效果就不同了,这是为什么呢?

1.设置字体颜色,字体大小(两个选择器效果相同)

1.1子选择器

.sonSelector>li{
        color: red;
        font-size: 18px;
    }
----------
<ul class="sonSelector">
    <li>中国作家
        <ol>
            <li>朱自清</li>
            <li>莫言</li>
        </ol>
    </li>
    <li>外国作家
        <ul>
            <li>马克吐温</li>
            <li>托尔斯泰</li>
        </ul>
    </li>
</ul>

运行结果

clipboard.png
子选择器改变的只是第一层<li>的样式,也就是“中国作家”,“外国作家”这两条字体大小,颜色改变,这没有问题,问题在于里层的<li>列表为什么也变了???

1.2后代选择器(两个选择器效果不同)

.posteritySelector li{
        color: red;
        font-size: 18px;
    }
----------
<ul class="posteritySelector">
    <li>中国作家
        <ol>
            <li>朱自清</li>
            <li>莫言</li>
        </ol>
    </li>
    <li>外国作家
        <ul>
            <li>马克吐温</li>
            <li>托尔斯泰</li>
        </ul>
    </li>
</ul>

运行结果

clipboard.png

2.设置字体边框

2.1子选择器

.sonSelector>li{
    border: 1px solid orange;
    }
----------
<ul class="sonSelector">
    <li>中国作家
        <ol>
            <li>朱自清</li>
            <li>莫言</li>
        </ol>
    </li>
    <li>外国作家
        <ul>
            <li>马克吐温</li>
            <li>托尔斯泰</li>
        </ul>
    </li>
</ul>

运行结果

clipboard.png

2.2后代选择器

.posteritySelector li{
        border: 1px solid orange;
    }
----------
<ul class="posteritySelector">
    <li>中国作家
        <ol>
            <li>朱自清</li>
            <li>莫言</li>
        </ol>
    </li>
    <li>外国作家
        <ul>
            <li>马克吐温</li>
            <li>托尔斯泰</li>
        </ul>
    </li>
</ul>

运行结果

clipboard.png

关注 3 回答 3

认证与成就

  • 获得 0 次点赞
  • 获得 3 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 3 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-06-07
个人主页被 76 人浏览