CSS :has 选择器
实例
我们希望为包含
定义和使用
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
:表示你希望在父元素中找到的子元素的选择器。
更多实例
选择包含特定类名的元素
选择包含多个特定子元素的元素
实例
如果你想要选择同时包含
以上代码将为同时包含
和
.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 选择器
点我分享笔记