前端笔记三

最新推荐文章于 2024-12-06 20:10:58 发布

潦艹

最新推荐文章于 2024-12-06 20:10:58 发布

阅读量141

点赞数

CC 4.0 BY-SA版权

分类专栏： html前端学习

本文链接：https://blog.youkuaiyun.com/weiwei266/article/details/83145231

html前端学习专栏收录该内容

6 篇文章

订阅专栏

本文深入解析了CSS中的标签选择器、类选择器及其优先级规则，并通过实例展示了如何使用媒体查询@media针对不同屏幕尺寸调整样式。此外，还介绍了CSS透明度设置及伪类选择符的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、CSS选择器技术概览一（标签选择器和类选择器（class））

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>我的前端笔记</title>
	<style type="text/css">
	/* 标签选择器*/
		h3,div{
			font-size: 20px;
			color: red;
			text-decoration: underline;
		}
		/* 类选择器 */
		.u211{
			color: blue;
			font-size: 25px;
		}
		#host{
			color: yellow;
		}
	</style>
</head>
<body>
	<div> 
		<div class="u211" id="host">福州大学</div>
		<div class="u211">厦门大学</div>
		<div>厦门理工</div>
		<div>农林大学</div>
		<div class="u211">北京大学</div>

	</div>

<h3>大学排行榜</h3>
	
</html>

效果如图
注：在网页中，类选择器优先级高于标签选择器，若标签选择器和类选择器在同一属性内，则是先执行标签选择器，然后执行类选择器class，最后以类选择器显示在网页。类选择器可以跨标签。

举例：			标签选择器男同学{
					裤子：黑色；
				上衣：白色;
						鞋子：安踏；
					}

				类选择器{
				裤子：蓝色；									则男同学会先穿上黑裤子，白上衣，安踏鞋，
															然后换成蓝色裤子，红色上衣，安踏鞋子展示在人面前
				上衣：红色；													
				}

优先级：i d 选择器 > 类选择器 > 标签选择器

二、媒体查询`@media`

1、某个范围内

@media screen and (max-width: 680px) and (min-width:500px) {
      #mydiv{
        border:5px solid yellow;
      }

      #span1{
        display: inline;
      }

      #span2{
        display: none;
      }

    }

2、或的并列关系

  @media screen and (min-width: 680px),(max-width:500px) {
      #span1{
        display: none;
      }

      #span2{
        display: inline;
      }
    }

三、css透明度：`opacity: 0.1~0.9`;值越小越透明

四、伪类选择符

a:link { } //未访问的链接状态
a:visited { } //已访问的状态
a:hover { }//鼠标悬停时
a:active {  } //鼠标点击时

前端笔记三

一、CSS选择器技术概览一（标签选择器和类选择器（class））

二、媒体查询@media

三、css透明度：opacity: 0.1~0.9;值越小越透明

四、伪类选择符

二、媒体查询`@media`

三、css透明度：`opacity: 0.1~0.9`;值越小越透明