---
# System prepended metadata

title: 選擇器
tags: [Html 選擇器]

---

# 選擇器
###### 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)


