详解css选择器
2019-11-21 本文已影响0人
辉夜真是太可爱啦
1.element,element,例如h1,p，选择所有 <h1> 元素和所有 <p> 元素。
<!DOCTYPE html>
<html>
<head>
<style>
h1,p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>我是h1标签</h1>
<div class="intro">
<p>我是p标签</p>
<p>我是p标签</p>
</div>
<p>我是p标签</p>
</body>
</html>
效果如图，可以看到只要是<h1>或者<p>标签，无论是否被嵌套等情况，只要标签的名字相等，都有相同的效果
image.png
2.element element,例如div p，选择div内部的所有p元素
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="intro">
<p>div标签下的p标签</p>
</div>
<p>body下的p标签</p>
</body>
</html>
效果如图，只有<div>元素内的<p>标签才会被选中，没有<div>标签嵌套的<p>标签则不会被选中
image.png
3.element>element,例如div>p，选择父元素为 <div>元素的所有 <p> 元素
<!DOCTYPE html>
<html>
<head>
<style>
div>p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>父级标签为div的p标签</p>
</div>
<p>父级标签为body的p标签</p>
<div>
<span>
<p>父级标签为span的p标签</p>
</span>
</div>
</body>
</html>
效果如图所示，只有父级标签为<div>的<p>标签才会被选中
image.png
4.element+element,例如div+p，选择紧接在 <div> 元素之后的所有 <p> 元素。
<!DOCTYPE html>
<html>
<head>
<style>
div+p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>div内的p标签</p>
<div>紧接着p标签的div标签</div>
<p>紧接着div标签的p标签</p>
</div>
<p>紧接着div标签的p标签啦啦啦</p>
<p>紧接着p标签的p标签</p>
</body>
</html>
效果如图所示，只有紧接着<div>标签的<p>标签才会被选中
image.png
5.element~element,例如p~ul,选择前面有 <p> 元素的每个 <ul> 元素。
<!DOCTYPE html>
<html>
<head>
<style>
p~ul {
background: #ff0000;
}
</style>
</head>
<body>
<div>一个 div 元素。</div>
<ul>
<li>ul标签前面为div</li>
</ul>
<p>第一段。</p>
<ul>
<li>前面有p标签的ul</li>
</ul>
<h2>另一个列表</h2>
<ul>
<li>前面有p标签的ul啦啦啦</li>
</ul>
</body>
</html>
效果如图所示，只有前面有<p>标签的<ul>标签才会被选中
image.png
6.:nth-child(n),例如p:nth-child(2)，选择属于其父元素的第二个子元素的每个 <p> 元素，还有一个是:nth-last-child(n)，使用方法和:nth-child(n)相同，只是:nth-child是正序，而nth-last-child(n)为倒序，从后往前数
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2) {
background: #ff0000;
}
</style>
</head>
<body>
<h1>父元素body中的第1个元素</h1>
<p>父元素body中的第2个元素</p>
<p>父元素body中的第3个元素</p>
<p>父元素body中的第4个元素</p>
<p>父元素body中的第5个元素</p>
<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>
</html>
效果如图所示，在父元素中，第二个子元素的标签名也刚好为<p>，所以会被选中
image.png
当我们把第二个元素改为div元素的时候呢，来看看效果
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2) {
background: #ff0000;
}
</style>
</head>
<body>
<h1>父元素body中的第1个元素</h1>
<div>父元素body中的第2个元素</div>
<p>父元素body中的第3个元素</p>
<p>父元素body中的第4个元素</p>
<p>父元素body中的第5个元素</p>
<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>
</html>
效果如图所示，在父元素中，第二个子元素的标签名为<div>，不是<p>的时候，就不会被选中
image.png
不仅如此，不光可以填写数字，还可以填写运算，例如:nth-child(2n+1),可以选择属于其父元素的所有顺序为奇数的 <p> 元素
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2n+1) {
background: #ff0000;
}
</style>
</head>
<body>
<h1>父元素body中的第1个元素</h1>
<p>父元素body中的第2个元素</p>
<p>父元素body中的第3个元素</p>
<p>父元素body中的第4个元素</p>
<p>父元素body中的第5个元素</p>
<p>父元素body中的第6个元素</p>
<p>父元素body中的第7个元素</p>
<p>父元素body中的第8个元素</p>
<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>
</html>
效果如图所示，在父元素中，所有次序为奇数的<p>标签都会被选中
image.png
当我们打算选中从第三个开始的p标签时(包括第三个),我们可以这样子写,:nth-child(n+3)
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(n+3) {
background: #ff0000;
}
</style>
</head>
<body>
<h1>父元素body中的第1个元素</h1>
<p>父元素body中的第2个元素</p>
<p>父元素body中的第3个元素</p>
<p>父元素body中的第4个元素</p>
<p>父元素body中的第5个元素</p>
<p>父元素body中的第6个元素</p>
<p>父元素body中的第7个元素</p>
<p>父元素body中的第8个元素</p>
<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>
</html>
效果如图所示，在父元素中，从第三个子元素开始算起，包括第三个子元素，只要为<p>标签都会被选中
image.png
7.:only-child,例如p:only-child，选择属于其父元素的唯一子元素的每个 <p> 元素
<!DOCTYPE html>
<html>
<head>
<style>
p:only-child {
background: #ff0000;
}
</style>
</head>
<body>
<div>
<p>唯一子元素的p标签</p>
</div>
<div>
<div>唯一子元素的div标签</div>
</div>
<div>
<span>这是一个 span。</span>
<p>不是唯一子元素的p标签</p>
</div>
<p><b>注释：</b>Internet Explorer 不支持 :only-child 选择器。</p>
</body>
</html>
效果如图所示，在父元素中，只有唯一子元素的p标签才会被选中
image.png
