例:
// css 样式 div > strong { color:red } // html 页面 <div> <strong>儿子</strong> <span> <strong>孙子</strong> </span> </div>子女的字体颜色是红色的,而孙辈是默认的颜色。
5.7 组合选择器对多个不同元素做相同的操作的情况下,可以共同使用同一样式代码,元素之间用英文逗号分隔,这就是组合选择器。
好比给不同身份的人发一个“感动玖柒十大青年奖”,可以把他们全部叫到一起来颁奖。
例:
// css 样式 div, p, span, h1 { color: red } // html 页面 <div>小明</div> <p>小红</p> <span>小刚</span> <h1>小利</h1>这里小明、小红、小刚和小利的颜色都是红色的,采用组合选择器最大的好处就是:简化 CSS 代码,提高了编码效率。
5.8 相邻兄弟选择器 & 通用兄弟选择器相邻兄弟选择器还是挺好理解的,MDN 的介绍是:介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中。
好比皇帝说下一个生的是儿子就当太子,那就是以当前的最后一个子女为参照物,下一个儿子就是太子,如果先生了个女儿,则不算。
例:
// css 样式 div + p { color: red } // html 页面 <div>大儿子</div> <span>二女儿</span> <p>二儿子</p> <p>三儿子</p>这里都是默认颜色,因为中间相隔了一个二女儿,所以二儿子不能当太子了。
相邻兄弟选择器总结起来就两个关键点:
紧接在另一元素后的第一个
二者有相同父元素
通用兄弟选择器类似于相邻兄弟选择器,但肯定是不一样的,首先不同的是通用兄弟选择器是用 ~ 连接后面的元素。
继续拿皇帝儿子举例,皇帝说大儿子之后所有的儿子都封王,那就是以大儿子为参照,之后所有的儿子就是王,如果生了个女儿,则略过。
例:
// css 样式 div ~ p { color: red } // html 页面 <div>大儿子</div> <span>二女儿</span> <p>二儿子</p> <p>三儿子</p>这里都是你猜一下会是神马样子?
5.9 伪类选择器伪类选择器通常是用来描述元素在一些特定状态下的样式,最常见的就是用在 a 元素(超链接)中了,当然其他元素也可以,只不过相对来说少一些。
就好比拿人来说,不开心的时候会皱眉,开心的时候会笑,发火的时候可能会摔东西,主要是对不同的状态定义。
例:
// 没有被访问过a标签的样式 a:link { color: black } // 访问过后a标签的样式 a:visited { color: yellow } // 鼠标悬浮时a标签的样式 a:hover { color: red } // 鼠标摁住的时候a标签的样式 a:active { color: blue }伪类选择器我觉得应该是最有趣的选择器了,试试就知道了。
5.10 媒体查询媒体查询应该算是选择器吧,不管那么多我先把 TA 拉进来。
TA 能在不同的条件下使用不同的样式,使页面在不同在设备下达到不同的渲染效果。
好比一个人在不同的场景下做不同的事,为父亲的时候教育子女,为丈夫的时候保护妻子,为人子的时候照顾父母。
例:
@media screen and (max-width: 300px) { body { background-color: red } }这里的样式表示如果页面宽度小于 300px 则修改背景颜色为红色,简单易理解吧。
6、最后CSS 的简单复盘就到这里了,所有的实例都没有用截图展示,还是希望各位能自己去试一试,看看效果,多敲才是正道。
如果有一些地方写的不对,也欢迎指正,分享即学习。