5.HTML&CSS---

HTML

伪类专门用来表示元素的一种的特殊的状态。
比如: 访问过的超链接，普通的超链接，获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
给链接定义样式

正常链接

a:link {
    color: yellowgreen;
}

访问过的连接
浏览器是通过历史记录来判断一个链接是否访问过
由于涉及到用户的隐私问题，所以使用a:visited伪类只能设置字体的颜色

a:visited {
    color: red;
    //font-size: 30px;(不可行)
}

当鼠标悬浮在元素上方时，向元素添加样式

a:hover {
    background-color: black; 
}

向被激活(点击)的元素添加样式

a:active {
    background-color: aqua;
}

:active和:hover 也可以用于其他元素。

向拥有键盘输入焦点的元素添加样式

input:focus {
    background-color: aquamarine;
}

为选中的内容设置样式

span::selection {
    color: orange;
}

伪元素

使用伪元素来表示元素中的一些特殊的位置
1. first-letter
为P中的第一个字符设置样式

p::first-letter {
    color: red;
    font-size: 20px;
}

2. first-line
为P中的第一行设置样式

p::first-line {
    background-color: aqua;
}

3. :before
可以在元素内容的前面插入新内容

p::before {
    content: "位于段落的最前边";
    color: orange;
}

4. :after
可以在元素内容的后面插入新内容

P::after {
    content: "位于段落的最后面";
    color: blueviolet;
}

属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性

<style>
      /* 选取含有指定属性的元素 */
     p[title] {
         background-color: yellow;
     }
     /* 选取含有指定属性值的元素 */
     p[title="hello"] {
         background-color: aqua;
     }
     /* 选取属性值以指定内容开头的元素 */
     p[title^="ab"] {
         background-color: yellowgreen;
     }
     /* 选取属性以指定内容结尾的元素 */
     p[title$="c"] {
         background-color: brown;
     }
     /* 选取属性值包含指定内容的元素 */
     p[title*="c"] {
         background-color: brown;
     }
  </style>
</head>

<body>
  <p title="hello">属性选择器</p>
  <p title="abbc">属性选择器</p>
  <p title="abcde">属性选择器</p>
  <p>属性选择器</p>
  <p title="abc">属性选择器</p>
</body>

5.HTML&CSS---

伪元素

属性选择器

推荐阅读更多精彩内容