选择器
选择器的作用就是帮助你精准的选中想要的元素
文章目录
- 选择器
- 简单选择器
- 伪类选择器
- 伪元素选择器
- 选择器的组合
- 选择器的并列
简单选择器
- ID选择器
通过#+ID名的方式选中对应的元素
#name{
color:black;
}
- 元素选择器
顾名思义,指定元素名来选中元素
div{
width:100px;
}
- 类选择器
通过给目标元素赋予’类’,通过.类名
的方式选中元素
.less{
width:10px;
}
- 通配符选择器
*
,选中所有元素,常用来同一设置样式,比如重叠样式
*{
margin:0;
padding;0;
box-size:border-box;
}
- 儿子选择器
>
, 父元素>儿子元素的方式选中儿子元素
div>p{
color:blue; /* p元素嵌套在div中 */
}
- 兄弟选择器
~
, 选中兄弟元素,即某一元素同级的元素
<main>
<h1></h1>
<p></p>
<a href=""></a>
</main>
h1~a{
color:blue;
}
+
,也是兄弟选择器,但是只能选中紧挨着的兄弟
h1+p{
color:blue;
}
- 属性选择器
根据属性名和属性值选中元素
>[href]{}: 选择含有href属性的元素
>[href='....']{}: 选择属性中含有href='....'的元素
>[class~='b']{}: 选中class值中含有b的元素
>[class*='b']{}: 选中class中包含b的元素
>[href$="..."] : 选中以....结尾的元素
>[href^="..."] : 选中以....开始的元素
伪类选择器
选中某些元素的某中状态(在元素后面加 :
)
- hover: 表示鼠标悬停的状态
a:hover{} //选中鼠标悬停时的a元素
若直接使用:hover 鼠标停到哪个元素,哪个元素就会有相应的变化
- active: 激活状态, 鼠标按下状态
- link: 超链接未被访问时的状态
- visited: 超链接访问后的状态
上述的四个都要写的话,要注意顺序,不然会出错
爱恨法则: 爱(love)—l->link, v->visited
恨(hate)-----h->hover,a->active
link—visited—hover—active
- focus: 聚焦状态
- target: 跳转到目标后,目标发生的变化,该状态加到跳转目标元素上
- empty: 空元素选择
- not: 排除选择器
:nth-child(-n+3):not(:nth-child(2))
取前三个但是不要第二个
- disabled: 对禁用的元素样式进行控制
伪元素选择器
生成并选中某个元素内部的第一个子元素或最后一个子元素(在对应的元素后边通过::
加子元素)
- before: 生成第一个子元素
- after:生成最后一个子元素
//清除浮动
.fixed::after{
content:"";
display:'block';
clear:both;
}
- first-letter: 每段文字第一个字
- first-line: 每段第一行
选择器的组合
- 并且: 两个或多个选择器不加修饰的写在一起(p.red就是元素选择器p和类选择器.red的组合)
- 后代选择器: 通过加空格选中后代(.red li 就是选中类为red中后代为li的元素)
- 子元素选择器: 通过>符号
- 相邻兄弟选择器: +(.special+li 选择.special下一个元素)
- 后面出现的兄弟元素选择器: ~
选择器的并列
多个选择器,用,
分隔