详解:9only-child only-of-type

el/2023/12/3 2:12:34

only-child只有一个子元素的css样式
only-of-type只有一个元素的css样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box1 p:only-child/*只有一个儿子的就样式化*/{color: blue;}.test1 h2:only-of-type/*意思是*/{color: red;}</style>
</head>
<body><div class="box1"><p>hello king</p></div><div class="box1"><p>hello king</p><p>hello king</p></div><div class="test1"><h2>55</h2></div>
</body>
</html>

http://www.ngui.cc/el/2926762.html

相关文章

详解::empty 10

核心是如果元素的内容部分如果有字符就不会有效果&#xff0c;没有字符才有效果&#xff0c;为什么&#xff1f; 因为:empty的意思是为空哈&#xff0c;为空才能效果哈 记住是一个:&#xff0c;写两个就没有效果了哈 <!DOCTYPE html> <html lang"en"> &…

详解: :not 11三种写方式

核心是表单用最后一种方式&#xff0c;其他的用第一第二种方式哈 问题?为什么表单用的是最后一种方式&#xff0c;因为他有类型哈,因为表单有很多类型&#xff0c;如果只设一种类型css语法&#xff0c;就type""就行了 问题&#xff1f;为什么加[] 因为代表这是表单独…

详解: :hover 12 三种方式 唉,累死我了看评论啊啊啊

核心是&#xff1a;触碰到哪里&#xff0c;记住是触碰哈&#xff0c;因为not所以触碰的没有效果&#xff0c;其他的都有效果&#xff0c;问题什么效果&#xff1f; opacity: .2; filter: alpha(opacity20); <!DOCTYPE html> <html lang"en"> <head&g…

详解::enable(启用) 13

核心&#xff1a;启用的 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title><style type"text/css">.test1:enabled/*启用的类型加上红色的边框*/{border: 1px s…

看:hover之后必看核心写错了:hover那里,我现在重新写最核心的地方哈

.box1:hover li:not(:hover) 代表最重要的条件就是.box1:hover了&#xff0c;为什么&#xff0c;因为代表必须触碰才能有效果&#xff0c;不触碰就是没有效果的 而 li:not(:hover)就是不触碰就有效果&#xff0c;之前加上 .box1:hover点睛之笔啊哈哈哈呵呵、 单独写 li:not(:h…

详解: input[type=类型是什么] 16

核心&#xff1a;记住哈&#xff0c;:required与:optional对单选框和复选框&#xff0c;自己的理解&#xff0c; 无效哈 核心&#xff1a;最核心的点来了 为什么单选按钮要两个name一样的呢&#xff1f; 因为两个name一样代表只能有一个啊&#xff0c;name两个是不是最后一个会…

详解:17 :valid :invalid

核心&#xff1a;这里记住了哈&#xff0c;作用的可是type“email” <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title><style>input[type"email"]:valid{color…

详解:20 :before :after attr

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title><style>.test1:after/*attr根据属性找到属性值*/{content: attr(class)"陈业贵"attr(data-url)"李文&quo…

详解:21 计数器

核心&#xff1a;counter-reset意思&#xff1a;定义变量&#xff0c;一个变量对应一个值&#xff0c;不写值默认为0 变量名 值 变量名 值 记住啊&#xff0c;不需要,写,就错了&#xff01;&#xff01;&#xff01;写,代表终止了哈 counter-increment意思&#xff1a;累加&…

详解:22 border-radius

核心&#xff1a;记住&#xff0c;如果只写一个的话&#xff0c;代表四个角都变化 记住&#xff1a;如果写两个的话。代表左上角与右下角一样&#xff0c;右上角与左下角一样 记住&#xff1a;如果三个值的话&#xff0c;代表左上角 右上角 左下角 如果四个值的话&#xff0c;代…