CSS :has 选择器

实例

我们希望为包含

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


.parent:has(div) {

    border: 1px solid red;

}


尝试一下 »


定义和使用
CSS 的 :has 伪类是一种选择器，它允许你根据其后代元素来选择一个元素。

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


:has 伪类在 CSS 中是相对较新的功能，可能不被所有浏览器支持。在使用之前，建议检查浏览器的兼容性。

:has 伪类不能与 * 选择器一起使用，它只能与类型选择器（如 div、span 等）或类选择器一起使用。


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



选择器







 :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 思考中...
    




  CSS element.class 选择器 

 CSS :is 选择器 



.responsive_ad1 { display:none; }

@media(min-width: 800px) { .responsive_ad1 {  display:block;margin:0 auto;} }


     (adsbygoogle = window.adsbygoogle || []).push({});

.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 选择器
emailtry.com 1ucn.com proxychk.com

CSS :has 选择器

CSS :has 选择器

实例

定义和使用

浏览器支持

CSS 语法

更多实例

选择包含特定类名的元素

实例

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

实例

点我分享笔记

发表回复取消回复

近期文章

归档

功能

emailtry.com 1ucn.com proxychk.com

CSS :has 选择器

CSS :has 选择器

实例

定义和使用

浏览器支持

CSS 语法

更多实例

选择包含特定类名的元素

实例

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

实例

点我分享笔记

发表回复 取消回复

近期文章

归档

功能

发表回复取消回复
