# 選擇器 ###### tags: `Html 選擇器` ### 方式一：直接寫在標籤內 ```htmlembedded= <!--需求1：分别定义两个div、span 标签，分别修改每个div 标签的样式为：边框1 个像素，实线，红色。--> <div style="border: 1px solid red;height: 100px;width: 100px;">div 标签1</div> <div style="border: 1px solid red;">div 标签2</div> <span style="border: 1px solid red;">span 标签1</span> <span style="border: 1px solid red;">span 标签2</span> <!--问题：这种方式的缺点？ 1.如果标签多了。样式多了。代码量非常庞大。 2.可读性非常差。 3.Css 代码没什么复用性可方言。--> ``` ![](https://i.imgur.com/IHGJ2TX.png) ### 方式二：在上方為每種標籤設定 ```htmlembedded= <!--style標籤專門來定義css樣式代碼--> <style type="text/css"> /* 需求1：分别定义两个div、span 标签，分别修改每个div 标签的样式为：边框1 个像素，实线，红色。*/ div{ border: 1px solid red; } span{ border: 1px solid red; } </style> </head> <body> <!--需求1：分别定义两个div、span 标签，分别修改每个div 标签的样式为：边框1 个像素，实线，红色。--> <div>div 标签1</div> <div>div 标签2</div> <span>span 标签1</span> <span>span 标签2</span> <!--问题：这种方式的缺点。 1.只能在同一页面内复用代码，不能在多个页面中复用css 代码。 2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。--> ``` ![](https://i.imgur.com/81Ew76b.png) ### 方式三：新建css檔存放標籤狀態，並用link引用 ```htmlembedded= <!--link標籤專門用來引入css樣式代碼--> <link rel="stylesheet" type="text/css" href="1.css"> ``` #### css檔 ```htmlembedded= div{ border: 1px solid red; } span{ border: 1px solid red; } ``` ![](https://i.imgur.com/ryPN9gZ.png)