CSS（3）——各类选择器

1.CSS选择器（selector）

出现原因：开发中经常需要找到特定的网页元素进行设置样式，如何找到特定的那个元素
什么是CSS选择器：按照一定的规则选出符合条件的元素，为之添加CSS样式

归类如下：

  • 通用选择器（universal selector）
  • 元素选择器（type selectors）
  • 类选择器（class selectors）
  • id选择器（id selectors）
  • 属性选择器（attribute selectors）
  • 组合（combinators）
  • 伪类（pseudo-classes）
  • 伪元素（pseudo-elements）
2.通用选择器

所有的元素都会被选中，效率比较低，尽量不要使用，因为他会遍历所有的元素，包括没有使用到的元素，消耗性能。

一般用来给所有元素作一些通用性的设置，比如内边距、外边距，比如重置一些内容。*是通配符。

*{
    width:300px ;
}
3.简单选择器（重要）

简单选择器是开发中用的最多的选择器:

  • 元素选择器（type selectors）, 使用元素的名称
div{
    width:300px ;
}
p{
    width:300px ;
}
  • 类选择器（class selectors）, 使用 .类名
.name{
    color: white;
    background-color:orange;
    font: bold 30px/30px serif;
}
  • id选择器（id selectors）, 使用 #id
#index{
    color:#f00;
}

补充—id注意事项：一个HTML文档里面的id值是唯一的，不能重复

  • id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识boxOne或BoxOne
  • 最好不要用标签名作为id值
  • 中划线又叫连字符（hyphen）
4.属性选择器（不常用）

拥有某一个属性 [att]，属性等于某个值 [att=val]

其他了解的(不用记)

  • [attr*=val]: 属性值包含某一个值val

  • [attr^=val]: 属性值以val开头

  • [attr$=val]: 属性值以val结尾

  • [attr|=val]: 属性值等于val或者以val开头后面紧跟连接符-

  • [attr~=val]: 属性值包含val, 如果有其他值必须以空格和val分割

[title]{
    color: aliceblue;
}
[title=div]{
    color: antiquewhite;
}
5.后代选择器（重要）

需求：只给某一个元素的所有后代元素添加css样式

  • 后代选择器一: 所有的后代(直接/间接的后代)，选择器之间以空格分割

  • 后代选择器二: 直接子代选择器(必须是直接子代)，选择器之间以 > 分割

6.兄弟选择器（用的不多，特殊场景）

  • 兄弟选择器一:相邻兄弟选择器（代码上紧挨着的），使用符号 + 连接

  • 兄弟选择器二: 普遍兄弟选择器 ~（所有的兄弟），使用符号 ~ 连接

7.选择器组 （重要）

  • 交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)，在开发中通常为了精准的选择某一个元素

  • 并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)，在开发中通常为了给多个元素设置相同的样式

8.伪类

伪类是选择器的一种，它用于选择处于特定状态的元素，比如我们经常会实现的，当手指放在一个元素上时, 显示另外一个颜色。

div:hover{
      color:red;
}

常见的伪类有

  • 动态伪类（dynamic pseudo-classes）:link、:visited、:hover、:active、:focus
  • 目标伪类（target pseudo-classes） :target(可以用于匹配url的片段)
  • 语言伪类（language pseudo-classes）:lang( )
:lang(en){}

  • 元素状态伪类（UI element states pseudo-classes）
    :enabled、:disabled、:checked

  • 结构伪类（structural pseudo-classes）(后续学习)

    • :nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-
      of-type( )

    • :first-child、:last-child、:first-of-type、:last-of-type

    • :root、:only-child、:only-of-type、:empty、

  • 否定伪类（negation pseudo-classes）(后续学习) :not()

:not(.span){}

所有的伪类: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

9.动态伪类

使用举例

  • a:link 未访问的链接

  • a:visited 已访问的链接

  • a:hover 鼠标挪动到链接上(重要)

  • a:active 激活的链接（鼠标在链接上长按住未松开）:focus

  • :focus——>指当前拥有输入焦点的元素（能接收键盘输入）,文本输入框一聚焦后，背景就会变红色。因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素

使用注意

  • hover必须放在:link和:visited后面才能完全生效
  • active必须放在:hover后面才能完全生效
  • 除了a元素，:hover、:active也能用在其他元素上
  • 动态伪类编写顺序建议为： :link、:visited、:focus、:hover、:active
  • 直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了，相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red
posted @ 2025-04-20 09:11  卡卡max  阅读(102)  评论(0)    收藏  举报