css3应用示例:新增的选择器


Posted in HTML / CSS onMarch 16, 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新增选择器的应用示例的详细内容,更多关于css3新增选择器的资料请关注三水点靠木其它相关文章!

 
HTML / CSS 相关文章推荐
CSS类名支持中文命名的示例
Apr 04 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 #HTML / CSS
css3新特性的应用示例分析
Mar 16 #HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
HTML中的表单元素介绍
HTML中的表格元素介绍
HTML基本元素标签介绍
使用CSS连接数据库的方式
You might like
php实现cookie加密的方法
2015/03/10 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
python学习手册中的python多态示例代码
2014/01/21 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
logging level级别介绍
2020/02/21 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
租房协议书样本
2014/08/20 职场文书
会计求职自荐信范文
2015/03/04 职场文书
公司禁烟通知
2015/04/23 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript