来自css3选择器的二三事

最新推荐文章于 2024-05-31 11:02:10 发布

X_Promise9

最新推荐文章于 2024-05-31 11:02:10 发布

阅读量213

点赞数 3

文章标签： css3

本文链接：https://blog.csdn.net/X_shmily9/article/details/104569542

版权

css3选择器

css3选择器：选择的是html标签。其中css3选择器分为三大类：属性选择器、伪类选择器、层级选择器，接下来我们将一一介绍他们的用法。

一、属性选择器

通过html的属性对html的标签进行选择
1、选择符[属性名] ：只要带有当前属性名就会被选中。

<style>
        /* 选中p标签下带有class属性名的元素（第一个和第三个p标签均会选中） */
        p[class]{
            font-size:24px;
            color:blue;
        }
    </style>
</head>
<body>
    <p class="txt">文本文本文本</p>
    <p>文本文本文本</p>
    <p class="txts">文本文本文本</p>
</body>

2、选择符[属性名=“属性值”] ：不仅指定属性名，并且指定该属性的属性值

<style>
        /* 只选中p标签下class="txts"的元素 */
        p[class="txts"]{
            font-size:24px;
            color:blue;
        }
    </style>
</head>
<body>
    <p class="txt">文本文本文本</p>
    <p>文本文本文本</p>
    <p class="txts">文本文本文本</p>   <!-- 被选中-->
</body>

3、选择符[属性名~=“属性值”] ：属性值为一个词列表，并且以空格隔开，只要包含当前词就会被选中

<style>
        /* 只要包含了class="txts"便会选中（第一个和第三个p标签均会选中） */
        p[class~="txts"]{
            font-size:24px;
            color:blue;
        }
    </style>
</head>
<body>
    <!-- class="txt txts word"  为一个词列表  -->
    <p class="txt txts word">文本文本文本</p>
    <p>文本文本文本</p>
    <p class="txts txt3">文本文本文本</p>
</body>

4、 选择符[属性名^=“属性值”] ：属性值必须是当前指定的属性值开头的

<style>
        /*选中以wo开头的（查找的是字符，不单单是属性值） */
        p[class^="wo"]{
            font-size:24px;
            color:blue;
        }
    </style>
</head>
<body>
    <p class="txt word">文本文本文本</p>
    <p class="word2">文本文本文本</p>     <!--被选中 -->
    <p class="txts txt3">文本文本文本</p>
</body>

5、选择符[属性名$=“属性值”] ：属性值必须是当前指定的属性值结尾的（与4类似）

6、选择符[属性名*=“属性值”] ：属性值中只要包含了指定的字符就会被选中

 <style>
        /*只要包含了txt的标签就会被选中（下面三个p标签均含有txt，所以都会被选中） */
        p[class*="txt"]{
            font-size:24px;
            color:blue;
        }
    </style>
</head>
<body>
    <p class="txt word">文本文本文本</p>
    <p class="word2 txt2">文本文本文本</p>
    <p class="txts txt3">文本文本文本</p>
</body>

7、选择符[属性名|=“属性值”]：属性值仅是当前指定的属性值，或者是以属性值- 开头（ left-con ）

<style>
        /*属性值仅是txt的标签会被选中（第一个）
         为txt-开头也会被选中（第三个）*/
        p[class|="txt"]{
           font-size:24px;
            color:blue;
        }
    </style>
</head>
<body>
    <p class="txt">文本文本文本</p>
    <p class="word2 txt2">文本文本文本</p>
    <p class="txt-3 txt">文本文本文本</p>
</body>

二、伪类选择器

选择谁，选择符就写谁。
其中伪类选择器又分为：结构性伪类选择器、目标伪类选择器、UI元素状态伪类选择器、动态伪类选择器

1、结构性伪类选择器

A、 child：不分析类型，直接进行选择。如果子集标签类型一致（类名一致）的情况下，建议使用：child
（1）选择符:first-child{ } ：匹配所在子集的第一个元素

<style>
        /* 所在子集的第一个li */
       li:first-child{
           background: red;
       }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

（2）选择符:last-child{ } ：匹配所在子集的最后一个元素

（3）选择符:nth-child(n){ }：用于匹配索引值为n的子元素，索引值从1开始。
其中n为某个数值，表示第几个；
2n 或者 even，表示偶数；
2n + 1 或者 odd，表示奇数。

<style>
        /* 所在子集的第三个li */
       li:nth-child(3){
           background: red;
       }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

（4）选择符:nth-last-child(){ } ：表示倒数第几个（从最后一个开始算索引）与（3）相反

（5）选择符:only-child{ }：当前父元素下子元素只有一个的时候才会被选择

 <style>
        /* 只会选择第一个父元素下的li */
       li:only-child{
           background: red;
       }
    </style>
</head>
<body>
    <ul>
        <li></li>
    </ul>
    
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

B、of-type：先确定类型，把不同类型的先剔除，剩下同类的进行第几个选择。如果子集合标签类型不一致（类名不一致）的情况下，建议使用：of-type
用法与A类一样
（1） 选择符:first-of-type{ } 匹配同类型元素中的第一个选择符

<style>
        /* 选择h2所在子集的第一个h2 */
      h2:first-of-type{
          background: yellow;
      }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <h2>h2_1</h2>     <!--被选中 -->
        <h2>h2_2</h2>
        <li></li>
        <h2>h2_3</h2>
    </ul>
