属性选择器和结构伪类选择器_input标签转块元素-优快云博客

本文链接：https://blog.youkuaiyun.com/huahua123mh/article/details/119455065

一、简介

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

属性选择器（★★）
结构伪类选择器（★★★）

二、选择器详细介绍

1)属性选择器

属性选择器，按照字面意思，都是根据标签中的属性来选择元素
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器
属性选择器也可以选择出来自定义的属性
注意：类选择器、属性选择器、伪类选择器，权重为 10。

1.案例一

 <!-- 属性选择器,选择相同标签不同元素,减少类或id使用 -->
    <input type="text" placeholder="请输入文本">
    <input type="text">

比如说上图代码段，可以看出两个input标签没有类名（class）区分，但是第一个input标签，有一个placeholder提示语句属性，第二个input标签没有，这个时候就可以使用属性选择器来将第一个单独选择出来设置css样式，例如：

  /* 选择input里面包含placeholder元素 */
        input[placeholder] {
            display: block;
            background-color: aquamarine;
        }

我们设置让第一个input转换成块级元素，并且给它加一个背景颜色，让我们看看效果图：

可以看出文本框1背景色改变，并且单独一行转换成了块级元素。

这就是属性选择器第一种用法:E[att] 即：标签[标签拥有的属性]，就可以把具有此属性的标签选择出来，下图贴出属性选择器的多种用法：

2.案例2

下面介绍第三种用法E[att^="val"] 选择具有att属性值以val开头的E元素

 <!-- 选择=值 -->
    <input type="email" name="" id="" placeholder="我是email">
    <input type="button" value="我是按钮">

下面我们为input里面type=email属性值添加样式

  /* 选择input里面type元素等于email,可加可不加引号 */
        input[type=email] {
            display: block;
            background-color: blue;
        }

代码为input标签type=email设置转换成了块元素,加了蓝色背景颜色，下面看效果图：

3.案例3

下面介绍第三种用法E[att^="val"] 选择具有att属性值以val的开头E元素

  <!-- 选择类名具有相同前面元素的 -->
    <div class="icoon1">我是icoon</div>
    <div class="icoon2">我是icoon</div>
    <div class="icoon3">我是icoon</div>
    <div class="icoon4">我是icoon</div>
    <div class="icoon5">我是icoon</div>
    <div class="icoon6">我是icoon</div>
    <div>
        我不是
    </div>

下面我们为input里面以"icoon"开头的属性值添加样式

div[class^=icoon] {
            width: 100px;
            height: 30px;
            background-color: red;
        }

下面看效果图：

4.案例4

下面介绍第三种用法E[att$="val"] 选择具有att属性值以val的结尾E元素

    <!-- 选择结尾相同 -->
    <div class="p1-data">我们结尾相同</div>
    <div class="p2-data">我们结尾相同</div>
    <div class="p3">我结尾不同</div>

下面我们为input里面以"data"结尾的属性值添加样式

 div[class$=data] {
            background-color: green;
        }

下面看效果图：

5.案例5

下面介绍第四种用法E[att*="val"] 选择具有att属性值含有val的E元素

     <!-- * -->
    <div class="apl">我们都含有p</div>
    <div class="bpl">我们都含有p</div>
    <div class="byy">我不含有p</div>
    <div class="cpl">我们都含有p</div>

下面我们为input里面含有"p"的属性值添加样式

 div[class*=pl] {
            background-color: yellow;
        }

下面看效果图：

至此，属性选择器的五种简单用法已演示完毕，其实除了这五种简单用法还有两种用法没有详解，有兴趣的朋友可以亲自去试验一下效果：

扩展1、E[att~=val] "~"通配符是选择E标签里面att元素含有被空格隔开的val的元素

扩展2、E[att|=val] "|"通配符是选择E标签里面att元素以val-开头的元素

2)结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

1.案例1

下面我们结构里面建立一个无序列表：

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

然后我们用第一种E:first-child和第二种E:last-child匹配父元素的第一个子元素和最后一个E元素

 ul li:first-child {
            color: blue;
        }
        
 ul li:last-child {
            color: pink;
        }

下面看效果图：

2、案例2

依旧在这个无序列表我们试一下E:nth-child(n)用法：

这个用法有许多衍生内容，如下：

匹配到父元素的第2个子元素

ul li:nth-child(2){}

匹配到父元素的序号为奇数的子元素

ul li:nth-child(odd){} odd 是关键字奇数的意思（3个字母）

匹配到父元素的序号为偶数的子元素

ul li:nth-child(even){} even（4个字母）

注意：n可以是数字、关键字、公式（公式衍生是将n从0开始累加）

选择无序列表的第三个子元素，将颜色变成黄绿色：

  ul li:nth-child(3) {
            color: yellowgreen;
        }

效果图：

再来用这个方法做一个跳变色效果：

  /* even偶数 odd奇数 */
        
        ul li:nth-child(odd) {
            color: blue;
            font-size: 26px;
        }
        
        ul li:nth-child(even) {
            color: pink;
            font-size: 36px;
        }

效果图：

最后套用一下n的公式，公式可以根据需要变化常用的如下表：

试一下最后一个公式将前两个小li变成粉色，并且让它字号变大：

 /* n代表所有的,n从0开始 */
        ul li:nth-child(-n+2) {
            color: pink;
            font-size: 36px;
        }

效果图：

其他更多好玩的公式朋友们可以亲自试验一下~

E:nth-child 与 E:nth-of-type 的区别

由于E:nth-of-type和E:nth-child非常相似，但是区别用法也很明显，建议亲自试错累积经验，这里指出它们的用法区别：

E:nth-child(n) 匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配（更适用元素一样的无序列表）

E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子