CSS选择器 - jiabao123

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

发表于 2022-05-10 09:26 jiabao123 阅读(19) 评论(0) 编辑收藏举报