详解: 8,连续和不连续最后与开始的选择器

el/2024/4/20 14:44:16

核心:我不说之前说过的话,+nth代表从1开始,是奇数还是偶数哈

```css
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.test1 p:first-of-type{color: red;}.test1 p:nth-of-type(1){color: blue;}.test1 p:last-of-type{color: yellow;}.test1 p:nth-last-of-type(1){font-size: 10px;}</style>
</head>
<body><div class="test1"><h1>1111</h1><h2>333</h2><p>444</p><p>555</p><h3>66666</h3><h3>777770</h3><p>8888</p><h3>6666</h3></div>7
</body>
</html>


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

相关文章

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

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:onl…

详解::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;累加&…