css选择器总结

于 2021-04-12 15:55:45 发布
阅读量795 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： # css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chen__cheng/article/details/115625980

css选择器总结

1. 选择器（选择符）的作用

将不同的标签选择出来

2. 选择器分类
2.1 基础选择器

  1. 标签选择器 不能差异化设置，只能全部选择

  2. 类选择器

    .class {}
    1. 多类名 一个标签指定多个类名
      1. 场景
        1. 相同样式放在一起进行设置

  3. id选择器

    #id {}
    1. Id属性唯一，为某一标签设定特定的属性

  4. 通配符选择器

    1. * 选取页面中所有元素，包括html body div span p …所有元素

    2. 特殊场景才使用

      * {
margin: 0;
padding: 0;
}
2.2 复合选择器
1.结构选择器

  1. 后代选择器

    1. 包含选择器

    2. 选择父元素里面的子元素（包括其所有的后代） 中间用空格隔开 选择的是子孙元素

    3. 语法

      元素1 元素2 {}

    4. 元素可以是任意基础选择器

  2. 子代选择器

    1. 选择某元素最近的一级子元素，即亲儿子元素，而不是孙子级别元素

    2. 语法

      元素1 > 元素2 {}

  3. 全部兄弟选择器

    1. 选择当前元素的兄弟元素（所有符合要求的兄弟元素）

    2. 语法

      元素 ~ 元素 {}

  4. 相邻兄弟选择器

    1. 选择当前元素紧挨着的兄弟元素（只选择右边紧挨着的.如果右边没有符合要求的，则不显示）

    2. 语法

      元素1 + 元素2 {}

  5. 并集选择器

    1. 用于对多组标签的某个样式进行集体定义

    2. 选择器可以是多种复合选择器等

    3. 语法规范，每个选择器之间用逗号进行分隔，最后一个选择器不需要用逗号，且竖着写

    4. 例子

      div,
p,
ul li {
    color: red;
}
2.属性选择器

通过对某一类标签中属性（包括自定义以及内置）以及属性值的限定来进一步选择。其中不乏对标签中属性与或运算，属性值的筛选。

  1. 属性的或运算

    只要当前标签有该属性，则被选中

    元素[属性] {

}
h1[index] {}

<h1 index>1</h1> // 被选中
<h1></h1>

  2. 属性的并运算

    只有当前标签同时拥有属性，则被选中

    元素[属性][属性] {

}
h1[index][id] {}

<h1 index id>1</h1> // 被选中
<h1 index></h1>

    1. 属性值的内容筛选

      只有当前标签的属性值满足给定要求方可选中

      元素[属性="要求"] {

}
h1[index="ind"] {}

<h1 index="ind">1</h1> // 被选中
<h1 index="1"></h1>

      属性限定：前缀限定^：表示只有当属性值以某个字符串开头方可选中

      元素[属性^="要求"] {

}
h1[index^="ind"] {}

<h1 index="ind">1</h1> // 被选中
<h1 index="index"></h1> // 被选中
<h1 index="1"></h1>

      属性限定：后缀限定$：表示只有当属性值以某个字符串结尾方可选中

      元素[属性$="要求"] {

}
h1[index$="ind"] {}

<h1 index="ind">1<h1> // 被选中
<h1 index="nnind"><h1> // 被选中
<h1 index="1"></h1>

      属性限定：*：表示只要属性值中含有给定的字母串则被选中

      元素[属性*="要求"] {

}
h1[index*="ind"] {}

<h1 index="ind">1<h1> // 被选中
<h1 index="xxindxx">1<h1> // 被选中
<h1 index="1"><h1>

      属性限定：~：表示只有属性值中含有一个给定的词（一个词）则被选中

      元素[属性~="要求"] {

}
h1[index~="ind"] {}

<h1 index="ind">1<h1> // 被选中
<h1 index="xx ind xx"></h1> // 被选中 原因：一个词的界定为左右两边为空格
<h1 index="xxindxx">1<h1> 
<h1 index="1"><h1>

      属性限定：|：只有属性值为给定的字符串或者为字符串采用-拼接，方可匹配

      元素[属性|="要求"] {

}
h1[index|="ind"] {}

<h1 index="ind">1<h1> // 被选中
<h1 index="indx-com">1<h1> // 被选中
<h1 index="indx.com">1<h1>
<h1 index="1"><h1>
3.伪类选择器

适用于：对于对元素不同状态以及对不存在元素进行设置。

  1. 链接伪类选择器

    1. a:link 选择没有被点击的链接

    2. a:visited 选择已经被访问过的链接

    3. a:hover 鼠标经过链接时的状态，也可以对input进行设置input:hover

    4. a:active 当鼠标按下但是没有跳转时的状态，也可以对input进行设置input:active

    5. 为了保证设置有效（也就是一个动作的顺序问题），声明顺序必须为：a:link a:visited a:hover a:active

    6. 实际开发中的写法

      1. 直接写a标签对其设置默认样式

      2. 再写a:hover对其设置经过样式即可

      3. a {
    color: #000;
    text-decoration: none;
}

a:hover {
    color: #0000ff;
    text-decoration: underline;
}

  2. :focus伪类选择器

    1. 用于选取获得焦点的表单元素

    2. 用法：注意：如果同时设置了active和focus，则需要注意先后顺序，focus > active

      input:focus {
	background-color: red;
}

  3. 目标伪类选择器:target

    应用场景：当定位锚点的时候，对定位到锚点内容进行样式处理

    # html
<main>
    <a href="#go">点击去Go</a>
    <div></div>
    <div id="go">
        你过来就会变红
    </div>
</main>

#style
  div {
            height: 800px;
            border: 1px solid black;
        }

        div:target { // 点击之后的目标会变红（永久变红）
            color: red;
        }

  4. 根伪类选择器:root

    作用类似于直接选择html标签元素

    :root {
    color: red;// 所有的元素都被选择为红色
}

  5. 空选择器:empty

    当某个标签元素内容为空时，但是不想显示该标签，则可以使用这个属性将其选择出来，并进行相关的样式处理

    <ul>
  <li>1</li>
  <li>2</li>
</ul>
<style>
   li {
	border: 1px solid red;
 }
        
 li:empty {
   display: none;
 }
</style>

  6. 结构伪类选择器

    1. class_01

      E与伪类选择器加空格与不加空格的区别在于

      • 加空格类似于后代选择器
      • 不加空格类似于当前元素条件限制
      • 也即采取自由组合形式

    2. E :first-child选择E元素中子元素的第一个，也包括如果子元素中有嵌套情况，也选择子元素中包括的第一个元素

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css基础选择器</title>
    <style>
        article :first-child { // 中间有空格存在
            color: red;
        }
    </style>
</head>
<body>
<main>
    <article>
        <h1>第一个</h1> // 被选中
        <aside>
            <h1>第二个</h1> // 被选中
        </aside>
        <h1>第三个</h1> // 不被选中
    </article>
</main>
</body>
</html>

      但是需要注意的是，如果元素与:first-child之间没有空格的话，则类似于 * article:first-child，选择任意元素中第一个article子元素**，其他类似**

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css基础选择器</title>
    <style>
        article:first-child { // 没有空格
            color: red;
        }
    </style>
</head>
<body>
<main>
    <div>
        <article> // 该标签被选中，因此该标签下的所有元素继承了color属性
            <h1>第一个</h1>
            <aside>
                <h1>第二个</h1>
            </aside>
            <h1>第三个</h1>
        </article>
    </div>
    <div>
        <article> // 该标签被选中，因此该标签下的所有元素继承了color属性
            <h1>第四个</h1>
        </article>
    </div>
</main>
</body>
</html>

      • 如果仅仅是对最近的子元素进行选择：article>:first-child此时加不加空格都是选择所有article标签中最近一级子元素

      • 如果需要选择的子元素的类型：article h1:first-child，此时只有article的最近一级子元素为h1才能被选中

    3. :nth-child()序号从1开始，odd(奇数)、even(偶数)

      :nth-child(n)：n是0到无穷大的数，可以用其选择偶数(2n)，奇数(2n-1)，前2个数(-n+2)等

    4. :first-of-type：选择同一类型的第一个元素

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css基础选择器</title>
    <style>
        // 选择article中所有子元素中
        article :first-of-type {
            color: red;
        }
    </style>
