一、选择器
基本选择器
标签选择器,id选择器,类选择器,通配符选择器
eg:
/* 标签选择器 选中所有的p标签*/
p {
color: aqua;
}
/* id选择器 */
#box1 {
color: pink;
}
/* 类选择器 */
.box2 {
color: blueviolet;
}
/* 通配符选择器
*{
}
*/
包含选择器
1、子代选择器:选中亲身儿子
eg:
.a>li {
background-color: pink;
}
2、后代选择器:找到后代所有要找的元素
eg:
.a li {
color: blueviolet;
}
复合选择器
可以将多个选择器组合
eg:
/* div {
color: pink;
}
p {
color: pink;
}
span {
color: pink;
} */
div,
p,
span {
color: red;
}
属性选择器
type^="te" 以te开头
type$="l" 以l结尾
type*="e" type值里边包含e
伪类选择器
:hover================鼠标经过时
a:hover div{
对div的更改
}
<a>
<div>
</div>
</a>
eg:
/* :hover 鼠标悬停 */
a:hover {
/* cursor 鼠标样式 */
cursor: pointer;
font-size: 40px;
}
a:hover+div{
对div的更改
}
<a></a>
<div></div>
eg: a:hover+div {
background-color: greenyellow;
display: none;
}
结构伪类选择器
first-child:一组兄弟元素中的第一个元素
last-child:一组兄弟元素中的最后元素
nth-child(an+b):首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从 1 开始排序,选择的结果为 CSS 伪类:nth-child 括号中表达式(an+b)匹配到的元素集合(n=0,1,2,3...)
(标签名称):nth-of-type:基于相同类型(标签名称)的兄弟元素中的位置来匹配元素
eg: ul li:first-child {
background-color: pink;
}
ul li:last-child {
background-color: green;
}
ul li:nth-child(3) {
background-color: blue;
}
ul li:nth-of-type(4) {
background-color: chartreuse;
}
伪元素选择器
::before content:"~"
::after content:"~"
eg:
ul li::before {
content: ">";
}
ul li::after {
content: url();
}
::selection
eg:
/* ::selection 选中时 */
ul li:nth-child(4)::selection {
color: pink;