伪类及选择器

最新推荐文章于 2022-08-31 22:22:40 发布
最新推荐文章于 2022-08-31 22:22:40 发布
阅读量142 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40805072/article/details/104963292
版权

一、 

<!--html-->
 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>file</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body> 
	<h2>图书名称</h2>
	<p>《Java程序设计》</p>
	<p>《Java编程思想》</p>
	<p>《Java核心技术》</p>	
</body>
</html>
<!--css-->
h2{
	font-weight: bold;
}
p{
	font-weight: bold;
	font-size: 300;
}
p::selection{
	background-color: red;
	color: black;
}

二、

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>file</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body> 
	 <p>图书排行榜</p>
	 	<ul>
	 		<li>三体</li>
	 		<li>盗墓笔记</li>
	 		<li>三生三世十里桃花</li>
	 	</ul>
	 <p>游戏排行榜</p>
	 	<ol>
	 		<li>英雄联盟</li>
	 		<li>DOTA</li>
	 		<li>魔兽世界</li>
	 	</ol>	 
</body>
</html>
《！--css----》
p{
	font-weight: bold;
	color: black;
}
ul li{color: green;}
ol li{color: blue;}

三、

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>file</title>
	<link rel="stylesheet" type="text/css" href="index.css">
	<style type="text/css">
	div{
 	background: url(image/1.jpg);
 	background-size:500px 500px;
 	overflow-y:auto;
 	width: 300px;
 	height: 300px;
 	top: 300px;
 	left:50%;
 	position: absolute;
 	overflow:scroll; 
 	border: 2px dashed red;
 	color: white;
 }
	</style>
</head>
<body>
<div>asasa<br>sasa<br>sasasasasa<br>sasasa<br>sasa<br>sasasasasa<br>sasas<br>asas<br>asasasasas<br>asasasas<br>sasasasassasasa<br>sasasasas<br>sasasas<br>asasasasasasas<br>asasasasasa<br><br><br>sasasasasasa<br>sasasa<br>sasasas<br>asasasasasasasasas<br><br>a 
    </div>
</body>
</html>

四、

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>file</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>

      <div id="div1">
   		 	<div id="div2"></div> 
  	 </div>
  
</body>
</html>

 
 #div1{
			width: 300px;
            height: 300px;
            background-color: deepskyblue;
            position: relative;
 		}
#div2{
 			width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            }

五、

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>file</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body >
		<div class="father">
      <div id="div1">HTML</div>
  	  <div id="div2">CSS</div> 
  	  <div id="div3">JavaScript</div>			
		</div>

</body>
</html>

.father{
 	background-color: pink;
 	width: 500px;
    height: 500px;
    border: 2px black solid;
 }
 div{
 	color: black;
 }
 #div1{
			width: 300px;
            height: 100px;
            background-color: yellow;
            position: relative;
            margin-top:80px;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
             margin-left:40px;
 		}
#div2{
 			width: 300px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin-top:220px;
             margin-left:40px;
}

#div3{
 			width: 300px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
             margin-top:360px;
             margin-left:40px;
}

 

