欢迎光临
我的个人博客网站

css 选择器


CSS 选择器

一、常用选择器

  1. 元素选择器 p {}
  2. id 选择器 #name {}
  3. class 类选择器 .box {}

二、复合选择器

交集选择器 p.red {} .box.red {}

选中同时符合多个条件的元素

注意:交集选择器中如果有元素选择器,而元素选择器必须在开头

  1. 选择器分组(并集选择器)h1, p, .box {}

    同时选择多个选择器对应的元素

三、关系选择器

  1. 子选择器 .box > p {}

    选中指定父元素的指定子元素(可以多个)

  2. 后代选择器 .box p {}

    选中指定父元素的指定后代元素(可以多个)

  3. 兄弟选择器
    • p + span {}

      选择下一个指定的兄弟元素,必须是紧挨着的,而且只能选择一个

    • p ~ span {}

      选择下边所有指定的兄弟,被隔开的都能选择到,是多个

  4. 属性选择器
    • p[属性名] {} 选择含有此属性的元素

    • p[属性名 = 属性值] {} 选择含有指定属性和属性值的元素

    • p[属性名 ^= 属性值] {} 选择属性值以指定值开头的元素

    • p[属性名 $= 属性值] {} 选择属性值以指定值结尾的元素

    • p[属性名 *= 属性值] {} 选择属性值中含有某值的元素

伪类选择器

伪类:不存在的类,特殊的类

  • 伪类用来描述一个元素的特殊状态

    例如,第一个子元素,被点击的元素,鼠标移入的元素。。。

  • 伪类一般是 : 开头

    • :first-child 第一个子元素

    • :last-child 最后一个子元素

    • :nth-child() 选中第n个子元素

      特殊值:

      ​ n 第n个 n的范围 0 ~ +infinity

      ​ 2n 或 even 表示选中偶数位的元素

      ​ 2n+1 或 odd 表示选中奇数位的元素

      注意:是根据所有的子元素进行排序

    • :first-of-type

    • :last-of-type

    • :nth-of-type()

      这些伪类功能和上面的 nth-child() 类似,但是他们是在同类元素中排序

    • :not() 否定伪类

      将符合条件的元素从选择器中去除

      eg: ur > li:not(:nth-of-type(3)){} 除了第3个 li 的其他所有 li 元素

  • 超链接の伪类

    • a:link 用于表示没访问过的链接(正常的链接)

    • a:visited 访问过的链接

      由于隐私的问题,所有 visited 这个伪类只能修改链接的颜色

    • a:hover 鼠标移入的状态

    • a:active 鼠标点击时的状态

    注意:link 和 visited 是 a 特有的伪类,而 hover 和 active 是所有元素都有的

伪元素选择器

伪元素:表示页面中一些特殊的并不真实的存在的元素(特殊的位置)

  • 伪元素使用 :: 开头

    • ::first-letter 表示第一个字母

    • ::first-line 表示第一行

    • ::selection 表示选中的内容

    • ::before 元素的开始

    • ::after 元素的最后

      before 和 after 必须结合 content 属性使用

赞(0) 打赏
未经允许不得转载:张拓的天空 » css 选择器
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