• 不同选择器的语法

    1、id选择器

    任何的标签都可以有id值，但是在同一个html文件当中，id的值是唯一的，所以说我们可以使用id值来定位到对应的元素。

    1. 语法：
    2.  
    3. #id的名字{
    4.    属性1:值1;
    5.    属性2:值2;
    6.    属性3:值3;
    7.    ...
    8.    属性n:值n;
    9. }

     2、标签选择器

     只要是改标签，就会有对应的效果

    1. 语法：
    2.  
    3. 标签名{
    4. 	属性1:值1;
    5.     属性2:值2;
    6. 	属性3:值3;
    7. 	...
    8. 	属性n:值n;
    9. }

     3、类选择器

    只要是在该分组当中，就会有该分组当中设定的效果

    1. 语法：
    2.  
    3. .类名{
    4.  
    5. }

     代码练习：

    1.  
    2. html>
    3. <html>
    4. 	<head>
    5. 		<meta charset="utf-8">
    6. 		<title>id选择器title>
    7. 		
    8. 		
    9. 		
    10. 		
    11. 		<style>
    12. 			/* 标签选择器:是该标签 都会有对应的效果
    13. 			  标签名{
    14. 				  属性1:值1;
    15. 				  属性2:值2;
    16. 				  属性3:值3;
    17. 				  ...
    18. 				  属性n:值n;
    19. 			  }
    20. 			 */
    21. 			/* 
    22. 				类选择器：只要在该组当中，就有了组当中设定的效果
    23. 			 */
    24. 			/* 
    25. 			 .类名{
    26. 				 
    27. 			 }
    28. 			 */
    29. 			.cls{
    30. 				color: aqua;
    31. 			}
    32. 			input{
    33. 				color: crimson;
    34. 				background-color: aquamarine;
    35. 				/* 改变输入的东西的颜色 */
    36. 			}
    37. 			#id1{
    38. 				background: #000;
    39. 			}
    40. 		style>
    41. 		
    42. 	head>
    43. 	<body>
    44. 		<input class="cls"><br>
    45. 		<p class="cls">你p><br>
    46. 		
    47. 		<input class="cls" id="id1"><br>
    48. 		<p>haop><br>
    49. 		<input>
    50. 	body>
    51. html>
    52.  
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>testtitle>
    6. 	head>
    7. 	<style>
    8. 		input{
    9. 			color: red;
    10. 		}
    11. 		.cls{
    12. 			color: green;
    13. 		}
    14. 		#input{ 
    15. 			color: blue;
    16. 		}
    17. 	style>
    18. 	<body>
    19. 		<input class="cls" id="input">
    20. 		
    21. 		
    22. 		
    23. 		
    24. 		
    25. 		 
    26. 		 
    27. 		 
    28. 	body>
    29. html>

    4、派生选择器(后代选择器)

    比如说：给div当中的p标签的文字变为red 

    1. 	/* div p{} 可以理解为div当中的p标签 */
    2. 		div p{
    3. 			color: aqua;
    4. 		}

    代码练习：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>派生选择器(后代选择器)title>
    6. 	head>
    7. 	<style>
    8. 		/* 给p标签的文字变为red */
    9. 		p{
    10. 			color: red;
    11. 		}
    12. 		/* 给div当中的p标签的文字变为red */
    13. 		  
    14. 		/* div p{} 可以理解为div当中的p标签 */
    15. 		div p{
    16. 			color: aqua;
    17. 		}
    18. 		
    19. 		/*  */
    20. 		div input{
    21. 			background-color: darkkhaki;
    22. 			/* 1和2 input都会改变 */
    23. 		}
    24. 	style>
    25. 	<body>
    26. 		
    27. 		<div>
    28. 			<p>test01p>
    29. 			<p>test02p>
    30. 			
    31. 			<input><br>
    32. 			
    33. 			<h1>
    34. 				
    35. 				<input>
    36. 			h1>
    37. 		div>
    38. 		
    39. 		<p>test03p>
    40. 		<p>test04p>
    41. 	body>
    42. html>

    5、子选择器

    子选择器：代表的就是直接的孩子

    /* 父亲 > 孩子 */

    1. /* 	div > p{
    2. 			color:red;
    3. 		} */
    4. 		/* div的孩子p设置为red*/
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>子选择器title>
    6. 	head>
    7. 	<style>
    8. 		/* 子选择器：直接的孩子 */
    9. 		/* 给p标签的文字变为red */
    10. 		/* p{
    11. 			color: red;
    12. 		} */
    13. 		/* 给div当中的p标签的文字变为red */
    14. 		  
    15. 		/* div p{} 可以理解为div当中的p标签 */
    16. 	/* 	div > p{
    17. 			color:red;
    18. 		} */
    19. 		/* div的孩子p设置为red*/
    20. 		
    21. 		/* 父亲 > 孩子 */
    22. 		div > input{
    23. 			background-color:green;
    24. 		}
    25. 		/* 1input会改变 */
    26. 	style>
    27. 	<body>
    28. 		
    29. 		<div>
    30. 			<p>test01p>
    31. 			<p>test02p>
    32. 			
    33. 			<input><br>
    34. 			
    35. 			<h1>
    36. 				
    37. 				<input>
    38. 			h1>
    39. 		div>
    40. 		
    41. 		<p>test03p>
    42. 		<p>test04p>
    43. 	body>
    44. html>

    6、通用选择器

    /* * {

    color: aqua;

    } */

    /* 当前页面中的所有的文字颜 色都相同 */

    div *{

    color: rebeccapurple;

    }

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>通用选择器title>
    6. 	head>
    7. 	
    8. 	<style>
    9. 		/* * {
    10. 			color: aqua;
    11. 		} */
    12. 		/* 当前页面中的所有的文字颜 色都相同 */
    13. 		div *{
    14. 			color: rebeccapurple;
    15. 		}
    16. 	style>
    17. 	<body>
    18.  
    19. 		<div>
    20. 			<p>test01p>
    21. 			<p>test02p>
    22. 			
    23. 			<input><br>
    24.  
    25. 			<h1>
    26. 				
    27. 				<input>
    28. 			h1>
    29. 		div>
    30.  
    31. 		<p>test03p>
    32. 		<p>test04p>
    33. 		
    34. 		<span>你好span><br>
    35. 		<h2>中国h2>
    36. 		
    37. 	body>
    38. html>

     7、群组选择器

    /**

    * 需求：

    * input、h2、span的文字

    * color：red

    */

    1. 	input,span,h2{
    2. 				color: chartreuse;
    3. 			}
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>群组选择器title>
    6. 		<style>
    7. 			/**
    8. 			 * 需求：
    9. 			 * input、h2、span的文字
    10. 			 * color：red
    11. 			 */
    12. 		/* 	input{
    13. 				color: red;
    14. 			}
    15. 			h2{
    16. 				color:red;
    17. 			}
    18. 			span{
    19. 				color: red;
    20. 			} */
    21. 			input,span,h2{
    22. 				color: chartreuse;
    23. 			}
    24. 		style>
    25. 	head>
    26. 	<body>
    27. 		<div>
    28. 			<p>test01p>
    29. 			<p>test02p>
    30. 			
    31. 			<input><br>
    32. 		
    33. 			<h1>
    34. 				
    35. 				<input>
    36. 			h1>
    37. 		div>
    38. 		
    39. 		<p>test03p>
    40. 		<p>test04p>
    41. 		
    42. 		<span>zhongspan>
    43. 		<h2>guoh2>
    44. 	body>
    45. html>

    8、相邻选择器

    p+h1{

    background-color: aqua;

    }

    /* 代表的是和p标签相邻的h1标签 */

    对h1起作用，对p不起作用

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>相邻选择器title>
    6. 		<style>
    7. 			p+h1{
    8. 				background-color: aqua;
    9. 			}
    10. 			/* 代表的是和p标签相邻的h1标签 */
    11. 		style>
    12. 	head>
    13. 	<body>
    14. 		<h1>你好h1>
    15. 		
    16. 		
    17. 		<p>我爱你p>
    18. 		<h1>他h1>
    19. 		
    20. 		<p>ni1p>
    21. 		<h1>大家h1>
    22. 	body>
    23. html>

     9、属性选择器

    [属性] 也可以包含属性值

    [name]{

    background-color: aquamarine;

    }

    或者

    /* [type="text"]{

    color: red;

    } */

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>属性选择器title>
    6. 	head>
    7. 	<style>
    8. 		/**
    9. 		 * [属性] 也可以包含属性值
    10. 		 */
    11. 		/* [type]{
    12. 			color: red;
    13. 		} */
    14. 		/* [type="text"]{
    15. 			color: red;
    16. 		} */
    17. 	/* 	[type]{
    18. 			color: red;
    19. 		} */
    20. 		/* 标签上写有name属性的元素 */
    21. 		[name]{
    22. 			background-color: aquamarine;
    23. 		}
    24. 	style>
    25. 	<body>
    26. 		
    27. 		<input name="lname" id="">
    28. 		<br>
    29. 		<input name="rname" id="">
    30. 		<br>
    31. 		<input type="passwd"  id="">
    32. 		<br>
    33. 		<input type="text"  id="">
    34. 		<br>
    35. 		<input type="button" id="" value="按钮">
    36. 		<br>
    37. 	body>
    38. html>

     

  • 相关阅读:
    形式化定义软件动态更新
    兄弟机床联网
    二十三种设计模式全面解析-当你的对象需要知道其他对象的状态变化时，观察者模式是你的救星！
    RK3568 RTL8821cs适配 WPA3连接 与 WPA3热点配置
    [管理与领导-96]：IT基层管理者 - 扩展技能 - 5 - 职场丛林法则 -10- 七分做，三分讲，完整汇报工作的艺术
    mybatis-plus批量更新太慢，如何解决？
    EventLoop
    mybatis collection解析以及和association的区别
    学习操作系统之外存和内存的区别
    1704. 判断字符串的两半是否相似
  • 原文地址：https://blog.csdn.net/qq_62552630/article/details/128034641