</body>

（2） 选择符:last-of-type{ }
（3） 选择符:nth-of-type(val){ }
（4） 选择符:nth-last-of-type(){ }
（5） 选择符:only-of-type{ }

C、拓展
（1） :root 选择的是根元素 html
（2）选择符:empty 在当前元素没有任何内容或者没有任何子元素的时候会被选中

2、目标伪类选择器

当元素被相关链接（锚点）指向的时候，发生css样式的改变（与对应的目标进行绑定）
选择符:target{ }

 <style>
        a{
            display:block;
            width:100px;
            height:50px;
            background:red;
            margin:10px auto;
            text-align: center;
        }
        div{
            width:200px;
            height:100px;
            margin:10px auto;
            text-align: center;
            font-size:60px;
        }
        div:target{
            /* 当div被锚点连接指向：css背景发生变化 */
            background: orange;
        }
    </style>
</head>
<body>
    <a href="#box1">连接div1</a>
    <a href="#box2">连接div2</a>
    <div id="box1">1</div>
    <div id="box2">2</div>
</body>

3、UI元素状态伪类选择器

主要是针对于html中的form元素操作。
（1）E：enabled : 设置该元素处于可用状态时的样式
（2） E:disabled：设置该元素处于不可用状态时的样式

<style>
       input:enabled{
           background: pink;   /*可用状态下为粉色*/
       }
       input:disabled{
           background: blue;    /*不可用状态下为蓝色*/
       }
    </style>
</head>
<body>
    <input type="text"><br>
    <input type="text" disabled>
</body>

（3） E:checked ：指定当form表单的单选、多选按钮处于选中状态时的样式

 <style>
       input:checked+label{
           background: orange;
       }
    </style>
</head>
<body>
    <form action="">
        <input type="checkbox"><label for="">篮球</label>
        <input type="checkbox"><label for="">足球</label>
    </form>
</body>

input:checked（当input被选中时执行样式）， lable用作提示信息。当选中复选框，使用层级选择器，选中input下离他最近的兄弟元素lable改变其背景颜色。
在这里插入图片描述
（4） E::selection：匹配E元素中被用户选中或处于高亮状态的部分（只能改变选中部分的背景和颜色）
注：E后面为两个冒号

<style>
         /*用户在浏览器上选中部分文本时，文本显示红色背景，黄色字体*/
      p::selection{
          background: red;
          color:yellow; 
      }
    </style>
</head>
<body>
   <p>文本文本文本文本文本文本</p>
</body>

在这里插入图片描述

4、动态伪类选择器

（1）E:link：链接伪类选择器，显示未访问的链接状态
（2）E:visited ：链接伪类选择器，显示已访问的链接状态
（3）E:active：用户行为选择器，显示鼠标按下去时的状态
（4）E:hover：用户行为选择器，显示鼠标滑过的链接状态（a:hover）
（5）E:focus：用户行为选择器，显示获取焦点时的状态

 <style>
        /* 点击聚焦时，input会出现黄色背景，粉色边框 */
         input:focus{
             background: yellow;
             border:10px solid pink;
         }
    </style>
</head>
<body>
  <input type="text">
</body>

三、层级选择器

1、子选择器：父元素>子元素{ }
只选择父元素最近的一层子元素，嵌套两个子元素则两个子元素都会选择，子元素里包含的子元素不会被选择

<style>
        .box{
            width: 200px;
            height: 300px;
            background: red;
        }
        .box>div{
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
  <div class="box">
      <div>
          <div></div>
      </div>
  </div>
</body>

2、相邻兄弟选择器：兄弟元素+兄弟元素{ }
选择当前的元素选择符下离他最近的兄弟元素

<style>
        /* 选中p标签下的第一个兄弟标签h2 */
        p+h2{
            font-size: 20px;
            color:red;
        }
    </style>
</head>
<body>
    <p>pppppppp</p>
    <h2>h2h2h2h2h2</h2>
    <h2>h2h2h2h2h2</h2>
    <h2>h2h2h2h2h2</h2>
    <p>pppppppp</p>
    <h2>h2h2h2h2h2</h2>
  </div>
</body>

3、通用选择器：兄弟元素~兄弟元素{ }
选择当前元素选择符下的所有兄弟元素

<style>
        /* 选中p标签下的所有兄弟标签h2 */
        p~h2{
            font-size: 20px;
            color:red;
        }
    </style>
</head>
<body>
    <p>pppppppp</p>
    <h2>h2h2h2h2h2</h2>
    <h2>h2h2h2h2h2</h2>
    <h2>h2h2h2h2h2</h2>
    <p>pppppppp</p>
    <h2>h2h2h2h2h2</h2>
  </div>
</body>

css3选择器让我们在编写代码时变得更加灵活，更加轻松简单，我们要熟悉它的用法并灵活的应用。

X_Promise9

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
来自css3选择器的二三事

css3选择器css3选择器：选择的是html标签。其中css3选择器分为三大类：属性选择器、伪类选择器、层级选择器，接下来我们将一一介绍他们的用法。一、属性选择器通过html的属性对html的标签进行选择1、选择符[属性名] ：只要带有当前属性名就会被选中。<style> /* 选中p标签下带有class属性名的元素 */ p[class]{...
复制链接

扫一扫