web基础学习（五）CSS3 选择器

最新推荐文章于 2024-07-08 16:06:00 发布

原创最新推荐文章于 2024-07-08 16:06:00 发布 · 474 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css3选择器

web前端同时被 2 个专栏收录

17 篇文章

订阅专栏

web基础

15 篇文章

订阅专栏

本文详细介绍并演示了CSS3中的各种选择器使用方法，包括基础选择器、关系选择器、属性选择器及伪类选择器等。通过具体实例帮助读者理解如何高效地应用这些选择器来定位和设置样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一节：HTML5的主结构元素、表单——————下一节：CSS3 文字阴影、文本溢出、服务器字体

选择器参考手册
以下是常用选择器实战演示包含注释：
1. 基础选择器
  
  .class .intro 选择所有class="intro"的元素
  #id #firstname 选择所有id="firstname"的元素
  * 选择所有元素
2. 关系选择器
  
  div.new-name 交集选择器选择div标签并且class="new-name"的元素
  div , .new-name 并集选择器选择所有div和 class="new-name"的元素
  div > h2 子元素选择器 div 下面的子级h2
  h3 + p 相邻标签选择器标签不一致,选择h3相邻的一个p标签
  ul li + li 相邻标签选择器标签一致亲兄弟标签,选择li相邻的所有 li标签
  div h3 ~ p 同级标签选择器 h3相邻所有p标签
3. 属性选择器
  
  a[target] a标签含有target属性选择器
  a[target="_self"] a标签含有target属性为_self选择器,其他同理
  div[class~="one"] div标签class属性内有多个值并且空格分开,其中有一个是one
  div[class|="list"] div标签class属性内有多个连字符,其中是list-开头,主要是 lang 属性别的属性用的不多
  div[class^="con"] div标签class 属性以 con 开头的
  a[target$="nk"] a标签target属性以nk结尾
  [class*="ew"] 选择class属性值包含ew的*/
