新增CSS的特性

最新推荐文章于 2024-01-03 07:45:00 发布

BlackeggXian

最新推荐文章于 2024-01-03 07:45:00 发布

阅读量116

点赞数

分类专栏：网页前端文章标签： css 前端

本文链接：https://blog.csdn.net/blackeggxian/article/details/121170760

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

网页

5 篇文章 0 订阅

订阅专栏

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

1、属性选择器

2、结构伪类选择器

3、伪元素选择器

属性选择器：

属性选择器可以根据元素特定属性来选择元素。这样就可以不用借助于类或者id选择器

  <style>
        /* 必须是input，但是同时具有value这个属性 选择这个元素 */
        input[value] {
            color: pink;
        }
        
    </style>
</head>

<body>
    <!-- 1、利用属性选择器就可以不用借助类或者id选择器 -->
    <input type="text" value=“请输入用户名”>
    <input type="text">

 <style>
  
        input[type="text"] {
            color: pink;
        }
    </style>
</head>

<body>
    <!-- 2、属性选择器还可以选择属性=值的某些元素 -->
    <input type="password" name="" id="" />
    <input type="text" name="" id="" />

   <style>
        /* 选择首先是div  然后 具有class属性  并且属性值 必须是icon开头的这些元素 */
        div[class^="icon"] {
            color: blueviolet;
        }
    </style>
</head>

<body>
    <!-- 3、属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">1</div>
    <div class="icon2">2</div>
    <div class="icon3">3</div>
    <div class="icon4">4</div>
    <div class="icon5">5</div>

 <style>
       section[class$=data]{
            color:blue
        }
    </style>
</head>

<body>
    <!-- 4、属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">ghjk</section>
    <section class="icon1-data1">f</section>
    <section class="icon1-data2">b</section>
</body>

注：类选择器、属性选择器、伪类选择器的权重为10；

结构伪类选择器

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

nth-child(n) 选择某个父元素的一个或多个特定的子元素

n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素，里面数字从1开始
n可以是关键字：even是偶数，odd是奇数
n可以是公式：常见公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略）

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

小结：

结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child对父元素里面所有孩子排序选择（序号都是固定的）先找到第n个孩子，然后再看看是否和E匹配
nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找到第n个孩子
关于nth-child（n）我们要知道n是从0开始计算的，要记住常用的公式
如果是无序列表，我们肯定用nth-child更多。
类选择器，属性选择器，伪类选择器，权重为10；

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

BlackeggXian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
新增CSS的特性

<style> /* 必须是input，但是同时具有value这个属性选择这个元素 */ input[value]{ color:pink; } </style></head><body>  <input type="text" value=“请输入用户名”> .
复制链接

扫一扫