这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天

选择器Selector

找出页面中的元素，以便给他们设置样式

使用多种方式选择元素

• 按照标签名、类名或id
• 按照属性
• 按照DOM树中的位置

通配选择器

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
* {
  color: red;
  font-size: 20px;
}
</style>

通配选择器，就是使用星号开始的 * ，代表是对整个页面起作用

显示效果：

标签选择器

使用方法就如同它的名字一样，直接以标签名开头，加上大括号即可，里面再写上它的具体属性

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
h1 {
  color: orange;
}
p {
  color: gray;
  font-size: 20px;
}
</style>

显示效果：

id选择器

id选择器虽然在效果上和class选择器没有什么区别，但是在后期我们使用JavaScript和react的时候，需要使用id选择器作为这个标签的唯一标识，这样子找属性的时候会容易些，这也就是这个选择器名字的意思，id，唯一标识，与class类选择器之类的区分开来

<h1 id="logo">
  <img src="https://assets.codepen.io/59477/h5-logo.svg" alt="HTML5 logo" width="48" />
  HTML5 文档
<h1>

<style>
  #logo {
    font-size: 60px;
    font-weight: 200;
  }
</style>

显示效果：

类选择器

<h2>Todo List</h2>
<ul>
  <li class="done">Learn HTML</li>
  <li class="done">Learn CSS</li>
  <li>Learn JavaScript</li>
</ul>
<style>
.done {
  color: gray;
  text-decoration: line-through;
}
</style>

显示效果：

属性选择器

这个选择器目前的使用较少，平常使用的多的还是类选择器与id选择器，别的都是偶尔使用下的

<label>用户名：</label>
<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password" />

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>

显示效果：