4. 伪类选择器
  
  p::first-line 选中第一行文本不管是不是响应式页面都是第一行
  p::first-letter 选中第一个字
  ul li::before元素内容之前添加内容
  ul li::after 元素内容之后添加内容
  :root将样式绑定在页面的根元素中,顶级标签html
  ul li:not(.two)选择li标签但不包含 class名为two的元素
  ul li:empty选择li标签内容为空的元素
  p:target对target指定样式,需要页面跳转后才生效。下面用锚链接展示
  ol li:first-child选择li的第一个元素
  ol li:last-child选择li的最后一个元素
  ol li:nth-child(5)选择li的第五个元素
  ol li:nth-child(odd)选择li的奇数位元素
  ol li:nth-last-child(even)选择li倒数偶数位元素
  ol li:nth-last-of-type(8)选择倒数li的第8数个元素仅能匹配同种标签元素
  ol li:nth-of-type(9)排除掉其他元素选择第9个,仅能匹配同种标签元素
  ol li:nth-child(3n+2)选择公式中匹配的元素
  div p:only-child选择div 下 p标签只有一个的元素
  div p:only-of-type排除掉其他同级标签,选择div 下 p标签只有一个的元素
  input:enabled选择激活的表单默认是激活
  input:disabled选择禁用的表单,上面的是激活情况
  input:checked选择单选框或者复选框选中的元素 checked属性
  ::-moz-selection鼠标选中页面字体时显示的样式 ::selection ,注意浏览器内核的问题, -moz-是火狐浏览器内核

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*选择器演示*/

        /*子元素选择器 div 下面的子级h2 */
        div > h2 {
            color: red;
        }

        /*相邻标签选择器标签不一致,选择h3相邻的一个p标签*/
        h3 + p {
            background-color: yellow;
        }

        /*相邻标签选择器标签一致亲兄弟标签,选择li相邻的所有 li标签*/
        ul li + li {
            background-color: blue;
        }

        /*同级标签选择器 h3相邻所有p标签*/
        div h3 ~ p {
            background-color: red;
        }

        /*a标签含有target属性选择器*/
        a[target] {
            color: red;
        }

        /*a标签含有target属性为_self选择器,其他同理*/
        a[target="_self"] {
            font-weight: bold;
        }

        /*div标签class属性内有多个值并且空格分开,其中有一个是one*/
        div[class~="one"] {
            width: 200px;
            height: 130px;
            background-color: blue;
        }

        /*div标签class属性内有多个连字符,其中是list-开头,主要是 lang 属性别的属性用的不多*/
        div[class|="list"] {
            height: 100px;
            background-color: lightpink;
        }

        /* div标签class 属性以 con 开头的*/
        div[class^="con"] {
            height: 20px;
            background-color: yellow;
        }

        /*a标签target属性以nk结尾*/
        a[target$="nk"] {
            font-style: italic;
        }

        /*选择class属性值包含ew的*/
        [class*="ew"] {
            display: block;
            height: 100px;
            border: 1px solid black;
        }

        /*伪类选择器*/
        .weilei p::first-line { /* 选中第一行文本 不管是不是响应式页面都是第一行*/
            color: red;
        }

        .weilei p::first-letter { /* 选中第一个字 */
            font-size: 30px;
        }

        .weilei ul li::before { /* 元素内容之前添加内容 */
            content: "-";
        }

        .weilei ul li::after { /* 元素内容之后添加内容 */
            content: "hellow";
        }

        /*将样式绑定在页面的根元素中,顶级标签html*/
        .weilei :root {
            background-color: #ccc;
        }

        /*选择li标签但不包含 class名为two的元素*/
        .weilei ul li:not(.two) {
            background-color: green;
        }

        /*选择li标签内容为空的元素*/
        .weilei ul li:empty {
            background-color: red;
        }

        /*对target指定样式,需要页面跳转后才生效。下面用锚链接展示*/
        .weilei p:target {
            background-color: blue;
        }

        /*
        选择li的第一个元素
        ol li:first-child{
            background-color: yellow;
        }
        选择li的最后一个元素
        ol li:last-child{
            background-color: red;
        }
        选择li的第五个元素
        ol li:nth-child(5){
            background-color: green;
        }
        选择li的奇数位元素
        ol li:nth-child(odd){
            background-color: yellow;
        }
        选择li倒数偶数位元素
        ol li:nth-last-child(even){
            background-color: yellow;
        }
        选择li的奇数个元素
        ol li:nth-last-of-type(8){
            background-color: yellow;
        }*/
        /*排除掉其他元素选择第9个,仅能匹配同种标签元素*/
        ol li:nth-of-type(9) {
            background-color: orange;
        }

        /*选择公式中匹配的元素*/
        ol li:nth-child(3n+2) {
            background-color: yellow;
        }

        /*选择div 下 p标签只有一个的元素*/
        .weilei-two div p:only-child {
            background-color: yellow;
        }

        /*排除掉其他同级标签,选择div 下 p标签只有一个的元素*/
        .weilei-two div p:only-of-type {
            background-color: red;
        }

        /*选择激活的表单 默认是激活,*/
        .weilei-two input:enabled {
            background-color: green;
        }

        /*选择禁用的表单,上面的是激活情况*/
        .weilei-two input:disabled {
            background-color: red;
        }

        /*选择单选框或者复选框选中的元素 checked属性*/
        .weilei-two input:checked {
            outline: 2px solid green;
        }
        /*鼠标选中页面字体时显示的样式 ::selection ,注意浏览器内核的问题, -moz-是火狐浏览器内核*/
        .weilei-two ::-moz-selection {
            color: white;
            background-color: green;
        }
    </style>

</head>
<body>
<div>
    <h2> div > h2 这是一个标题标签</h2>
    <article>
        <h2>这也是一个标题标签</h2>
    </article>
