CSS3练习之通用兄弟选择器、伪元素选择器

向右看齐 2022-07-11 01:43 244阅读 0赞

![20170115174553325][]

点击按钮出现各图片：

![20170115174631935][]

<!doctype html>
    <html>
    		<head>
    			<title>Demo</title>
    			<meta charset="utf-8">
    			<style>
    				.clear:after{
    					content:"";
    					display:block;
    					clear:both;
    				} 
    				#dl a{
    					width:100px;
    					height:20px;
    					border:1px solid #000;
    					background-color:#CACAC9;
    					float:left;
    					margin:10px;
    				}
    				#d2{
    					width:600px;
    					height:600px;
    					border:1px solid #ddd;
    					margin-left:10px;
    				}
    				#d2 img{
    					display:none;
    				}
    				#d2 #img01:target,#d2 #img02:target,#d2 #img03:target,#d2 #img04:target{
    					display:block;
    					margin:125px  auto;
    				}
    			</style>
    		</head>
    		<body>
    			<div id="dl" class="clear">
    				<a href="#img01">img1</a>
    				<a href="#img02">img2</a>
    				<a href="#img03">img3</a>
    				<a href="#img04">img4</a>
    			</div>
    			<div id="d2">
    				<img src="images/p001.jpg" id="img01">
    				<img src="images/p002.jpg" id="img02">
    				<img src="images/p003.jpg" id="img03">
    				<img src="images/p004.jpg" id="img04">
    			</div>
    		</body>
    </html>

[20170115174553325]: /images/20220711/c3f091b185f34a859867ba31ec42171b.png
[20170115174631935]: /images/20220711/a3f2e661d2aa4f6c82f2e4573ad5976b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，244人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 选择器 and 伪类/伪元素

CSS 选择器优先级：!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性伪类选择器，分为：链接伪类选择器，

谁践踏了优雅/ 2022年12月21日 04:56/ 0 赞/ 221 阅读

相关 CSS3中的群组选择器,后代选择器[空格]子元素选择器＞相邻兄弟选择器+兄弟选择器~

群组选择器（','） / 表示既h1，又h2 / h1, h2 { color: red; } 后代选择器\[空格\]

╰半橙微兮°/ 2022年12月19日 08:52/ 0 赞/ 231 阅读

相关 css通用选择器用_通用选择器（CSS选择器）

css通用选择器用描述 (Description) The universal selector matches any element type. It can b

朱雀/ 2022年12月03日 11:26/ 0 赞/ 259 阅读

相关 css3伪元素选择什么,css3巧用选择器配合伪元素

一 . 前言有时我们在写底部导航栏时，会有很多超链接，每个链接间用“|”分割，如下图： ![bb6df385d03a63b8a3426b7a487f2ea7.png][]

Bertha 。/ 2022年09月03日 01:29/ 0 赞/ 208 阅读

相关 CSS3练习之通用兄弟选择器、伪元素选择器

![20170115174553325][] 点击按钮出现各图片： ![20170115174631935][] <!doctype html> <

向右看齐/ 2022年07月11日 01:43/ 0 赞/ 245 阅读

相关 CSS3 选择器——伪类选择器

前面花了两节内容分别在《[CSS3选择器——基本选择器][CSS3]》和《[CSS3选择器——属性选择器][CSS3 1]》介绍了[CSS3选择器][CSS3 2]中的基本选择

た入场券/ 2022年06月10日 05:24/ 0 赞/ 334 阅读

相关 CSS伪元素选择器

伪元素选择器 < !–隐藏标签–> 每个标签都有开始：before 结束：after <p> <before> </before> < !--默

水深无声/ 2022年04月03日 12:13/ 0 赞/ 332 阅读

相关 css3系列之伪元素选择器

Pseudo-Element Selectors(伪元素选择器) 　　E::placeholder　　E::selection　 E::placeholder 　　

本是古典何须时尚/ 2021年11月23日 04:36/ 0 赞/ 252 阅读

相关 CSS3选择器的使用（基础选择器、复合选择器、伪类选择器、属性选择器和伪元素选择器）

CSS3选择器的使用（基础选择器、复合选择器、伪类选择器、属性选择器和伪元素选择器） CSS选择器的使用 1. CSS基础选择器的使用 2

缺乏、安全感/ 2021年10月30日 01:01/ 0 赞/ 434 阅读

相关 css伪类、伪元素选择器

`1.伪类选择器` 条件一：根据元素不同的状态，自动选择不同的样式。或条件二，直接添加一个class，再给这个class添加特定的样式。 A.伪类的语法：（

忘是亡心i/ 2021年09月14日 00:14/ 0 赞/ 531 阅读