Skip to main content

CSS学习笔记-CSS选择器

4 min read

下定决心还是再学一遍CSS等前端知识

CSS选择器​

  • 什么是CSS选择器

    • 按照一定的规则选出符合条件的元素，为之添加CSS样式

  • 选择器的种类繁多

    • 通用选择器(universal selector)
    • 元素选择器(type selectors)
    • 类选择器(class selectors)
    • id选择器(id selectors)
    • 属性选择器(attribute selectors)
    • 组合(combinators)
    • 伪类(pseudo-classes)
    • 伪元素(psedo-elements)

通用选择器(universal selector)​

  • 选择所有的元素

  • 一般用来给所有元素设置一些通用性的设置

    • 比如内边距，外边距
    • 比如重置一些内容

  • 效率比较低，尽量不要使用

  • body 默认有一个margin 8px

* {
    font-size: 20px;
}

/*尽量不用通配符*/

body, p, div, h2, span {
    margin: 0;
    padding: 0;
}

简单选择器​

  • 一个HTML文档里面的id值是唯一的，不能重复

    • id值如果由多个单词组成，单词之间可以用中划线，下划线连接，也可以使用驼峰标识
    • 最好不要用标签名作为id值

  • 中华线又叫连字符（hyphen）

元素选择器(type selectors)， 使用元素的名称​

类选择器(class selectors)，.类名​

id选择器(id selectors)，#id​

属性选择器​

  • 拥有某一个属性 [att]

  • 属性等于某个值 [att=val]

  • 其他了解下

    • [att*=val]: 属性值包含某一个值val
    • [att^=val]: 属性值以val开头
    • [att$=val]: 属性值以val结尾
    • [att|=val]: 属性值等于val或者以val开头后面紧跟连接符-
    • [att~=val]: 属性值包含val，如果有其他值，比如以空格和val分割
<div title="div"></div>

<h2 title="h2"></h2>
[title] {
    color: red;
}

[title=div] {
    background-color: red;
}

后代选择器(descendant combinator)​

  • 后代选择器一：所有后代（直接和间接的后代）

    • 选择器之间以空格分割
      • .box span {xxx}

  • 后代选择器二：直接子代选择器（必须是直接自带）

    • 选择器之间以 >分割

兄弟选择器(sibling combinator)​

  • 相邻兄弟选择器
    • .box + .content {}
  • 普遍兄弟选择器 ~
    • .box ~ div {}

选择器组​

交集选择器​

  • 同时符合两个选择器条件，为了精准选择某一个元素
<div class="box"></div>
<p class="box"></p>

div.box {
    xxx
}

并集选择器​

  • 符合一个选择器条件即可，两个选择器以,分割

body, h2, p, div {
    xxx
}

伪类​

认识伪类​

  • Pseudo-classes，伪类

  • 伪类是选择器的一种，用于选择处于特定状态的元素

  • 常见的伪装

    • 动态伪类(dynamic pseudo-classes)
      • :link
      • :visited
      • :hover
      • :active
      • :focus
    • 目标伪类(target pseudo-classes)
      • :target
    • 语言伪类(language pseudo-classes)
      • :lang(en)
    • 元素状态伪类(UI element states pseudo-classes)
      • :enabled
      • :disabled
      • :checked
    • 结构伪类（structural pseudo-classes）
      • :nth
        • :nth-child()
        • :nth-last-child()
        • :nth-of-type()
        • :nth-last-of-type()
      • :first
        • :first-child()
        • :last-last-child()
        • :first-of-type()
        • :last-of-type()
      • 第三类
        • :root
        • :only-child
        • :only-of-type
        • :empty
    • 否定伪类(negation pseudo-classes) :not()
div:hover{

}

动态伪类(dynamic pseudo-classes)​

  • :link

    • a:link 未访问的连接

  • :visited

    • a:visited 已访问的连接

  • :hover

    • a:hover 鼠标挪动到链接上

  • :active

    • a:active 激活的连接(鼠标在链接上长按住未松开)

  • :focus

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

  • 使用注意

    • :hover必须放在:link和:visited后面才能完全生效
    • :active必须放在:hover后面才能完全生效
    • 所以建议的编写顺序是:link、:visited、:hover、:active

  • 除了a元素，:hover、:active也可以用在其他元素上

  • 动态伪类的编写顺序建议为：

    • :link、:visited、:focus、:hover、:active

  • 直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了

伪元素(pseudo-elements)​

  • 常见的伪元素有

    • :first-line, ::first-line
    • :first-letter, ::first-letter
    • :before, ::before
    • :after, ::after

  • 为了区分伪类和伪元素，建议用两个冒号

  • :first-line, ::first-line

    • 可以针对首行文本设置属性
Loading Comments...
0%