weixin_40805072
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 选择器 伪类选择器介绍
09-25
今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类选择器
java伪类,伪类 · JAVA105班随堂笔记 · 看云
weixin_30752995的博客
03-15 128
## 伪类CSS伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，`:hover` 将在用户悬停在选择器指定的元素上时应用样式。### anchor伪类链接的不同状态都可以以不同的方式显示。```htmla:link {color:#000000;} /* 未访问链接*/a:visited {color:#00FF00;} /* 已访问链接 */a:hover {color:#FF00...
伪类选择器
daimenglaoshi的博客
08-31 674
伪类：同一个标签，根据其不同的状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。 比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。...
java伪类,CSS伪类的实例
weixin_39703551的博客
03-15 111
既然说到伪类，这里就用足够的代码给表现一下他们的神奇用法。从简单到复杂，可以清晰的看清到伪类的诸多使用方法，对于有些功能近似的就取其一举例了：:first-letter为第一个字添加样式，这里用一个首字下沉的例子来演示一下：中国是以华夏文明为源泉p:first-letter{display: block;float: left;margin-right: .2em;font-size: 1.7em...
java伪类_CSS 伪类
weixin_29002935的博客
02-28 174
CSS 伪类(Pseudo-classes)CSS伪类是用来添加一些选择器的特殊效果。语法伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}anchor伪类在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示实例a:link{colo...
结构伪类选择器（总结）
12-22
什么是结构伪类选择器？ 结构伪类选择器是针对HTML的结构进行分类的选择器，特征就是位置 分为三大类 一类 e:first-child e:last-child e:only-child e:nth-child(n/even/odd)隔行换色，列表换色 e:nth-last-child ...
伪类选择器的使用和语法
09-19
伪类选择器的使用和语法
css3 伪元素和伪类选择器详解
09-25
无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。
四种css 伪类选择器
09-25
伪类，用于给元素的片段添加样式，这如何理解呢？比如你要让一个段落的第一行的文字加粗，那么这个选择器是不二之选
结构化伪类选择器
热门推荐
无区新手的博客
05-09 1万+
1.:root选择器     :root选择器用于匹配文档根元素，在HTML中，根元素始终是html元素。也就是说使用“:root选择器”定义的样式，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;titl...
JavaWeb锚伪类选择器
qin的博客
12-14 398
伪类语法： 冒号后面的 选择器：伪类{属性：值…..} 锚伪类： a:link{color:#ff00ff} 表示未访问的链接 a:visited{color:#00ff00} 表示已访问的链接 a:hover{color:#ff00ff} 鼠标移动到链接上的情况 a:active{color:#0000ff} 表示选定的链接 注意：link,visited,hover,active顺
属性伪类选择器
weixin_43755513的博客
08-02 331
input[value]{}：含有指定属性 input[value="abc"]：含有指定属性值 input[value^="abc"]：属性值起始位置存在的元素 input[value$="abc"]：属性值结束位置存在的元素 input[value*="abc]：属性值任意位置存在的元素 <!DOCTYPE html> <html> <head> &...
伪类的使用
qq_36437172的博客
09-30 921
对于页面中总会出现 一些特别的元素，我们可以通过使用伪类来达到这样的效果。 1.某个元素的下划线，表示选择当前元素 HTML： &lt;view class="classify-item {{tabIndex == index ? 'active':''}}" wx:key="key" wx:for="{{categories}}" bindtap="tabtap" wx:key="{{i...
java常见的选择器_学习css常用基本层级伪类属性选择器
weixin_35677043的博客
03-02 124
1 2 3 4 5 6 学习css常用基本层级伪类属性选择器7 8 /*常用选择器*/9 /*html选择符*//**{}给页面上所有的标签设置模式*/10 *{11 color:royalblue;12 }13 /*类选择符*//*.hcls{}给class是hcls的一类标签设置模式；*/14 .hcls{15 font-weig...
CSS伪类选择器和CSS常用属性
Java_HowTo的博客
12-04 447
1:CSS伪类选择器 1) 四种状态: link:未访问过的状态  hover: 鼠标停留在上面的状态    active: 鼠标点击时的状态   visited: 访问过后的状态 2) 顺序: 如果想让四种状态一直可以使用,必须按照link visited hover  active 这个顺序来排列. 2:CSS常用的属性: 1) 文本属性: color:
Java-CSS结构伪类选择器
但行好事 莫问前程
06-18 146
结构伪类选择器 概念 : 伪元素和伪选择器 是CSS已经定义好的 ,我们拿来就可以用 格式 : 选择器 :伪元素{ } 选择器01：E:first-child 功能：作为父元素的第一个子元素的元素E <p>1</p> <p>2</p> <p>3</p> <ul> <li>4</li&gt...
css浮动1
weixin_33815613的博客
01-24 64
<head> <meta charset="utf-8" /> <title>练习一</title> <style type="text/css"> *{ margin: 0px; pad...
html伪类选择器代码
最新发布
11-13
以下是一些常见的HTML伪类选择器代码示例： 1. :hover 伪类选择器用于鼠标悬停在元素上时的样式变化： ```css a:hover { color: red; } ``` 2. :active 伪类选择器用于元素被激活（例如被点击）时的样式变化： ```css button:active { background-color: yellow; } ``` 3. :visited 伪类选择器用于已访问链接的样式变化： ```css a:visited { color: gray; } ``` 4. :focus 伪类选择器用于元素获得焦点时的样式变化： ```css input:focus { border: 2px solid blue; } ``` 5. :nth-child(n) 伪类选择器用于选择某个元素的第 n 个子元素： ```css ul li:nth-child(3) { color: red; } ``` 6. :first-child 伪类选择器用于选择某个元素的第一个子元素： ```css ul li:first-child { font-weight: bold; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值