关于css:css-选择器总结

52次阅读

共计 762 个字符,预计需要花费 2 分钟才能阅读完成。

1. 根底选择器

(1) 通配符选择器   * {}
(2) 类选择器       . 类名 {}
(3) ID 选择器(具备唯一性).ID {}
(4) 元素选择器 (标签选择器) div {}

2. 关系选择器

(1) 后盾选择器‘’如 div p{}  div 下的所有 p 标签都会失效
(2) 子代选择器  > 只有第一个 div 下的 p 标签失效  第二个 div 下的 p 标签不失效 div>p{}
    <div>
        <p><p>
        <div>p</div>
    </div>
(3) 相邻兄弟选择器  +  p+span{} 只有我是第一个 span 失效
    <div>
        <p></p>
        <span> 我是第一个 span</span>
        <span> 我是第二个 span<span>
    </div>
(4) 通用兄弟选择器 ~  即兄弟级别的都能够失效 

3. 伪类选择器

(1) 超链接相干
    a. :link  超链接点击之前 (只实用于 a 标签)
    b. :visited  超链接被拜访过之后 (只实用于 a 标签)
    c. :hover  鼠标悬停
    d. :active  鼠标点击但不松手时
(2) :first-child 选择器  匹配父元素中的第一个子元素
(3) :last-child  选择器  匹配父元素中的最初一个子元素
(4) :nth-child(n) 选择器  匹配父元素中的第 n 个子元素  元素类型没有限度 n 能够是数字 也能够是关键字 其中也能够将 n 设置为奇数,即 odd  偶数为 even
(5) :only-child  选择器  匹配父元素中只有一个子元素的元素
(6) :empty 选择器 匹配没有任何子元素的元素,包含文本节点
(7) :not() 选择器 匹配每个元素是不是指定的元素 / 选择器
(8) :focus 选择器 用于抉择具备焦点的元素 个别用于 input 标签
(9) :checked 选择器 匹配每个选中的选中器(仅实用于单选框和复选框)

4. 伪对象选择器

::befor 和 ::after  用于在被选元素的后面或前面增加内容 用来和 content 属性一起应用。

5. 属性选择器

正文完
 0