(选择器)-CSDN博客

本文链接：https://blog.csdn.net/Orangeio/article/details/131636376

基础选择器：

标签选择器

一次性把网页所有一类的标签选出来 p div a li

 p {
              color: aqua;
          }

id选择器

身份证号：每个网页不能重复

  <style>
          #box1 {
              color: pink;
          }
      </style>
  </head>
  <body>
      <div id="box1">我是盒子一</div>
  </body>

类选择器

class人名

 <style>
          .box2 {
              color: blueviolet;
          }
      </style>
  </head>
  <body>
      <div class="box2">我是盒子2</div>
      <div class="box2">我是盒子3</div>
  </body>

通配符选择器*
能匹配页面中所有的元素

基本语法格式：*{ 属性1：属性值1；属性2：属性值2；}

包含选择器：

子代选择器 ul>li 亲生儿子

<ul>
     <li></li>-----能找到
    <ul>
        <li></li>-----找不到
    </ul>
</ul>

后代选择器 ul li 能找到ul之后所有li

  <style>
          /* 子代选择器   选中亲生儿子*/
          .a>li {
              background-color: pink;
          }
  
          /* 后代选择器 找到后代所有要找的元素*/
          .a li {
              color: blueviolet;
          }
      </style>
  </head>
  <body>
  
      <ul class="a">
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <ul>
              <li>2</li>
              <li>3</li>
              <li>4</li>
              <li>5</li>
          </ul>
      </ul>
  </body>

复合(逗号)选择器：

  div,
    p,
    span {
        color: red;
    }

属性选择器：

input[type="password"]{}

*：包含
input[type*="m"]{}

^：以……开头
input[type^="te"]{}

$：以……结尾
input[type$="l"]{}

type*="e"    type值里边包含e
input[type*="e"]{}

<input type="text">
<input type="password">
<input type="email">
<input type="url">

伪类选择器：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时（用的最多）
a:active - 链接被点击的那一刻
cursor-鼠标样式 cell-加号

  a:hover div{
  对div的更改
  }
  
             <a> 
          <div>
          </div>
             </a>
   
  
  a:hover+div{
  对div更改的
  }
  
   <a></a>
  <div></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类选择器</title>
    <style>
        a:link{
            color: pink;
        }
        a:visited{
            color: brown;
        }
        /*:hover 鼠标悬停*/
        a:hover{
            cursor: cell;/*悬停时鼠标为加号*/
            font-size: 40px;
        }
        a:active{
            font-size: 70px;
        }
    </style>
</head>
<body>
    <a href="#">去百度</a>
</body>
</html>

结构伪类选择器：

ul li:nth-child(n)-----匹配父元素第n个子元素，而且是先看子元素后看li
ul li:nth-of-type(n)-----先找li后对应n号元素

请添加图片描述
ul li:nth-child(odd）匹配父元素奇数子元素

ul li:nth-child(even）匹配父元素偶数子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul li:first-child{
            background-color: pink;
        }
        ul li:last-child{
            background-color: green;
        }
        ul li:nth-child(4){
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>
</html>

伪元素选择器：

在li的前面/后面，创建了一个伪装的元素

::before content:“~”
::after content:“~”
::selection

<style>
        ul li::before{
            content: "~";
        }
        ul li::after{
            content: "666";
        }
        input::placeholder{--------表单提示词
            color: red;
        }
        ul li:nth-child(4)::selection{------：：selection选中时
            color: pink;
        }
    </style>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul li::before{
            content: "~";
        }
        ul li::after{
            content: "666";
        }
        input::placeholder{
            color: red;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="sjhfk">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>
</html>

请添加图片描述