CSS选择器笔记

开发的时候关于CSS的用法主要参考：CSS选择器笔记 - 阮一峰的网络日志 (ruanyifeng.com)

现将开发过程中遇到的一些细节问题在此记录：

<body>
<div class="c00">
<div class="c0 c2">
<p class="c1">段落 1。 在 div 中。</p>
<p class="c2">段落 2。 在 div 中。</p>
</div>

<p class="c1">段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</div>
<p class="c1">段落 3。不在 div 中。</p>
</body>

有如下样式：

1：后代选择器

.c0 .c2
{
    background-color:yellow;
}

2：是在一个元素上，这个元素包括这两个类才会有效果。

.c0.c2
{
    background-color:yellow;
}

 3: :not()   not选择器

<style>
a:not(.c3) {
    color: #ff0000;
}
</style>

<a class="c2" href="//www.runoob.com/" target="_blank">111</a><br>
<a class="c1" href="//www.runoob.com/" target="_blank">222</a><br>
<a class="c3" href="//www.runoob.com/" target="_blank">333</a><br>

 4: 规定段落中的文本不进行换行：

p
{
    white-space:nowrap;
}

 

posted @ 2021-08-16 09:57  大力的成长  阅读(46)  评论(0)    收藏  举报