CSS :has 选择器

完整CSS选择器参考手册

实例

我们希望为包含

子元素的 .parent 元素应用样式:

.parent:has(div) {
border: 1px solid red;
}

尝试一下 »


定义和使用

CSS 的 :has 伪类是一种选择器,它允许你根据其后代元素来选择一个元素。

:has 伪类在 CSS 选择器中非常有用,因为它可以基于更复杂的条件来选择元素。

  • :has 伪类在 CSS 中是相对较新的功能,可能不被所有浏览器支持。在使用之前,建议检查浏览器的兼容性。
  • :has 伪类不能与 * 选择器一起使用,它只能与类型选择器(如 divspan 等)或类选择器一起使用。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

选择器
:invalid 10.0 10.0 4.0 5.0 10.0

CSS 语法

parent:has(selector) {
    /* 样式规则 */
}
  • parent:表示父元素的选择器。
  • selector:表示你希望在父元素中找到的子元素的选择器。

更多实例

选择包含特定类名的元素

实例

如果你想要选择包含类名为 .active 的子元素的父元素:

div:has(.active) {
background-color: yellow;
}

尝试一下 »

选择包含多个特定子元素的元素

实例

如果你想要选择同时包含

  • 子元素的

      元素:

      ul:has(li):has(div) {
      border: 2px dashed blue;
      }

      尝试一下 »

      以上代码将为同时包含

    • 子元素的

        元素添加蓝色虚线边框。


        完整CSS选择器参考手册

      • AI 思考中...

        .wrapper {
        /*text-transform: uppercase; */
        background: #ececec;
        color: #555;
        cursor: pointer;
        font-family: "Gill Sans", Impact, sans-serif;
        font-size: 20px;
        position: relative;
        text-align: center;
        width: 200px;
        -webkit-transform: translateZ(0); /* webkit flicker fix */
        -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
        }

        .wrapper .tooltip {
        white-space: nowrap;
        font-size: 14px;
        text-align: left;
        background: #96b97d;
        bottom: 100%;
        color: #fff;
        display: block;
        left: -25px;
        margin-bottom: 15px;
        opacity: 0;
        padding: 14px;
        pointer-events: none;
        position: absolute;

        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        -o-transform: translateY(10px);
        transform: translateY(10px);
        -webkit-transition: all .25s ease-out;
        -moz-transition: all .25s ease-out;
        -ms-transition: all .25s ease-out;
        -o-transition: all .25s ease-out;
        transition: all .25s ease-out;
        -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        }
        .tooltip a {
        color:#fff;
        }
        /* This bridges the gap so you can mouse into the tooltip without it disappearing */
        .wrapper .tooltip:before {
        bottom: -20px;
        content: " ";
        display: block;
        height: 20px;
        left: 0;
        position: absolute;
        width: 100%;
        }

        /* CSS Triangles - see Trevor's post */
        .wrapper .tooltip:after {
        border-left: solid transparent 10px;
        border-right: solid transparent 10px;
        border-top: solid #96b97d 10px;
        bottom: -10px;
        content: " ";
        height: 0;
        left: 20%;
        margin-left: -13px;
        position: absolute;
        width: 0;
        }
        .wrapper .tooltip1 {
        margin-left: 50px;
        padding-top: 0px;
        }
        /*
        .wrapper:hover .tooltip {
        opacity: 1;
        pointer-events: auto;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
        }
        */
        /* IE can just show/hide with no transition */
        .lte8 .wrapper .tooltip {
        display: none;
        }

        .lte8 .wrapper:hover .tooltip {
        display: block;
        }

        点我分享笔记

        • 昵称 (必填)
        • 邮箱 (必填)
        • 引用地址

        $(function() {
        //初始化编辑器

        var editor = new Simditor({
        textarea: $('#mded'),
        placeholder: '写笔记...',
        upload:false,
        // upload: {url:'/api/comment_upload_file.php',params: null,fileKey: 'upload_file',connectionCount: 1,leaveConfirm: '文件正在上传,您确定离开?'},
        defaultImage: 'https://www.runoob.com/images/logo.png',
        codeLanguages: '',
        autosave: 'editor-content',
        toolbar: [ 'bold','code','ul','ol','image' ]
        });
        editor.on('selectionchanged', function() {
        $(".code-popover").hide();
        });

        // 提交数据
        $("#share_code").click(function() {
        $(".comment-signarea").hide();
        $("#commentform").show();

        });
        $("#user_add_note").click(function() {
        $(".comment-signarea").hide();
        $("#commentform").show();
        $('html, body').animate({
        scrollTop: $("#respond").offset().top
        }, 200);
        });

        // 提交笔记
        var commentform=$('#commentform');
        commentform.prepend('

        ‘);
        var statusdiv=$(‘#comment-status’);

        commentform.submit(function(e){
        e.preventDefault();
        var noteContent = editor.getValue();
        // console.log(noteContent);
        noteContent = noteContent.replace(/

        /g,"
        ");
        		noteContent = noteContent.replace(//g,"

        ");

        // 系列化表单数据
        var comment_parent = 0;
        var is_user_logged_in = $("#is_user_logged_in").val();
        var comment_post_ID = 25701;
        var _wp_unfiltered_html_comment = $("#_wp_unfiltered_html_comment").val();
        var comment = noteContent;
        var author = $("#author").val();
        var url = $("#url").val();
        var email = $("#email").val();
        if(isBlank(author) && is_user_logged_in==0) {
        statusdiv.html('

        请输入昵称!

        ').show();
        } else if(isBlank(email) && is_user_logged_in==0) {
        statusdiv.html('

        请输入邮箱!

        ').show();
        } else {
        // var formdata=commentform.serialize() + "&comment=" + noteContent ;
        // 添加状态信息
        statusdiv.html('

        Processing...

        ').show();
        // 获取表单提交地址
        var formurl=commentform.attr('action');

        // 异步提交
        $.ajax({
        type: 'post',
        url: formurl,
        dataType:'json',
        data: {"comment_parent":comment_parent,"comment_post_ID":comment_post_ID, "_wp_unfiltered_html_comment":_wp_unfiltered_html_comment,"comment":comment,"url":url, "email":email,"author":author},
        error: function(XMLHttpRequest, textStatus, errorThrown){
        statusdiv.html('

        数据不完整或表单提交太快了!

        ').show();
        },
        success: function(data, textStatus){
        if(data.errorno=="0") {
        $("#submit").prop('disabled', true);
        statusdiv.html('

        笔记已提交审核,感谢分享笔记!

        ').show();
        alert('笔记已提交审核,感谢分享笔记!');
        }else{
        statusdiv.html('

        '+data.msg+'

        ').show();
        }
        commentform.find('textarea[name=comment]').val('');
        }
        });
        setTimeout(function(){
        $("#submit").prop('disabled', false);
        }, 10*1000);
        }
        return false;

        });
        $(".comt-author").click(function() {
        href = $(this).children("a").attr("href");
        if(href.indexOf("/note/")!=-1) {
        var win = window.open(href, '_blank');
        win.focus();
        }
        });
        $(".comt-meta span").hover(function(){
        $(this).children(".tooltip").css({ "opacity": 1, "pointer-events": "auto"});
        },function(){
        $(this).children(".tooltip").removeAttr("style");
        });
        /*
        $(".wrapper i").hover(function(){
        $(this).siblings(".tooltip").css({ "opacity": 1, "pointer-events": "auto"});
        },function(){
        $(this).siblings(".tooltip").css({ "opacity": 0, "pointer-events": "auto"});
        });
        */
        //Upvote.create('runoobvote-id', {callback: vote_callback});
        var ajaxurl = 'https://www.runoob.com/wp-admin/admin-ajax.php';
        var callback = function(data) {
        //console.log($('#runoobvote-id').upvote('upvoted'));
        //console.log($('#runoobvote-id').upvote('downvoted'));
        //console.log(data);
        _vote_action = data.action;
        id_arr = data.id.split('-');
        um_id= id_arr[2];
        //console.log(um_id);

        var re = /^[1-9]+/;
        if (re.test(um_id)) {
        var ajax_data = {
        _vote_action: _vote_action,
        action: "pinglun_zan",
        um_id: um_id,
        um_action: "ding"
        };
        //console.log(ajax_data);
        $.post(ajaxurl,ajax_data,function(status){
        //if(status.vote_num>999) {
        // _voteHtml = ''+kFormatter(status.vote_num) +'';
        // $("#runoobvote-id-" + um_id + " .count").hide().after(_voteHtml);
        //}

        });
        }
        };
        if($('#comments').length && $('.upvotejs').length){
        $('.upvotejs').upvote({id: 25701, callback: callback});

        $.post(ajaxurl,{"action":"pinglun_zan","postid":25701},function(data){
        $(data).each(function(key,value) {
        $("#runoobvote-id-" + value.commid + " .upvote").addClass(value.upvotejs_class);
        $("#runoobvote-id-" + value.commid + " .downvote").addClass(value.downvote_class);
        $("#runoobvote-id-" + value.commid + " .count").text(value.upvote_count);
        })
        },'json');

        }

        });
        function isBlank(str) {
        return (!str || /^s*$/.test(str));
        }
        function kFormatter(num) {
        // return num;
        return Math.abs(num) > 999 ? Math.sign(num)*((Math.abs(num)/1000).toFixed(1)) + 'k' : Math.sign(num)*Math.abs(num)
        }

        本文来源于互联网:CSS :has 选择器




        发表回复

        您的电子邮箱地址不会被公开。 必填项已用 * 标注