选择器

最新推荐文章于 2024-07-22 20:38:06 发布

czw10000

最新推荐文章于 2024-07-22 20:38:06 发布

阅读量136

点赞数

分类专栏： javaEE HTML 文章标签： java

本文链接：https://blog.csdn.net/weixin_48722971/article/details/111703640

版权

javaEE 同时被 2 个专栏收录

88 篇文章 2 订阅

订阅专栏

HTML

21 篇文章 0 订阅

订阅专栏

选择器

当我们想要设置某些标签的样式时，就必须让css代码找到对应的标签，通过选择器可以找到对应的标签

常用的选择器

标签选择器，语法格式：标签名称{} 如对div标签控制，—>div{}
id选择器，语法格式：#id名称{},注意：id一般不能重复，需要给标签添加一个id属性
类选择器，语法格式：.class名称{},class名称可以重复，需要给标签添加class属性
并集选择器，语法格式：选择器1，选择器2，选择器3，… {}
属性选择器，语法格式：标签[属性=“具体的属性值”]{}，比如：input[type=“text”] —>username输入框设定样式

input[type=“password”] —>控制password密码输入框设定样式

不太常用的选择器

后代选择器语法格式：选择器1 选择器2{} 浏览器加载样式的时候会首先找选择器1对应的标签在不在，如果存在会找选择器1里面的嵌套的的选择器2对应的标签。
子元素选择器语法格式：选择器1>选择器2{} 浏览器会加载选择器1下的所有子元素符合选择器2的条件
交集选择器，语法格式：选择器1选择器2{} 要求标签同时具备选择器1和选择器2，里面的css样式才会起作用
相邻兄弟选择器，语法格式：选择器1+选择器2{}
通用兄弟选择器，语法格式：选择器1~选择器2{}
选中同级别的第一个标签，语法格式：标签:first-child{}
选中同级别中同类型的第一个标签，语法格式：标签:first-of-type{}
选中同级别中同类型的第一个标签，语法格式：标签:last-of-type{}
选中同级别第几个标签，语法格式：标签:nth-child(n){}
选中同级别中同类型的第几个标签，语法格式：标签:nth-of-type(n){}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<!--
	常用的选择器
		- 标签选择器，语法格式：标签名称{} 如对div标签控制，div{}
		- id选择器，语法格式：#id名称{},注意：id一般不能重复，需要给标签添加一个id属性
		- 类选择器，语法格式：.class名称{},class名称可以重复，需要给标签添加class属性
		- 并集选择器，语法格式：选择器1，选择器2，选择器3，... {}
		- 属性选择器，语法格式：标签[属性="具体的属性值"]{}
  -->
 <style type="text/css">
 	div{
 		height: 300px;
 		width: 500px;
 		background-color: green;
 		border: 1px solid black;
 	}
 	
    #twoDiv{
    	height: 300px;
 		width: 500px;
    	background-color: red;
    }
    
   .myClass{
   		height: 300px;
 		width: 300px;
        background-color: blue;
        border: 3px dotted purple;
   }
   /* .span01,.span02{
   		font-size: 30px;
   		color: yellow;
   		font-family: "Algerian";
   		
   } */
   
   .span01,.span02{
   		font-size: 30px;
   		color: pink;
   		font-family: "华文琥珀";
   } 
   /* 属性选择器，语法格式：标签[属性="具体的属性值"]{} */
   input[type="text"]{
   		height: 40px;
   		widows: 300px;
   }
   input[type="password"]{
   		border: 2px dashed red;
   		height: 40px;
   		width: 400px;
   }	
 </style> 
</head>
<body>
	<div>
	   	我是第一个div标签
	</div>
	<div id="twoDiv">
		我是第二个div标签
	</div>
	
	<div class="myClass"></div>
	<div class="myClass"></div>
	<div class="myClass"></div>
	
	<!-- 使用并集选择器 -->
	<span class="span01">
	 	我是第一个span标签
	</span>
	<span class="span02">
	 	我是第二个span标签
	</span>
	<!--  属性选择器，语法格式：标签[属性="具体的属性值"]{} -->
	<form action="">
		<input type="text" name="usename" placeholder="用户名">
	    <input type="password" name="password" placeholder="密码">
	    <input type="submit" value="提交">
	</form>
	
</body>
</html>