CSS基础之选择器

选择器

选择器的作用就是帮助你精准的选中想要的元素

简单选择器

1. ID选择器
   通过#+ID名的方式选中对应的元素

#name{
color:black;
}

2. 元素选择器
   顾名思义,指定元素名来选中元素

div{
width:100px;
}

3. 类选择器
   通过给目标元素赋予’类’,通过 .类名的方式选中元素

.less{
width:10px;
}

4. 通配符选择器
   *,选中所有元素,常用来同一设置样式,比如重叠样式

*{
margin:0;
padding;0;
box-size:border-box;
}

5. 儿子选择器
   >, 父元素>儿子元素的方式选中儿子元素

div>p{
color:blue; /* p元素嵌套在div中 */
}

6. 兄弟选择器
   ~, 选中兄弟元素,即某一元素同级的元素

  <main>
    <h1></h1>
    <p></p>
    <a href=""></a>

  </main>

h1~a{
color:blue;
}

+,也是兄弟选择器,但是只能选中紧挨着的兄弟

h1+p{
color:blue;
}

6. 属性选择器
   根据属性名和属性值选中元素

>[href]{}:	选择含有href属性的元素
>[href='....']{}:	选择属性中含有href='....'的元素
>[class~='b']{}: 	选中class值中含有b的元素
>[class*='b']{}: 选中class中包含b的元素
>[href$="..."] :	选中以....结尾的元素
>[href^="..."] :	选中以....开始的元素

伪类选择器

选中某些元素的某中状态(在元素后面加 :)

1. hover: 表示鼠标悬停的状态

a:hover{} //选中鼠标悬停时的a元素

若直接使用:hover 鼠标停到哪个元素,哪个元素就会有相应的变化

2. active: 激活状态, 鼠标按下状态
3. link: 超链接未被访问时的状态
4. visited: 超链接访问后的状态

上述的四个都要写的话,要注意顺序,不然会出错
爱恨法则: 爱(love)—l->link, v->visited
恨(hate)-----h->hover,a->active
link—visited—hover—active

5. focus: 聚焦状态
6. target: 跳转到目标后,目标发生的变化,该状态加到跳转目标元素上
7. empty: 空元素选择
8. not: 排除选择器

:nth-child(-n+3):not(:nth-child(2))
取前三个但是不要第二个

9. disabled: 对禁用的元素样式进行控制

伪元素选择器

生成并选中某个元素内部的第一个子元素或最后一个子元素(在对应的元素后边通过::加子元素)

1. before: 生成第一个子元素
2. after:生成最后一个子元素

//清除浮动
.fixed::after{
content:"";
display:'block';
clear:both;
}

3. first-letter: 每段文字第一个字
4. first-line: 每段第一行

选择器的组合

1. 并且: 两个或多个选择器不加修饰的写在一起(p.red就是元素选择器p和类选择器.red的组合)
2. 后代选择器: 通过加空格选中后代(.red li 就是选中类为red中后代为li的元素)
3. 子元素选择器: 通过>符号
4. 相邻兄弟选择器: +(.special+li 选择.special下一个元素)
5. 后面出现的兄弟元素选择器: ~

选择器的并列

多个选择器,用,分隔