</div>
<h3>这是一个h3歌声与标签</h3>
<p>h3 + p 这是一个p标签</p>
<p>这是一个p标签</p>
<p>这是一个p标签</p>
<p>这是一个p标签</p>
<ul>
    <li>这是一个列表项</li>
    <li>ul li + li 这是一个列表项</li>
    <li>ul li + li 这是一个列表项</li>
    <li>ul li + li 这是一个列表项</li>
    <li>ul li + li 这是一个列表项</li>
</ul>
<div class="list-one">div[class|="list"]
    <h3>这是一个h3歌声与标签</h3>
    <p>div h3 ~ p 这是一个p标签</p>
    <p>div h3 ~ p 这是一个p标签</p>
    <p>div h3 ~ p 这是一个p标签</p>
    <p>div h3 ~ p 这是一个p标签</p>
</div>
<div class="one three">div[class~="one"]</div>
<div class="list-two">div[class|="list"]

</div>
<a class="even" href="#" target="_self">a[target] , a[target="_self"]百度</a>
<a href="#" target="_blank">a[target], a[target$="nk"]新浪</a>
<a href="#" target="_blank">a[target], a[target$="nk"]腾讯</a>
<div class="news">[class*="ew"]</div>
<div class="nav"></div>
<div class="content">div[class^="con"]</div>
<p>
<p></p></p>
<div class="weilei">
    <!--伪类选择器-->
    <p>
        p::first-line本次召回范围内的产品，由于存在异常发热、燃烧等问题，有可能发生起火等严重后果。截至目前，在中国大陆地区已经发生20起过热、燃烧事故。为了保护消费者人身财产安全，三星(中国)投资有限公司自2016年10月10日起已经停止生产、销售SM-N9300
        Galaxy Note
        7数字移动电话机产品，并将采取以下两种措施实施召回：(1)免费为消费者更换为其他型号全新三星手机，并退还两个产品之间的差价，赠送购物券300元；(2)按照原购买价格全额退款，同时回收产品。消费者可以自主选择以上两种方式之一。消费者因配合本次召回所产生的产品邮递费用由三星(中国)投资有限公司承担。
    </p>
    <ul>
        <li class="one">这是一个列表项</li>
        <li class="two">这是一个列表项</li>
        <li></li>
        <li class="three">这是一个列表项</li>
        <li class="four">这是一个列表项</li>
    </ul>
    <a href="#one">第一</a>
    <a href="#two">第二</a>
    <a href="#three">第三</a>
    <a href="#four">第四</a>
    <p id="one">这是一个段落标签t这是一个段落标签t</p>
    <p id="two">这是一个段落标签t这是一个段落标签t</p>
    <p id="three">这是一个段落标签t这是一个段落标签t</p>
    <p id="four">这是一个段落标签t这是一个段落标签t</p>
    <ol>
        <li>这是一个有序列表</li>
        <li>这是一个有序列表</li>
        <li>这是一个有序列表</li>
        <!--<dd>这也是个列表项</dd>-->
        <li>这是一个有序列表</li>
        <li>这是一个有序列表</li>
        <li>这是一个有序列表</li>
        <li>这是一个有序列表</li>
        <li>这是一个有序列表</li>
        <li>这是一个有序列表</li>
        <li>这是一个有序列表</li>
    </ol>
</div>
<div class="weilei-two">
    <div>
        <p>这是一个段落标签</p>
        <h1>这是一个标题标签</h1>
    </div>
    <div>
        <p>这是一个段落标签</p>
        <p>这是一个段落标签</p>
        <h1>这是一个标题标签</h1>
    </div>
    <input type="text">
    <br>
    <input disabled type="text">
    <input type="checkbox" name="游泳">游泳
    <input checked type="checkbox" name="摄影">摄影
    <p>
        花7000美元就能买到20世纪90年代出产的悍马车。曾经驰骋在战场的自动倾卸卡车和拖拉机的售价为1.5万美元。帮助建设过军事哨岗的工程起重机的售价从2万美元到2.3万美元不等。大多数设备都处于良好的工作状态，很多卡车的运输里程出人意料的少。
     </p>
</div>
</body>
</html>