CSS选择器补充笔记
2019-01-23 本文已影响0人
RachelCT
在之前一篇笔记中有整理过css选择器，整理了常见的一些选择器，今天看书的过程中又有所收获，遂做补充---选择器嵌套、子选择器、属性选择器。前面一篇参考：https://www.jianshu.com/p/730f6ae8aee1
选择器嵌套和之前看到的组合器不同，声明格式为：
p b{
color:maroon;
...
}
它选中的是<p></p>中的<b></b>。二者是包含关系，而不是组合选择器那样的平行关系。
子选择器的符号为>,用于选择一个元素的子元素。使用示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>css子选择器测试</title>
<style type="text/css">
ul>li{
text-decoration:underline;
}
</style>
</head>
<body>
<ul>
<li>
<a>CSS1</a>
<br />
CSS2
</li>
</ul>
<a>CSS3</a>
<ul>
<li><a>CSS4</a></li>
<a>CSS5</a>
<li>CSS6</li>
</ul>
</body>
</html>
运行效果为：
子选择器运行效果
属性选择器是针对HTML中的属性进行选择的。如<a title="CSS1"></a>中的a标签具有title属性。应用如下：
a[title]{
text-decoration:none;
color:#330066;
}
a[title=CSS1]{
text-decoration:none;
color:#330066;
}
CSS3中有更多关于属性选择器的特性，后续再做补充。
