CSS基本选择器

1. 通用选择器

  • 选择整个页面的所有元素

  • 格式：*{

    ​ 属性名：属性值;

    ​ }

例：
<!DOCTYPE html>
<html lang="en" xmlns:src>
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
    <style type="text/css">
        *{
            color:red;
        }
    </style>
</head>
<body>
   <p>一段文本</p>
   <p>一段文本</p>
   <p>一段文本</p>
   <div>div</div>
</body>
</html>

2. 标签选择器(元素选择器)*

  • 选择指定元素，格式： 标签名{

    ​ 属性名：属性值；

    ​ }

例：
<!DOCTYPE html>
<html lang="en" xmlns:src>
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
    <style type="text/css">
        div{
            width:100px;
            height:100px;
            background-color:red;
        }
        p{
            background-color:deepskyblue;
        }
    </style>
</head>
<body>
   <p>一段文本</p>
   <p>一段文本</p>
   <p>一段文本</p>
   <div>div</div>
</body>
</html>

3. id选择器*

  • id值最好保持唯一性

  • id定义规则：以字母，数字，下划线，中划线组成，不要以数字开头

  • 选择指定id属性值的元素，格式：#id属性值{
    属性名：属性值；

    ​ }

例：
<!DOCTYPE html>
<html lang="en" xmlns:src>
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
    <style type="text/css">
        #div1{
            background-color: pink;
        }
        #p1{
            background-color: aquamarine;
        }
        #p2{
            background-color: deepskyblue;
        }
        #p3{
            background-color: black;
            color: aliceblue;
        }
    </style>
</head>
<body>
   <p id="p1">一段文本</p>
   <p id="p2">一段文本</p>
   <p id="p3">一段文本</p>
   <div id="div1">div</div>
</body>
</html>

4. class类选择器*

  • 选择指定class属性值的元素，格式：.class属性值{

    ​ 属性名：属性值；

    ​ }

例：
<!DOCTYPE html>
<html lang="en" xmlns:src>
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
    <style type="text/css">
        .div1{
            background-color: pink;
        }
        .p1{
            background-color: aquamarine;
        }
        .p2{
            background-color: deepskyblue;
        }
        .p3{
            background-color: black;
            color: aliceblue;
        }
    </style>
</head>
<body>
   <p class="p1">一段文本</p>
   <p class="p2">一段文本</p>
   <p class="p3">一段文本</p>
   <div class="div1">div</div>
</body>
</html>

5.属性选择器

  • 格式：[属性="属性名"]{}

  • 属性选择器属于高级筛选，用来筛选标记中的属性，如想指定a标签的背景颜色，但是仅应用于target属性的组件

  • 反向选择：如果整个文件中除了<p>标签，其他标签都想应用同一种样式，就采用反向选择":not"

例：
:not(p){color:red;}
筛选方式 含义
[attribute]="value" 属性等于value
[attribute]~="value" 属性包含完整value
[attribute]|="value" 属性等于value或以value-开头
[attribute]^="value" 属性开头有value
[attribute]$="value" 属性最后有value
[attribute]*="value" 属性中出现value
例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
    <style>
        [class="value"]{
            text-align: center;
            margin-top: 50px;
        }
        a[target]{
            background-color:yellow;
        }
    </style>
</head>
<body>
   <p class="value">一段文本</p>
   <p class="value">一段文本</p>
   <a href="1.jpg" title="点一下" target="_top">点一下</a>
   <a href="1.jpg" title="">点一下</a>
</body>
</html>

6. 分组选择器

  • 选择指定选择器中的元素，格式： 选择器1,选择器2,选择器3···{
    属性名：属性值；

    ​ }

<!DOCTYPE html>
<html lang="en" xmlns:src>
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
    <style type="text/css">
        div,#p1,.p2{
            /*边框 边框粗细 边框风格 边框颜色*/
            border: 1px solid red;
        }
    </style>
</head>
<body>
   <p id="p1">一段文本</p>
   <p class="p2">一段文本</p>
   <p class="p2">一段文本</p>
   <div>div</div>
</body>
</html>

选择器优先级：(权重值)

​ id选择器 100 > 类选择器 10 >  元素选择器 1>  通用选择器

组合选择器

1. 后代选择器（以空格分隔）

  • 选择指定元素的所有后代元素

  • 格式： 指定元素（空格）指定元素{

    ​ 属性名：属性值；

    ​ }

    例：
    <!DOCTYPE html>
<html lang="en" xmlns:src>
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
    <style type="text/css">
        .food li{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <h3>食物</h3>
    <ul class="food">
        <li>水果
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
                <li>梨</li>
            </ul>
        </li>
        <li>蔬菜
            <ul>
                <li>白菜</li>
                <li>青菜</li>
                <li>紫菜</li>
            </ul>
        </li>
    </ul>
</body>
</html>

2. 子代选择器（以大于号分隔）

  • 选择指定元素的第一代元素

  • 格式： 指定元素(>)指定元素{

    ​ 属性名：属性值；

    ​ }

  • 多个第一代元素，例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
    <style>
        #box>div:first-child{
            background: deepskyblue;
        }
        #box>div:nth-child(2){
            background: green;
        }
        #box>div:nth-child(3){
            background: #c00315;
        }
        #box>div:last-child{
            background: yellow;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>限期</div>
        <div>组合</div>
        <div>永久</div>
        <div>会员</div>
    </div>
</body>
</html>
    例：
    <!DOCTYPE html>
<html lang="en" xmlns:src>
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
    <style type="text/css">
        .food>li{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <h3>食物</h3>
    <ul class="food">
        <li>水果
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
                <li>梨</li>
            </ul>
        </li>
        <li>蔬菜
            <ul>
                <li>白菜</li>
                <li>青菜</li>
                <li>紫菜</li>
            </ul>
        </li>
    </ul>
</body>
</html>

3. 相邻兄弟选择器（以加号分隔）

  • 选择指定元素相邻的下一个指定元素(只会向下找一个)

  • 格式： 指定元素(+)指定元素{

    ​ 属性名：属性值；

    ​ }

    例：
    <!DOCTYPE html>
<html lang="en" xmlns:src>
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
    <style type="text/css">
        #i1+div{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="i1">
        相邻兄弟选择器1
        <ul>
            <li>123</li>
            <li>456</li>
            <li>789</li>
        </ul>
        </div>
<div>
    相邻兄弟选择器2
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</div>
<div>相邻兄弟选择器3</div>
</body>
</html>

4. 普通兄弟选择器（以波浪号分隔）

  • 选择指定元素后面的同级元素

  • 格式： 指定元素(~)指定元素{

    ​ 属性名：属性值；

    ​ }

例：
<!DOCTYPE html>
<html lang="en" xmlns:src>
<head>
    <meta charset="UTF-8">
    <title>家宝</title>
    <style type="text/css">
        #i1~li{
            color: red;
        }
    </style>
</head>
<body>
  <div>
      普通兄弟选择器
      <ul>
          <li>二狗</li>
          <li id="i1">张三</li>
          <li>李四</li>
          <li>王五</li>
      </ul>
  </div>
</body>
</html>

伪类选择器

css常用的伪类选择器

选择器 说明 示例
E:link 匹配未被单击的E元素 a:link
E:hover 匹配鼠标悬停其上的E元素 a:hover
E:active 匹配被用户激活(在鼠标单击与释放之间发生的事件)时的E元素 a:active
E:visited 匹配已被单击的E元素 a:visited
E:first-child 匹配父元素E的第一个子元素 p:first-child
E:focus 匹配获得当前焦点的E元素
E:enabled 匹配表单中激活的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的单选按钮和复选框元素

伪对象选择器

选择器 说明 示例
E::first-letter 匹配对象的第一个字符，仅作用于块对象 p::first-letter
E::first-line 匹配对象内的第一行，仅作用于快对象 p::first-line
E::before 和content属性一起使用，设置在对象前(依据对象树的逻辑结构)发生内容 p::before
E::after 和content属性一起使用，设置在对象后(依据对象树的逻辑结构)发生内容 p::after
E::selection 此选择器为CSS新增，设置对象被选择时的样式 p::selection