• 技术文章 >web前端 >css教程

    CSS选择器学习之聊聊复合选择器(详细介绍)

    青灯夜游青灯夜游2021-07-16 10:11:30转载158
    本篇文章给大家详细介绍一下CSS中的复合选择器,了解一下css中的交集选择器、并集复合选择器、层级选择器、伪类与伪元素选择器、属性选择器,一起学习吧!

    一、交集选择器

    div.student{
    				color: red;
    }

    二、并集复合选择器

    p.slogn,.teacher,#gy{
    				font-family: "宋体";
    }

    三、层级选择器

    1、后代元素复合器

    #yuGong .people{
       			color: red;
       		}

    2、子元素复合选择器

    #yuGong>.people{
       			color: red;
    }

    3、临近兄弟选择器

    #secondBaby+#thirdBaby{
       			color: red;
    }

    4、普通兄弟选择器

    #bigBaby~#thirdBaby{
       			color: red;
    }

    四、伪类与伪元素选择器

    0、“伪”是什么?

    1、伪类选择器

    1)link

    a:link{...}

    2)visited

    a:visited{...}

    3)hover

    a:hover{...}

    4)activer

    a:active{...}

    5)focus

    a:focus{...}

    注意:伪类的顺序不要颠倒,要按照link-visited-hover-active的顺序,否则可能会出错

    2、伪元素选择器

    选择器作用格式
    ::first-letter选取选择器的首字母p::first-letter
    ::first-line选取选择器的首行p::first-line
    ::before在选择器前增加内容,使用 content 属性来指定要插入的内容。(被插入的内容实际上不在文档树中)p::before{content: "hello ";}
    ::after在选择器后增加内容,使用 content 属性来指定要插入的内容。(被插入的内容实际上不在文档树中)p::after{content: "hello ";}
    ::selection匹配被用户选中或者处于高亮状态的部分p::selection

    五、属性选择器

    选择器作用格式
    E[att^=value]表示E标签的att属性值是以’value’开头的p[id^=‘yuan’]{color: red;}
    E[att$=value]表示E标签的att属性值是以’value’结尾的p[id$=‘chao’]{ color: blue;}
    E[att*=value]表示E标签的att属性值中包含’value’字符串p[class*=‘shi’]{font-size: 35px;}

    更多编程相关知识,请访问:编程入门!!

    以上就是CSS选择器学习之聊聊复合选择器(详细介绍)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:CSS 复合选择器
    上一篇:纯CSS实现圆角三角形的3种方法(技巧分享) 下一篇:使用JS或CSS如何实现瀑布流布局,几种方案介绍
    VIP会员

    相关文章推荐

    • 分享一些提高前端开发效率的CSS 属性选择器!!• 了解CSS的选择器优先级和!important权重• css怎么设置文本框宽度• 怎么用css实现左右运动效果• 纯CSS如何实现血轮眼+轮回眼特效(代码详解)• 纯CSS实现圆角三角形的3种方法(技巧分享)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网