从零开始的自学之路——css选择器

  <div>
      <p><span>p里面的span</span></p>
      <span>div里的span</span>
    </div>
    <h1>首要素</h1>
    <p class="p1">这是第一行</p>
    <p class="p1 hello">这是第二行</p>
    <p class="p1">这是第三行</p>
    <p class="p1">这是第四行</p>
    <p id="p1">这是第五行</p>
    <p>这是第六行</p>
    <p class="p2">这是第七行</p>
    <span class="p2">这是span</span>复制代码

• 通用选择器，选择所有元素

 * {
        font-size: 20px;
      }复制代码

• 元素选择器，直接写标签名即可，选中所有指定元素

h1 {
       color: violet;
      }复制代码

• id选择器，标签名之前加#号，对应唯一id即可

 #p1 {
        color: brown;
      }复制代码

• class选择器，加 “.” 后接对应的class

.p1 {
        color: green;
      }

.hello {
        color: blanchedalmond;
      }复制代码

• 集选择器，元素，id，class选择器都可以一起被选择，使用逗号分隔

h1,
#p1,
.p1,
.hello {
     background-color: rgb(44, 228, 228);
      }复制代码

• 子元素选择器

div > span {
          color: blueviolet;
      }复制代码

• 交集选择器

span.p2 {
        color: rgb(106, 240, 16);
      }复制代码

                                

• 兄弟元素选择器，选择元素后的一个元素

span + p {
      color: aqua;
    }复制代码

• 属性选择器：指定元素选择：

p[title="3"] {
      font-size: 49px;
    }复制代码

• 属性选择器：开头元素选择：

p[title^="aa"] {
      font-style: oblique;
    }复制代码

• 属性选择器：结尾元素选择

p[title$="c"] {
        color: brown
    }复制代码

• 属性选择器：指定元素选择

p[title*="a"]{
        background-color: blueviolet;
    }复制代码

• 否定选择器

p:not(.io){
    color: lightblue;
}复制代码

• 伪类选择器
• a的伪类选择器 a:link 未访问的链接 a:visited 已访问过的链接 a:hover 鼠标移动到链接 a:active 选定链接 特定顺序 可以和类配合使用 hover,active可以配置任意标签

 p::selection {
      background-color: brown;
    }
    a:visited {
      color: red;
    }
    a:hover {
      color: rgb(250, 6, 197);
    }
    p:hover {
      font-size: 20px;
    }

    p:active {
      font-size: 30px;
    }复制代码

• first-letter 第一个元素 first-line 第一行

p::first-letter {
      font-size: 50px;
    }
    p::first-line {
      background-color: blue;
    }复制代码

转载于:https://juejin.im/post/5ce3e6f6f265da1bb31c0dd8