• ヾ(⌐ ■_■)— HTML-CSS选择器

    目      录

    1.类选择器 （class选择器）

    2.id选择器

    3.标签名选择器

    4.包含选择器

    5. 并列选择器

    6.通配符选择器

    7.伪类选择器

    8.选择器的优先级

    9.子选择器

    10.相邻选择器

    11.相邻所有选择器

    12.属性选择器

    CSS 选择器是用于“查找”（或选取）要设置样式的 HTML 元素的。

    1.类选择器 （class选择器）

            class选择器就是在HTML标签上设置属性class，再自己命名一个属性值。然后在css代码中去选中这个属性并且设置样式。在css代码中的格式是    .属性值{ 设置样式代码 }   。注意：class 选择器前面的小数点不能忘记哦！并且  一个标签是可以设置多个类名  的哦，可以方便单独设置样式！class属性值一样的话，那就归为一类，也就是选中这一类的设置样式。

    1. <style type="text/css">
    2. 				.one{
    3. 					color: #FF0000;
    4. 				}
    5. 				.tow{
    6. 					font-size: 50px;
    7. 				}
    8. 				.three{
    9. 					font-size: 100px;
    10. 				}
    11. 			style>
    12. 		head> 
    13. 		<body>
    14. 			<h1  class="one">1111111111111111h1>
    15. 			<span  class="tow">2222222222222222span>
    16. 			<h3  class="tow">3333333333333333h3>
    17. 			<span class="tow three">4444444444444444span>
    18. 		body>

    2.id选择器

            id选择器就是在HTML标签上设置属性id，再自己命名一个属性值。然后在css代码中去选中这个属性并且设置样式。在css代码中的格式是   #属性值{ 设置样式代码 }   。注意：id 选择器前面的# 不能忘记哦！并且一个标签是只能设置一个，id一次也只能选择一个， id是唯一的！

    1. <style type="text/css">
    2. 				#d1{
    3. 					color: #FF0000;
    4. 					height: 200px;
    5. 					width: 200px;
    6. 					background-color: #7FFFD4;
    7. 				}
    8. 				#d2{
    9. 					color: yellow;
    10. 					height: 300px;
    11. 					width: 300px;
    12. 					background-color: gold;
    13. 				}
    14. 			style>
    15. 		head>
    16. 		<body>
    17. 			
    18. 			<div id="d1">
    19. 				11111111111
    20. 			div>
    21. 			<div id="d2">
    22. 				22222222222
    23. 			div>
    24. 		body>

    3.标签名选择器

            标签名选择器不需要在HTML标签上设置属性什么的，直接在css代码中去选中标签名就可以了。在css代码中的格式是   标签名{ 设置样式代码 }  。注意：标签选择器一但选中一类标签，那么HTML中的所有这个标签都会被选中。

    1. <style type="text/css">
    2. 				h1{
    3. 					background: yellow;
    4. 				}
    5. 				button{
    6. 					background-color:red ;
    7. 				}
    8. 				div{
    9. 					color: aqua;
    10. 				}
    11. 			style>
    12. 		head>
    13. 		<body>
    14. 			<h1>1111111111111111111h1>
    15. 			<h1>2222222222222222222h1>
    16. 			<div id="">
    17. 				33333333333333333333333
    18. 			div>
    19. 			<button type="button">按钮button>
    20. 		body>

    4.包含选择器

    包含选择器就是综合使用id，class选择器以及标签选择器，来选中某些标签包含内部的标签。格式是一层一层的递进选中。

    1. <style type="text/css">
    2. 			#d1 ul li a{
    3. 				color: #00FFFF;
    4. 			}
    5. 			
    6. 			#d2 ul li a{
    7. 				color: red;
    8. 			}
    9. 		style>
    10. 	head>
    11. 	<body>
    12. 		<div id="d1">
    13. 			<ul>
    14. 				<li><a href="#">11111a>li>
    15. 				<li><a href="#">2222a>li>
    16. 				<li><a href="#">33333a>li>
    17. 				<li><a href="#">44444a>li>
    18. 				<li><a href="#">55555a>li>
    19. 			ul>
    20. 		div>
    21. 		
    22. 		<div id="d2">
    23. 			<ul>
    24. 				<li><a href="#">11111a>li>
    25. 				<li><a href="#">2222a>li>
    26. 				<li><a href="#">33333a>li>
    27. 				<li><a href="#">44444a>li>
    28. 				<li><a href="#">55555a>li>
    29. 			ul>
    30. 		div>
    31. 		<a href="#">一个连接a>
    32. 	body>

    5. 并列选择器

    并列选择器就是综合使用id，class选择器以及标签选择器，来选中某些需要设计成相同样式的标签。格式是  选中之后拿逗号隔开。

    1. <style type="text/css">
    2. 			h1,#myh,h5{
    3. 				color: red;
    4. 				font-size: 50px;
    5. 			}
    6. 			
    7. 		style>
    8. 	head>
    9. 	<body>
    10. 		<h1>222222222222222h1>
    11. 		<h3 id="myh">3333333333333333333333333333h3>
    12. 		<h5>5555555555555555555555555555h5>
    13. 	body>

    6.通配符选择器

    通配选择器就是选中某个范围内的标签都是这样的样式！如通配全局的背景，格式是   *{ 设置样式代码 }。

    1. <style type="text/css">
    2. 		/*全局通配*/
    3. 			 * {
    4. 				background-color: #00FFFF;
    5. 				
    6. 			}
    7. 			/* 局部通配 */
    8. 			div ul *{
    9. 				background-color: green;
    10. 			}
    11. 			div ol *{
    12. 				background-color: yellow;
    13. 			}
    14. 			
    15. 		style>
    16. 	head>
    17. 	<body>
    18. 		<div id="">
    19. 			<ul>
    20. 				<li>111111111111111111li>
    21. 				<li>111111111111111111li>
    22. 				<li>111111111111111111li>
    23. 				<li>111111111111111111li>
    24. 			ul>
    25. 			<ol>
    26. 				<li>2222222222222222222222li>
    27. 				<li>22222222222222222li>
    28. 				<li>222222222222222222222li>
    29. 			ol>
    30. 		div>
    31. 	body>

    7.伪类选择器

            针对a标签的四种状态，提供了四种伪类选择器，并且这样操作可以去掉a标签默认的下划线哦。  ●未连接  a:link   ●已经访问链接  a:visited   ●进入链接  a:hover   ●激活（按下）状态  a:active（其中的hover 和active 可以用于其他控件）。

    1. <style type="text/css">
    2. 		/* 链接状态 */
    3. 			a:link{
    4. 				color: #FF0000;
    5. 				/* 可以去掉a标签默认的下划线 */
    6. 				text-decoration: none;
    7. 			}
    8. 			/* 鼠标悬浮 */
    9. 			a:hover{
    10. 				color: #00FFFF;
    11. 				text-decoration: none;
    12. 				font-size: 20px;
    13. 			}
    14. 			/* 鼠标按下 */
    15. 			a:active{
    16. 				color: #FFD700;
    17. 				text-decoration: none;
    18. 			}
    19. 			/* 链接访问过后 */
    20. 			a:visited{
    21. 				color: skyblue;
    22. 				text-decoration: none;
    23. 			}
    24. 		style>
    25. 	head>
    26. 	<body>
    27. 		<a href="#">连接状态a>
    28. 		<a href="#">鼠标移上状态a>
    29. 		<a href="#">鼠标按下状态a>
    30. 		<a href="index.html">连接访问过后的状态a>
    31. 	body>

    8.选择器的优先级

    在页面中同一个html元素有不同的选择器定义样式的。这样就存在了谁先谁后。具体的优先级如下：

    !important>内联样式 > id 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

    9.子选择器

    意思是父级标签里面所有的子标签都被会选中，但是需要注意的是对孙子标签是不起作用的。也就是子标签下面的孙子标签没有被选中。格式是  选中父标签>子标签{ 设置样式代码 }。

    1. <style type="text/css">
    2. 				#fu {
    3. 					color: #0000FF;
    4. 				}
    5. 	
    6. 				/* 子选择器 */
    7. 				#fu>div {
    8. 					color: yellow;
    9. 				}
    10. 	
    11. 				#fu>ul {
    12. 					color: #008000;
    13. 				}
    14. 	
    15. 				#fu>* {
    16. 					background-color: #FF0000;
    17. 				}
    18. 	
    19. 				ol>li {
    20. 					color: #0000FF;
    21. 				}
    22. 	
    23. 				ol>li>ul {
    24. 					color: red;
    25. 				}
    26. 			style>
    27. 		head>
    28. 		<body>
    29. 	
    30. 			<div id="fu">
    31. 				发发发发发发发发发
    32. 				<div id="zi">
    33. 					哈哈哈哈哈哈哈哈
    34. 				div>
    35. 				<ul>
    36. 					<li>我爱javali>
    37. 					<li>我爱javali>
    38. 					<li>我爱javali>
    39. 					<li>我爱javali>
    40. 				ul>
    41. 	
    42. 			div>
    43. 			<ol>
    44. 				<li>
    45. 					<ul>
    46. 						<li>我爱javali>
    47. 						<li>我爱javali>
    48. 						<li>我爱javali>
    49. 					ul>
    50. 				li>
    51. 				<li>我爱javali>
    52. 				<li>我爱javali>
    53. 				<li>我爱javali>
    54. 			ol>
    55. 		body>

    10.相邻选择器

            相邻选择器格式是   标签名（选择器选中）+标签名（选择器选中）{ 设置样式代码 }。  以div+p{ 设置样式代码 }为例，意思就是选择跟我 div 同级的下一个挨着的p元素(单个的p 后面、再跟p是选不中的) 如果在div 和p 之间隔着一个元素 那也是选不中的。

    1. <style type="text/css">
    2. 			#d1 {
    3. 				height: 200px;
    4. 				width: 200px;
    5. 				background-color: green;
    6. 			}
    7. 			#d1+div {
    8. 				height: 200px;
    9. 				width: 200px;
    10. 				background-color: yellow;
    11. 			}
    12.  
    13. 			#d1+#d2+div {
    14. 				height: 200px;
    15. 				width: 200px;
    16. 				background-color: gold;
    17. 			}
    18.  
    19. 			#d1:hover+div {
    20. 				background-color: grey;
    21. 			}
    22. 		style>
    23. 	head>
    24. 	<body>
    25. 		<div id="d1">
    26. 			111111111111111
    27. 		div>
    28. 		<div id="d2">
    29. 			22222222222222
    30. 		div>
    31. 		<div id="d3">
    32. 			333333333333333333
    33. 		div>

    11.相邻所有选择器

            相邻所有选择器格式是   标签名（选择器选中）~标签名（选择器选中）{ 设置样式代码 }。 以div~p{ 设置样式代码 }为例，意思是 选中 div 后面所有同级的p元素 即使多个p 元素 之间有隔着的其他元素 也是能选中p元素。与上面的相邻选择器用法相似。

    12.属性选择器

    属性选择器就是只要标签中有这个属性，那么就都会被选中。格式是  标签名[属性]{ 设置样式代码 }。  我们以a[title] { 设置样式代码 }来说明以下的几类：

    1. <style type="text/css">
    2. 			[align] {
    3. 				background: red;
    4. 			}
    5.  
    6. 			h1[align] {
    7. 				color: aqua;
    8. 			}
    9.  
    10. 			h1[align='left'] {
    11. 				font-size: 2px;
    12. 			}
    13. 			input[type^='te']{
    14. 				border: 1px #FF0000  solid;
    15. 			}
    16. 		style>
    17. 	head>
    18. 	<body>
    19.  
    20. 		<h1 align="center">标题h1>
    21. 		<h2 align="left">8888888888h2>
    22. 		<input type="text" id="" value="哈哈哈哈哈哈哈哈" />
    23. 	body>

    (小编也在努力学习更多哟!以后再慢慢分享的啦!)

    希望对友友们有所帮助!!!!

     

  • 相关阅读:
    最接近的三数之和
    华为“仓颉”不是中文编程，中文编程早有所属，势如破竹
    生成带分表和水印的excel压缩文件
    ceph简介
    【五】【算法分析与设计】双指针的初见
    JAVA七种常见排序算法
    Go程序设计语言 学习笔记 第十三章 低级编程
    基于SSM的图书进销存管理系统
    多线程进阶篇
    2022做跨境为什么要首选Lazada和shopee，现在入驻会面临哪些挑战和机遇？
  • 原文地址：https://blog.csdn.net/naoguoteng/article/details/127415628