CSS 选择器

2022-10-14 16:58:56

后代选择器（包含选择器）：（元素1 元素2 { 样式声明 }）
可以选择父元素里面的子元素。把外层标签写在前面，内层标签写在后面，中间用空格分隔。（当标签发生嵌套时，内层标签为外层标签的后代）

div span {
text-align: center
}


<div>
 <span>span标签通过后代选择器实现居中</span>
</div>

子选择器：（元素1>元素2 { 样式声明 }）

只能选择作为某元素的最近一级子元素。（即只能选择亲儿子）

div>a {
    color: red; // 只会让div对应的子标签a变成红色
}


<div>
    <a>子标签</a>
    <p>
        <a>非 子标签</a>
    </p>
</div>

并集选择器：（元素1,元素2 {样式声明}）

并集选择器可以选择多组标签，为多个标签定义相同的样式。

span,p {
    color: blue;
}



<div>
    <span>标签内容1</span>
    <p>标签内容2</p>
    <div>标签内容3</div>
</div>

伪类选择器：

伪类选择器用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或者选择第1个，第n个元素，等。

a:link	选择所有未被访问的链接	<a href="#"><未被访问的链接显示红色/a>　　a:link {color: red;}
a:visited	选择所有已经被访问的链接	<a href="#"><被访问的链接显示蓝色/a>　　a:visited {color: blue;}
a:hover	选择鼠标指针位于其上的链接	<a href="#"><鼠标放在上面显示粉色/a>　　a:hover {color: pink;}
a:active	选择活动链接（鼠标按下未弹起的链接）	<a href="#"><鼠标按在上面显示绿色/a>　　a:active {color: pink;}

:focus 伪类选择器

用于选取获得焦点（光标）的表单元素；用于input类的表单元素。

<input type="text" placeholder="鼠标点击当前的input输入框，改变边框的颜色">　　input:focus {outline-color: red}

码农公寓