ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS学习日记1——CSS各种选择器

2021-04-07 21:29:30  阅读:140  来源: 互联网

标签:attr color 元素 value 日记 选择器 CSS 属性


一.选择器:

1.三种基本选择器:

  • 元素选择器  也叫标签选择器
  • 类选择器,以符号(.)开头
  • ID选择器,以符号(#)开头

 例子:  

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三种选择器练习</title>	
		<style>
			h1{
				color: papayawhip;  }
			.a1{
				color: palegreen;  }
			#a2{
				color: navy;        }
		</style>
	</head>
	
	<body>
	    <!--   优先级:id选择器>类选择器>标签选择器   -->
		<h1 > <!--标签选择器-->
			选择器 
		</h1>   
		<h1 class="a1"><!--类选择器-->
			 选择器 
		</h1> 
		<h1  id="a2">    <!--id选择器-->
			选择器 
		</h1> 	
	</body>
</html>

效果图:

2.四种层次选择器:

  • 后代选择器    语法:body   h1   h2{  color : pink;}
  • 子代选择器    语法:li>p{   color : pink;  }
  • 相邻兄弟选择器    选择自己相同元素的下一个元素(也可称弟弟选择器) 语法  .brother +p{ color : pink;  }
  • 通用选择器   选择自己相同元素以下的元素     语法:.brother ~p{ color : pink;  }

   例子:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>四种层次选择器</title>
		<style>
			body h1 p{
				color: pink;   }  /*后代选择器*/
			p>i{ 
				color: yellow; }  /*子代选择器*/
			.q1+a{  
				color: blue;   }  /*邻居兄弟选择器*/
			.q2~a{ 
				color: red;    }  /*通用选择器*/
		</style>
	</head>	
	<body>
		<h1>
			<p>选择器1</p>
		</h1>    <hr>
		<p>
			<i>选择器2</i>
		</p>    <hr>
		<p>
			<a>选择器3</a>
			<a class="q1">选择器3</a>
			<a>选择器3</a>
			<a>选择器3</a>
		</p>    <hr>
		<p >
			<a>选择器4</a>
			<a  class="q2">选择器4</a>
			<a>选择器4</a>
			<a>选择器4</a>
		</p>	<hr>			
	</body>
</html>

效果图:

3.结构伪类选择器:

各种用法见表3-1:

 

例子—效果图:

4.属性选择器:

  • [attr]表示带有以 attr 命名的属性的元素。
  • [attr=value]表示带有以 attr 命名的属性,且属性值为 value 的元素。
  • [attr~=value]表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少有一个值为 value。
  • [attr|=value]表示带有以 attr 命名的属性的元素,属性值为“value”或是以“value-”为前缀("-"为连字符,Unicode 编码为 U+002D)开头。典型的应用场景是用来匹配语言简写代码(如 zh-CN,zh-TW 可以用 zh 作为 value)。
  • [attr^=value]表示带有以 attr 命名的属性,且属性值是以 value 开头的元素。
  • [attr$=value]表示带有以 attr 命名的属性,且属性值是以 value 结尾的元素。
  • [attr*=value]表示带有以 attr 命名的属性,且属性值至少包含一个 value 值的元素。

例子:

 

 

PS:不懂的多在网上搜一下,多看看,多实验,多思考。(好多名词解释太笼统,不容易理解,多看例子,用法就容易懂了)

标签:attr,color,元素,value,日记,选择器,CSS,属性
来源: https://blog.csdn.net/weixin_45632095/article/details/115493088

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有