css3 选择器


Posted in HTML / CSS onMay 11, 2022

CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素,你还不知道吗?

属性选择器

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

选择符 简介
E[att ] 选择具有 att 属性的 E 元素
E[att =" val"] 选择具有 att 属性且属性値等于 val 的 E 元素
E[ att^=“val”] 匹配具有 att 属性且值以 val 开头的 E 元素
E[ att$=“val”] 匹配具有 att 属性且值以 val 结尾的 E 元素
E[ att*=“val”] 匹配具有 att 属性且值中含有 val 的 E 元素

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*1.必须是input,且包含value这个属性*/
        input[value]{
            color:red;
        }
        /* 2. 选择属性=值得元素 */
        input[type="password"]{
            background-color: pink;
        }
        /* 3.匹配具有class属性且值以 icon 开头的 div元素 */
        div[class^="icon"]{
            color: blue;
        }
        /*4.匹配具有class属性且值以data结尾的div元素 */
        div[class$="data"]{
            color:green;
        }
        /*5.匹配具有class属性且值包含om的div元素 */
        div[class*="om"]{
            color: orange;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text" value="请输入用户名">
    <input type="password" name="" >
    <div >小图标1</div>
    <div >小图标2</div>
    <div >小图标3</div>
    <div >小图标4</div>
    <div >小图标5</div>
    <div >我是阿牛</div>
    <div >阿牛</div>
    <div >哇</div>
    <div >你好</div>
    <div >好</div>
</body>
</html>

css3 选择器

结构伪类选择器

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

选择符 简介
E : first - child 匹配父元素中的第一个子元素E
E : last - child 匹配父元素中最后一个 E 元素
E : nth - child ( n ) 匹配父元素中的第个子元素 E
E : first - of - type 指定类型 E 的第一个
E : last - of - type 指定类型 E 的最后一个
E : nth - of - type ( n ) 指定类型 E 的第 n 个

区别:

nth - child 对父元素里面所有孩子排序选择(序号是固定的)先找到第 n 个孩子,然后看是否和 E 匹配。nth -

of - type 对父元素里面指定子元素进行排序选择。先去匹配 E ,然后再根据E找第 n 个孩子。

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

  • n 可以是数字,关键字和公式。
  • n 如果是数字,就是选择第 n 个子元素,里面数字从1开始…。
  • n 可以是关键字: even 偶数, odd 奇数。
  • n 可以是公式;常见的公式如下(如果 n 是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)
公式 取值
n 1 2 3 …
2n 偶数
2n+1 奇数
5n 5 10 15…
n+5 从第5个开始(包含第五个)到最后
-n+5 前5个(包含第5个)…
... ...

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择ul里的第一个孩子li */
       ul li:first-child{
           background-color: red;
       }
       /* 选择ul里的最后一个孩子li*/
       ul li:last-child{
           background-color: green;
       }
       /* 选择ul里的第2个孩子li */
       ul li:nth-child(2){
           background-color: skyblue;
       }
        /* 选择ol里的第偶数个孩子li */
        ol li:nth-child(even){
            background-color: blue;
        }
         /* 选择ol里的第奇数个孩子li */
        ol li:nth-child(2n+1){
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
</body>
</html>

css3 选择器

伪元素选择器

选择符 简介
::before 在元素内部的前面插入内容
:: after 在元素内部的后面插入内容

注意:

  • before 和 after 创建一个元素,但是属于行内元素。
  • 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素。
  • 语法: element :: before {}
  • before 和 after 必须有 content 属性。
  • before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素。
  • 伪元素选择器和标签选择器一样,权重为1 。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      div{
          width: 200px;
          height: 200px;
          background-color: skyblue;
        }
        /* 创建的是行内元素,设置宽高要转换为行内块或者浮动 */
      div::before{
          /* content属性是必须要写的 */
          content: '我';
          float: left;
          width: 30px;
          height: 30px;
          background-color: pink;

      }
    
      div::after{
          content: '阿牛';
      }
    </style>
</head>
<body>
    <div>
        是
    </div>
</body>
</html>

css3 选择器

结语

以上就是css3新增选择器的应用示例的详细内容!

 

Tags in this post...

HTML / CSS 相关文章推荐
使用CSS实现阅读进度条
Feb 27 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
HTML CSS 一个标签实现带动画的抖音LOGO
常用的文件对应的MIME类型汇总
Apr 26 #HTML / CSS
通过feDisplacementMap和feImage实现水波特效
什么是css原子化,有什么用?
Apr 24 #HTML / CSS
css3 文字断裂效果
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 #HTML / CSS
You might like
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
详解angular element()方法使用
2017/04/08 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
javascript实现手动点赞效果
2019/04/09 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
python实现BackPropagation算法
2017/12/14 Python
django ajax json的实例代码
2018/05/29 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
教育科学研究生自荐信
2013/10/09 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
工会趣味活动方案
2014/08/18 职场文书
公司演讲稿开场白
2014/08/25 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
打架检讨书范文
2015/01/27 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL