首页 / 前端 / 文章

css选择器和优先级详解

前端 潘老师 原 5个月前 (11-26) 125 ℃ (0) 扫码查看

本文主要讲解关于css选择器和优先级详解相关内容，让我们来一起学习下吧！

前言

本文对css常用的选择器做一次详细的总结，包括基本的选择器、伪类选择器、伪元素选择器等。争取一文梳理清楚css常用的选择器。

一、基本选择器

1. 交集选择器

同时符合多个条件的元素，既…又…


<head>
    p.p1#p1{
    color: red;
    font-size: larger;
    }
</head>
<html>
<p class="p1" id="p1">Lorem ipsum dolor.
<p>
</html>

2. 并集选择器

选择符合条件的多个元素


<head>
    p4,p5{
    color: red;
    font-size: larger;
    }
</head>
<html>
<p class="p4">Doloribus, magnam, ullam?</p>
<p class="p5">Consectetur laborum, rerum?</p>
</html>

3. 后代选择器

后代选择器后代 包括儿子、孙子、重孙子,选择指定元素的符合要求的元素

ul li {
    color: green;
}

ul .li3 {
    color: yellow;
}

ul #li4 {
    color: darkmagenta;
}

ul li a.classA {
    color: aquamarine;
}

4. 子代选择器

后面一代（儿子）

div > a {
    color: red;
}

div > p > a {
    color: blue;
}

/*后代+子代*/
div .foot > a {
    color: green;
}

5. 兄弟选择器

兄弟选择器有两种：

  • + 找仅仅相连的第一个兄弟（只能是第一个）
  • ~ 找其后第一个满足条件的兄弟

<head>
    <style>
        /*只选中id = p1*/
        div + p {
            color: #ff4a7b;
        }

        /*选中p p2*/
        span ~ p {

        }

    </style>
</head>

<body>
<div class="div1">Lorem ipsum.</div>
<a href="#">点我</a>
<span></span>
<p id="p">Lorem ipsum.</p>
<div class="div2"></div>
<p id="p1">Aliquid, placeat.</p>
<span id="p2"></span>
<p>Id, suscipit?</p>
</body>

6.属性选择器

  1. [propertyName] 具有propertyName属性的元素
  2. [propertyName=“propertyValue”] 具有propertyName属性，且属性值等于propertyName.
  3. [propertyName^=”pre”] 具有propertyName属性，且属性值以pre 开头。
  4. [propertyName$=”end”] 具有propertyName属性，且属性值以end 结尾。
  5. [propertyName*=”content”] 具有propertyName属性，且属性值包含content。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*具有class 属性的元素 */
        [class] {
            color: orange;
        }
        /*具有class 属性 且值为div1 的元素 */
        [class="div1"] {
            color: red;
        }

        /*具有class 属性 且属性值以my开头 */
        [class^="my"] {
            color: orchid;
        }
        /*具有id 属性 且属性值以end结尾 */
        [id$="end"] {
            color: yellowgreen;
        }

        /*具有id 属性 且属性值包含haha */
        [id*="haha"] {
            color: green;
        }

    </style>
</head>
<body>
<div class="div1">Lorem ipsum.</div>
<div class="div2" id="div2">Facere, nulla!</div>
<div class="my-div" id="div5">Facere, nulla!</div>
<div id="div3">Maxime, praesentium.</div>
<div id="div4-end">Iure, voluptatibus?</div>
<div id="haha1">Lorem ipsum.</div>
<div id="haha2">Architecto, iure!</div>
</body>
</html>

二、伪类选择器

1. 动态伪类

  • ele:link 没有访问过(常用于a标签)
  • ele:visited 访问过(常用于a标签)
  • ele:hover 鼠标覆盖)
  • ele:active (按下鼠标)
  • input:focus(获得焦点，只能用于表单类元素)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器概念</title>
    <style>
        /*记忆*/
        /*lvha 顺序不能乱，后来居上*/
        /* .baidu{
           color: green;
         }*/
        /*像类不是类 元的的特殊状态的一种描述*/
        /*选中没有访问过的*/

        /*注意顺序，后来居上*/
        /*没有访问过*/
        a:link {
            color: green;
        }

        /*访问过*/
        a:visited {
            color: red;
        }

        /*鼠标悬浮*/
        a:hover {
            color: blueviolet;
        }

        /*激活(鼠标按下没有松手)*/
        a:active {
            color: orange;
        }

        /*hover和active是所有元素都有的*/
        span:hover {
            color: aqua;
        }

        span:active {
            color: red;
        }

        /*focus获得焦点，只有表单类元素才有用*/
        select:hover, input:focus {
            background-color: aqua;
        }

    </style>

</head>
<body>
<a href="http://www.baidu.com" class="baidu">百度</a>
<a href="https://www.jd.com">京东</a>
<br>
<br>
<span>
    Lorem ipsum dolor sit amet, consectetur.
</span>
<br>
<br>
<input type="text"/><br><br>
<input type="text"/><br><br>
<input type="text"/><br><br>
<select name="lorem" id="lorem">
    <option value="">Lorem.</option>
    <option value="">Aspernatur.</option>
    <option value="">Eius?</option>
    <option value="">Obcaecati?</option>
</select>
</body>
</html>

2. 结构伪类

所谓结构伪类，就是需要知道dom结构以后才能进行选择的一种选择方式。格式为（element:example）example是element的特征。常见的结构伪类有
child

  • ele:first-child
  • ele:last-child
  • ele:nth-child(an+b)
  • ele:nth-last-child(an+b) 倒数

of-type

  • ele:first-of-type (同类型兄弟（ele类型）的第一个)
  • ele:last-of-type (同类型兄弟（ele类型）的最后一个)
  • ele:nth-of-type(an+b) 类似nth-child(同类型（ele类型）参与计算)
  • ele:nth-last-of-type(an+b)

other

  • ele:only-child 独生子
  • ele:only-of-type 没有同类形状的兄弟
  • ele:empty 空（没有内容）

关于an+b的说明:a,b是常数，n是一个从零开始递增的常数
常见的例子：

  1. 0 或者什么都不写，什么都选不中
  2. n 所有
  3. 5 第五个
  4. 2n 偶数
  5. 2n+1 奇数
  6. -n + 5 前5个
/*div 的后代中选择第一个儿子（不管是谁的儿子，第一就行）*/
<style>
    /*选中id=1、2*/
    div p:first-child {
        color: blue;
    }

    /*id=last*/
    p:last-child {
        color: red;
    }

    /*class=2*/
    p:nth-of-type(2) {
        color: #ff4a7b;
    }

    span:only-child {
        color: #ff4a7b;
    }

    /*没有同类型兄弟的元素*/
    span:only-of-type {
        color: blueviolet;
    }

    /*根元素 html*/
    :root {
        background-color: aliceblue;
    }

    /*div中没有内容 文本空格都不能有*/
    div:empty {
        width: 200px;
        height: 100px;
        background-color: green;
    }
</style>
<body>
<div>
    <p id="1">Lorem ipsum dolor sit.</p>
    <span>
      <p id="2">Lorem ipsum dolor sit.</p>
      <p class="2">Culpa debitis pariatur repellendus?</p>
   </span>
    <p class="2">Lorem ipsum dolor.</p>
    <p id="last">Ab autem exercitationem quisquam?</p>
</div>
</body>

3. UI伪类

常见的UI伪类：

  1. input:checked 选中的复选框
  2. input:disabled 禁用的输入框
  3. input:enabled 课用的输入框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>UI-伪类</title>
    <style>
        /*选中的复选框*/
        input:checked {
            width: 20px;
            height: 20px;
        }

        /*不可用的*/
        input:disabled {
            background-color: gray;
        }

        /*可用的*/
        input:enabled {
            background-color: aqua;
        }
    </style>
</head>
<body>
<div>
    <label>
        <input type="checkbox">
    </label>
    <input type="radio" name="sex" value="W">
    <input type="radio" name="sex" value="M">
    <input type="text">
    <input disabled type="text">
</div>
</body>
</html>

4. 否定伪类

ele:not() 寻找满足条件的ele，但是不能包括ele中去掉的部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>否定伪类</title>
    <style>
        /*div的儿子，但是没有no_red类名*/
        div > p:not(.no_red) {
            color: red;
        }

        /*不能以pre开头*/
        div > p:not([title^="pre"]) {
            color: green;
        }
    </style>
</head>
<body>
<div>
    <div>
        <span>Lorem ipsum dolor sit amet.</span>
    </div>
    <div>
        <span id="span1">Lorem ipsum.</span>
        <p class="p1">Lorem ipsum dolor.</p>
        <p class="p2 no_red">no_red</p>
        <p class="p3">Dolores, ipsam, perspiciatis!</p>
        <p class="p4">In, quia, saepe?</p>
        <p class="p" title="pre-test">Lorem ipsum dolor.</p>
        <p class="p" title="pre-test">Odit, tenetur ullam.</p>
        <p class="p" title="test">Esse, laudantium, sunt.</p>
        <p class="p" title="pre-test"> Delectus, dolorum fugit?</p>
    </div>
