上下文选择符的最大好处就是可以方便的实现基于位置为HTML元素添加样式,上下文选择符也叫后代组合式选择符,是以空格分隔标签名的,下面以HTML代码为例为大家详细演示下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
CSS的选择符有三种。①上下文选择符;②ID和Class选择符;③属性选择符,而上下文选择符的最大好处就是可以方便的实现基于位置为HTML元素添加样式 比如我们想位于article和aside标签中的p标签,设置不同的样式
上下文选择符也叫后代组合式选择符,是以空格分隔标签名的,其格式为: 标签1 标签2 {声明} 这里的标签就是HTML元素,标签2是我们想要选择的目标,而且只有在标签1是标签2的祖先元素时才能选中标签2.只要是祖先元素即可,不一定非要是父元素
我们以下列HTML代码为例,进行演示:
复制代码代码如下: <!DOCTYPE html> 2: <html> <head> <title>HTML 5 Template</title> <meta charset="utf-8"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <article> <h1>上下文选择符</h1> <p>这是位于article元素中的p元素</p> </article> <aside> <p>这是位于aside中的p元素</p> </aside> </body> </html>
在没有应该CSS样式的情况,查看运行效果 |