</head>
<body>
<main>
    <div>
        <article>
            <h1>第一个</h1> // 被选中
            <aside>
                <h1>第二个</h1> // 被选中
            </aside>
            <h1>第三个</h1>
        </article>
    </div>
    <div>
        <article>
            <h1>第四个</h1> // 被选中
        </article>
    </div>
</main>
</body>
</html>

  7. 唯一子元素:only-child

    选择子含有一个子元素的元素

  8. 排除选择器：:not()排除满足要求的元素，可以是基本选择器、复合选择器

4.争对表单的伪类选择

根据表单的属性，来选择当前元素是否满足该属性，满足则被选中。

  • 禁用/不禁用

        <style>
        /*选择出禁用的表单元素*/
       input:disabled {
           border: 1px solid yellowgreen;
       }
        /*没有被禁用的表单元素*/
        input:enabled {
            border: 1px solid gray;
        }
    </style>
<input type="text" disabled>
<input type="text">

  • 必填项和不必填项

    <style>
    // 必填项选中
       input:required {
           border: 1px solid red;
       }
	// 不必填选项选中
        input:optional {
            border: 1px solid blue;
        }
</style>
<input type="text">
<input type="text" required>

  • 被选中

    <style>
       input:checked+label {
           border: 1px solid green;
       }
</style>
<input id="gril" type="checkbox">
<label for="gril">女</label>
<input id="boy" type="checkbox" checked>
<label for="boy">男</label>
5.针对于文本的伪类选择器

  • 选择元素文本中某一个文字/某一行文字

    p:first-letter {
    color: red;
  }

// 选择的一行会随着一行数据的变化而变化
p:first-line {
    color: green;
  }
</style>
<p>积极积积极积极积极积极积极急急急积极积极积极积极积极积极积极积极</p>

  • 在某元素之后/之前添加内容:after :before类似于在当前元素之后添加了一个标签，且可以对新增加的内容设置样式

    <style>
        div {
            border: 1px solid black;
            width: 200px;
        }
        div>input[type="text"] {
            border: none;
            outline: none;
            width: 120px;
        }
        div>input[type="text"]+span:after {
            content: "qq.com";
            color: red;
        }
        div>input[type="text"]+span:before {
            content: "QQ号";
        }
</style>
<div>
    <input type="text">
    <span></span>
</div>
    3.选择器汇总
分类选择器说明
基础选择器通配符选择器：*选择页面所有元素
标签选择器：div选择对应标签
id选择器：#center选择id符合要求的元素
类选择器：.center选择符合class要求的元素
结构选择器后代选择器：div span选择div元素的子孙元素span
子代选择器：div>span选择div元素最近一级的span元素
全部兄弟选择器：div~span选择div元素所有兄弟元素span
兄弟选择器：div+span选择div元素右边最近一级兄弟元素
属性选择器：div[id^=“en”][index=“1”]属性id以en开头且index为1的选择div标签，其中^可以替换为：$、*、~、|
伪类选择器链表伪类选择器a:link a:visited a:hover a:active（注意顺序问题）
基于表单的伪类选择器input:focus(获取焦点) input:disabled(禁用)等
针对于文本的伪类选择器div:first-letter(div文本中的第一个字符) div:after div:before div:first-line(div文本中的第一行)
其他伪类选择器：选择头部/尾部:first-child :last-child :first-of-type :last-of-type
其他伪类选择器：从头选到尾:nth-child(n)（其中n大于等于0直到无穷）:nth-last-child(n) 两则区别在于一个从头开始数，一个从尾
其他伪类选择器：空选择器:empty 选择内容为空的元素
其他伪类选择器：排除选择器:not() 括号内为任意组合选择器，只要符合括号内的选择都不选择
其他伪类选择器：目标选择器，根选择器:target(目标选择器，一般跟瞄点使用) :root(根选择器，作用类似于html)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值