00、CSS选择器架构

CSS的选择器分类如下图，其中最最基本的就是基础选择器中的三种：元素选择器、类选择器、id选择器。伪类选择器就是元素的不同行为、状态，或逻辑。然后不同的选择器组合，基于不同的组合关系，产生了6中组合关系选择器。
CSS选择器 - 图1

01、通配选择器：*{}

针对所有HTML标签全部适用，选择器名=星号*（通配符），一般只做初始化使用。在 CSS3 中，星号 () 可以和命名空间组合使用，如`ns|{}`。

  1. /* 通用选择器，针对所有标签 */
  2. * {
  3.     color: black;
  4.     font-size: 15px;
  5. }

02、元素/标签选择器：元素名{}

用元素名称作为选择器名称，如p、h1、div、img等几乎所有元素名，对作用域内所有该标签元素生效，所以常用来描述某一元素的共性。

  1. hr {
  2.         margin: 32px 5px;
  3. }
  4. h1 {
  5.         background-color: lightblue;
  6.         text-indent: 0.5em;
  7. }

03、类选择器：.类名{}

定义时前面见点.类名，在标签的属性“class”使用该样式。

  1. /* 类名class选择器 */
  2. .particle{
  3.         font-size: 18px;
  4.         font-family: 楷体;
  5. }
  6. .pindent{
  7.         text-indent: 2em;
  8. }
  9. <p class="particle pindent">一段文字内容-section</p>

类选择器可以给所有需要的标签使用，可同时给多个标签使用，应用广泛。

  • 类名不能以数字开头。
  • 同一个标签也可以用多个类选择器，空格隔开。

04、id选择器：#id{}

用标签的id作为选择器名称，加井号“#”，针对作用域内指定id的标签生效，所以只能使用一次。

  • ID是标签的唯一标识，不能重复。如果重复，样式其实是会生效的，但查找元素（document.getElementById(id)）只会返回第一个。
  • ID不能以数字开头。
    1. /* id选择器 */
    2. #a1{
    3.       color:blueviolet;
    4.       font-size: 16px;
    5.       text-decoration-line:underline ;
    6. }

05、属性选择器：选择器[属性]{} css3

元素都有属性，属性选择器是在其他选择器的基础上加上属性的筛选，用来筛选有特定属性、或属性值的元素。这里的属性值匹配是大小写敏感的，结尾加上字符i（li[title*= "a" i]），则会忽略大小写敏感。

选择器 示例 描述
[attr] li[title]``.cli[title] 筛选li元素且有属性title的元素
[attr=value] li[title="a"] 筛选li元素且有属性title的元素，且其属性值相等的元素。
[attr~=value] li[title~="a"] 同上，属性值是值包含，注意是值包含（如多个样式名），不是字符匹配包含，空格隔开的字符也算。
[attr|=value] li[title&#124;="a"] 同上，属性值是a，或开始为a且后面跟连字符-（中划线）
[attr^=value] li[title^= "a"] 属性值字符匹配：开头字符匹配
[attr$=value] li[title$= "a"] 属性值字符匹配：结尾字符匹配
[attr*=value] li[title*= "a"] 属性值字符匹配：包含字符匹配 
  1. <style>
  2.         li[title]{
  3.                 color: red;
  4.         }
  5.         li[title="a"]{
  6.                 font-weight: bold;
  7.         }
  8.         li[title~="a"]{
  9.                 text-decoration: underline;
  10.         }
  11.         li[title|="a"]{
  12.                 text-indent: 2em;
  13.         }
  14.         li[title^= "a"]{
  15.                 text-shadow: 2px 2px 3px black;
  16.         }
  17.         li[title$= "a"]{
  18.                 background: center url(../res/bimg.jpg);
  19.         }
  20.         li[title*= "a"]{
  21.                 background-color: azure;
  22.         }
  23.         .cli[title]{
  24.                 font-style: italic;
  25.         }
  26. </style>
  1. <ul>
  2.         <li title="a">item1：a</li>
  3.         <li title="a b">item2：a b</li>
  4.         <li title="c a b">item2</li>
  5.         <li title="a-b" class="cli">item4：a-b</li>
  6.         <li title="abc" class="cli">item5：abc</li>
  7.         <li title="cab" class="cli">item6：cab</li>
  8.         <li title="cba" class="cli">item7：cba</li>
  9.         <li title="cbA1" class="cli">item8：cbA1</li>
  10. </ul>

image.png

06、伪类选择器

6.1、什么是伪类？-伪类选择器:

伪类是选择器的一种，它用于选择处于特定状态的元素。比如第一个元素、最后一个、奇数序列，或者是当鼠标指针悬浮。和用户交互有关的伪类，也叫用户行为伪类，或叫做动态伪类，比如:link、:active、:visited、:hover。 :::success 伪类的标志是开头为冒号：如a:hover{} ::: | 选择器 | 描述 | | —- | —- | | 交互状态伪类 |
| | :link | 匹配未曾访问的a链接。注意遵循 LVHA 的先后顺序，即：:link — :visited — :hover — :active | | :visited | 匹配已访问a链接 (存在于浏览器的历史纪录) | | :hover | 鼠标悬浮时：当用户悬浮到一个元素之上的时候匹配。 | | :active | 鼠标按下时：在用户激活元素的时候匹配，一般被用在 和