选择器
选择器:可以帮助你精准的选中想要的元素
一、简单选择器
- ID选择器
- 元素选择器
- 类选择器
- 通配符选择器
*,所有元素全部选中
*{
color:red;
}
- 属性选择器
根据属性名和属性值来选中元素
/* 1、选中所有具有href属性的元素 */
[href]
{
color:red;
}
/* 2、选中特定元素 */
[href="http://www.sina.com"]
{
color:red;
}
- 伪类选择器[常见]
选中某些元素的某种状态
1)link:超链接从来为访问过的状态
2)visited:超链接访问过的状态
3)hover:鼠标悬停状态
4)active:激活状态,鼠标按下状态
爱恨法则:love hate,按以上顺序写
/* 选中鼠标悬停时的a元素 */
a:hover{
color:red;
}
/* 鼠标按下时的a元素 */
a:active{
color:#008c8c;
}
a:link{
color:chocolate;
}
a:visited{
color:rgb(147,165,42);
}
- 伪元素选择器
生成并选中某个元素
1)before
2)after
span::before{
content:"《";
color:red;
}
span::after{
content:"》";
color:red;
}
<p>严老师和陈老师<span>课程</span>真是不错啊</p>
二、选择器的组合
- 并且
- 后代元素—— 空格
- 子元素—— >
- 相邻兄弟元素—— +
- 兄弟元素—— ~
/*
p {
text-indent:2em;
line-height:2;
}
p.red{
color:red;
}
.red li{
color:#008c8c;
}*/
/* 选中div的子元素ul,ul的子元素li */
div>ul>li{
color:blue;
}
<div class="red">
Lorem.
<ul>
<li>Lorem.</li>
<li>Loremmm.</li>
<li>Happy.</li>
</ul>
</div>
三、选择器的并列
多个选择器,用逗号分隔
语法糖,方便写代码
.special~li,p{
color:#008c8c;
}