</div>
</body>
</html>

5. 目标伪类

目标伪类和a标签的锚点功能一起使用，可以选中a标签的锚点条状以后的元素。 语法：ele:target

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>目标伪类</title>
    <style>
        div {
            width: 100%;
            height: 500px;
            background-color: aqua;
            margin-top: 10px;;
        }

        div:target {
            background-color: red;
        }

    </style>
</head>
<body>
<div>
    <a href="#div1">第1个</a>
    <a href="#div2">第2个</a>
    <a href="#div3">第3个</a>
    <a href="#div4">第4个</a>
    <a href="#div5">第5个</a>
    <a href="#div6">第6个</a>
    <div class="div1" id="div1">Lorem ipsum.</div>
    <div class="div2" id="div2">Veniam, voluptatum.</div>
    <div class="div3" id="div3">Ipsam, repudiandae.</div>
    <div class="div4" id="div4">Nesciunt, nulla!</div>
    <div class="div5" id="div5">Explicabo, quia.</div>
    <div class="div6" id="div6">Maiores, quod?</div>
</div>
</body>
</html>

6. 语言伪类

选中指定的语言的，默认情况下所有的标签的语言，都继承html标签中的lang的值,比如：


<html lang="zn-CH"></html>

语法:

div:lang(zn-CH)

使用

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <title>语言伪类</title>
    <style>
        h2:lang(en) {
            color: #ff4a7b;
        }

        h2:lang(zn-CH) {
            color: blue;
        }

        h2:lang(test) {
            color: blueviolet;
        }
    </style>
</head>
<body>
<h2 lang="en">Rock study css</h2>
<h2>洛克学习 css</h2>
<h2 lang="test">洛克学习 css</h2>
</body>
</html>

三、伪元素选择器

伪元素选择器可以选中指定元素中的特殊位置进行操作，常见的伪元素选择器 见代码：

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        /*div中的第一个文字*/
        div::first-letter {
            color: #ff4a7b;
            font-size: 20px;
        }

        /*第一行*/
        div::first-line {
            color: blue;
        }

        /*div中的被鼠标选中的文字*/
        div::selection {
            color: red;

        }

        /*input中的提示文字*/
        input::placeholder {
            color: deeppink;
        }

        /*选中p中的开始元素的位置，创建一个子元素 鼠标不能选中￥*/
        p::before {
            content: "￥";
        }

        p::after {
            content: ".00";
        }

    </style>
</head>
<body>

<div lang="en">Rock study css</div>
<div>洛克学习 css</div>
<div lang="test">洛克学习 css Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, unde, voluptatem.
    Accusantium, aliquid aspernatur, dolorum error eum itaque laboriosam minus molestiae officiis perspiciatis qui,
    quisquam quod similique suscipit ut velit!
</div>
<label>
    账号
    <input type="text" placeholder="请输入账号">
</label>
<p>100</p>
<p>200</p>
<p>300</p>
<p>400</p>
<p>500</p>
</body>
</html>

四、选择器的优先级

1.规则

  • 不同的选择器器的优先级中，同一个样式生效的优先级为: 行内> id选择器> 类选择器> 元素选择器> 通配选择器
  • 优先级高的选择器指定一些样式以后，优先级低的优先级指定相同样式虽然不生效，但是其它样式生效，比如：以下代码，字体颜色为红色，大小为20px.
#p1 {
    color: red;
}

.p1 {
    color: chartreuse;
    font-size: 20px;
}

2. 权重的计算方式

格式为 (a,b,c)

  • a: id选择器的个数
  • b: 类、伪类、属性选择器的个数
  • c: 元素、伪元素选择器的个数
    注意：量变不能引起质变，大哥永远是大哥，也就是是说无论多少个类选择器，都比不过一个id选择器。
<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <title>04-元素选择器的优先级</title>
    <style>
        /*!important > 行内> id选择器> 类选择器> 元素选择器> 通配选择器 */
        /*相同优先级，后来居上*/
        #container #span0 {
            color: green;
        }

        /*2,0,0*/
        #span0 {
            color: darkmagenta !important; /*宇宙无敌*/
        }

        /*1,0,0*/
        .container span.span0 {
            color: red;
        }

        /*0,2,1*/

以上就是关于css选择器和优先级详解相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！

版权声明：本站文章，如无说明，均为本站原创，转载请注明文章来源。如有侵权，请联系博主删除。
本文链接：https://www.panziye.com/front/11882.html
喜欢 (0)赏
【请潘老师喝杯Coffee吧！】
分享 (0)

相关文章

用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi，您需要填写昵称和邮箱！

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】