详解::target 2

el/2023/12/3 2:19:40

核心是:找到并且匹配然后显示效果
怎么找?
通过id
这样说好像太裸铜了把。

<li><a href="#p1">李文1</a></li>

记住:#代表要找的为id,p1代表要找到是什么,知道把,记住。是往下找的哈,记住#代表id哈
找到了之后怎么匹配?
找到了id为p1的之后,就要看看有没有.chapter的了,有就能显现效果了
为什么就能直接显现效果了呢?
因为:target代表动的时候就触发了哈

.chapter:target

怎么显示效果?

  border: 1px solid red;color: blue;
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.chapter:target/*意思是可用于点击的当前的目标元素*/{/*再有所有.chapter的class中找出点击的目标元素*/border: 1px solid red;color: blue;}</style>
</head>
<body>核心根据#代表找id为什么<h3>陈业贵</h3><h2>陈业贵</h2><ul class="chapterList"><li><a href="#p1">李文1</a></li><li><a href="#p2">李文2</a></li><li><a href="#p3">李文3</a></li><li><a href="#p4">李文4</a></li><li><a href="#p5">李文5</a></li></ul>
<h3 id="p1" class="chapter">李文1</h3>
<p>......................</p><p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<h3 id="p2" class="chapter">李文2</h3>
<p>......................</p><p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<h3 id="p3" class="chapter">李文3</h3>
<p>......................</p><p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<h3 id="p4" class="chapter">李文4</h3>
<p>......................</p><p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<h3 id="p5" class="chapter">李文5</h3>
<p>......................</p><p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p>
<p>......................</p></body>
</html>

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

相关文章

详解:tab 3

<!--选项卡的html部分&#xff0c;是先div包括起来全部&#xff0c;然后最上面是ul三个&#xff0c;下面是div内容就行了啊--> <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title></title>&l…

详解::root 4

<!DOCTYPE html><html lang"en"> <head><meta charset"UTF-8"><title>Document</title><style type"text/css">html:root{color: red;}</style> </head> <body><h1>李文1<…

详解: 7案例,浮动排列

核心:这些都是从1开始的哈,自己找图片&#xff0c;重命名即可。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title><style type"text/css">*{padding: 0px;marg…

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

核心&#xff1a;我不说之前说过的话&#xff0c;nth代表从1开始&#xff0c;是奇数还是偶数哈 css <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title><style type"text…

详解: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…