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

属性选择器

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

<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

属性选择器，即为我们可以写定属性，之后让对应的标签去对应，要是标签内部的属性恰好与这个选择器的类型相同，则表示这个标签使用这个选择器，如同这段代码中，由于选择器指定了要作用的标签属性：标签名为input，类型为password。

效果：

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
  a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

效果：

伪类（pseudo-classes）

不基于标签和属性定位元素

伪类类别

状态伪类
结构性伪类

状态伪类

<a href="http://example.com">
  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

:focus {
  outline: 2px solid orange;
}
</style>

效果：

这个案例是状态伪类，代表着这个a链接的不同状态，我们可以对链接的不同状态，设置不同的css样式。如：:link: 正常，未访问过的链接

:visited: 用户已访问过的链接

:hover: 当用户鼠标放在链接上时

:active:链接被点击的那一刻 :focus:鼠标点击输入框后，输入框的变化，即聚焦在输入框了

结构伪类

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

效果：

结构伪类意为，当有多个相同标签名时，我们可以通过结构伪类对DOM树上的节点进行针对性的添加属性，如本代码中，我们可以指定:first-child来对ul标签的第一个li标签添加样式

走进前端技术栈CSS3 | 青训营笔记

属性选择器

伪类（pseudo-classes）

伪类类别

状态伪类

结构伪类