选择器

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


文章目录

  • 选择器
  • 简单选择器
  • 伪类选择器
  • 伪元素选择器
  • 选择器的组合
  • 选择器的并列


简单选择器

  1. ID选择器
    通过#+ID名的方式选中对应的元素
#name{
color:black;
}
  1. 元素选择器
    顾名思义,指定元素名来选中元素
div{
width:100px;
}
  1. 类选择器
    通过给目标元素赋予’类’,通过 .类名的方式选中元素
.less{
width:10px;
}
  1. 通配符选择器
    *,选中所有元素,常用来同一设置样式,比如重叠样式
*{
margin:0;
padding;0;
box-size:border-box;
}
  1. 儿子选择器
    >, 父元素>儿子元素的方式选中儿子元素
div>p{
color:blue; /* p元素嵌套在div中 */
}
  1. 兄弟选择器
    ~, 选中兄弟元素,即某一元素同级的元素
<main>
    <h1></h1>
    <p></p>
    <a href=""></a>

  </main>
h1~a{
color:blue;
}

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

h1+p{
color:blue;
}
  1. 属性选择器
    根据属性名和属性值选中元素
>[href]{}:	选择含有href属性的元素
>[href='....']{}:	选择属性中含有href='....'的元素
>[class~='b']{}: 	选中class值中含有b的元素
>[class*='b']{}: 选中class中包含b的元素
>[href$="..."] :	选中以....结尾的元素
>[href^="..."] :	选中以....开始的元素

伪类选择器

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

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

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

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

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

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

  1. focus: 聚焦状态
  2. target: 跳转到目标后,目标发生的变化,该状态加到跳转目标元素上
  3. empty: 空元素选择
  4. not: 排除选择器
:nth-child(-n+3):not(:nth-child(2))
取前三个但是不要第二个
  1. disabled: 对禁用的元素样式进行控制

伪元素选择器

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

  1. before: 生成第一个子元素
  2. after:生成最后一个子元素
//清除浮动
.fixed::after{
content:"";
display:'block';
clear:both;
}
  1. first-letter: 每段文字第一个字
  2. first-line: 每段第一行

选择器的组合

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

选择器的并列

多个选择器,用,分隔