选择器的使用

这篇具有很好参考价值的文章主要介绍了选择器的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

层级选择器

/*子代选择器:选出box下的所有li标签*/
        .box>li{
            background-color: aliceblue;
        }
        /* 选出box后面的第一个兄弟li标签 */
        .box+li{
            background-color: aliceblue;
        }
        /* 选出box后面的所有兄弟li标签 */
        .box~li{
            background-color: aliceblue;
        }

属性选择器

/* 属性选择器:选出所有带有class属性的标签 class也可以为其他属性 */
        [class]{
            background-color: aliceblue;
        }
        /* 属性选择器:选出所有带有class属性的div标签 class也可以为其他属性 */
        div[class]{
            background-color: aliceblue;
        }
        /* 属性选择器:选出所有带有class=box1属性的div标签 class也可以为其他属性 */
        div[class=box1]{
            background-color: aliceblue;
        }

        /* 属性选择器:选出所有class属性以b开头的div标签 class也可以为其他属性 */
        div[class^=b]{
            background-color: aliceblue;
        }
        /* 属性选择器:选出所有class属性以b结尾的div标签 class也可以为其他属性 */
        div[class$=b]{
            background-color: aliceblue;
        }
        /* 属性选择器:选出所有class属性包含b的div标签 class也可以为其他属性 */
        div[class*=b]{
            background-color: aliceblue;
        }
        /* 属性选择器:选出所有带有class属性中包含box1的div标签 class也可以为其他属性 */
        div[class~=box1]{
            background-color: aliceblue;
        }

伪类选择器

结构伪类选择器

/* 结构伪类选择器 */
        /* 选择box下的最后一个div标签 */
        .box div:last-child{
            background-color: aliceblue;
        }
        /* 找到第一个li标签 */
        li:first-child{
            background-color: aliceblue;
        }
        /* 找到最后一个li标签 */
        li:last-child{
            background-color: aliceblue;
        }
        /* 找到第二个li标签 */
        li:nth-child(2){
            background-color: aliceblue;
        }
        /* 找到第偶数个li标签,2n可以用even代替 */
        li:nth-child(2n){
            background-color: aliceblue;
        }
        /* 找到第奇数个li标签,2n-1可以用odd代替 */
        li:nth-child(2n-1){
            background-color: aliceblue;
        }

目标伪类选择器

/* 目标伪类选择器:隐藏锚点的导向位置 */
div.content{
    display: none;
}
div.content:target{
    display: block;
}

状态伪类选择器

    <style>
        /* 
            状态伪类选择器(checkbox有默认样式,需要清楚默认样式才能使用)
                enabled:可用标签选择
                disabled:禁用标签选择
                focus:聚焦选择器,作用于焦点标签

         */
         /* 去掉checkbox的默认样式 */
         input[type=checkbox]{
            appearance: none;
            width: 20px;
            height: 20px;
            background: red;
         }

         input:enabled{
            background: red;
         }

         input:disabled{
            background: yellow;
         }
        
         input:focus{
            background: blue;
         }

         /* 选择状态伪类选择器(当文字被选中时的状态) */

         div::selection{
            background: red;
            color: blue;
         }
    
    </style>
</head>
<body>
    <!-- 
        层级选择器
     -->
     <form action="">
        用户名: <input type="text"><br>
        密码: <input type="password"><br>
        记住用户名: <input type="checkbox">
        <input type="submit" disabled>
     </form>

     <div>
        dsfgbahjshfaslhfasdhfasddhfasdhfjasdhfoiasd
     </div>


</body>

文章来源地址https://www.toymoban.com/news/detail-618561.html

到了这里,关于选择器的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 选择器的使用

    2024年02月15日
    浏览(33)
  • web前端之JavaScript选择文件和文件夹、全程使用WebApi操作文件、不涉及html、showOpenFilePicker、showDirectoryPicker

    此方式不需要创建多余的html标签,非常适合项目开发中使用。

    2024年02月20日
    浏览(47)
  • webIDE表单标签以及包含选择器的使用

    IDE的使用 表单标签 css层叠样式表(cascading style sheet) 外链样式的好处 首先提高代码的复用性 他可以降低代码的耦合性 基本选择器 包含选择器

    2024年01月23日
    浏览(36)
  • 微信小程序picker表单选择器的使用

    微信小程序picker表单选择器的使用 微信小程序picker表单选择器的使用 bindchange:当选择项改变时触发的方法 range:选项数组可以是二维数组 range-key:如果是二维数组时,用此属性指定第二维数组的键以达到在选择项中显示这个键对应的键值 value:是当前值是当前选中的数组的索

    2024年02月16日
    浏览(51)
  • Element Plus 日期选择器的使用和属性

    element plus 日期选择器如果如果没有进行处理 他会返回原有的属性值data格式 如果想要获取选中的日期时间就需要通过以下的代码来实现选中的值 format=\\\"YYYY/MM/DD\\\"  value-format=\\\"YYYY-MM-DD\\\"  看一下加上后的效果: 这个组件还能转换为时间戳的方式,也是需要更改 value-format属性。将

    2024年02月10日
    浏览(40)
  • 【vue + element ui】ColorPicker 颜色选择器的使用

    组件提供的 ColorPicker 颜色选择器不能满足实际需求,所以在此基础上使用了自定义的方式进行使用 我这边的使用场景是 ColorPicker 与 el-input 输入框的联动使用,在这里参考了下面博主的文章 https://blog.csdn.net/s1441101265/article/details/109672819 1.自定义组件 inputColor.vue 2.父组件引入该

    2024年02月04日
    浏览(34)
  • uni小程序中 picker选择器的使用,如省市区样式的多列选择实现

    uni.app自带的滚动选择器。一共有五种方式,通过mode来区分,分别是:普通选择器、多列选择器、日期选择器、事件选择器和省市区选择器。 本文展示 多列选择器的使用 对你有用就给个赞。。。赞。。。赞。。

    2024年02月02日
    浏览(60)
  • 前端Javascript | 数组值随机选择函数

    为了解决 postman 传参数据定制化,需要写一点前置脚本,有用到随机选取数组中的值来造数据。

    2024年02月07日
    浏览(45)
  • 前端三剑客CSS篇——CSS选择器

    CSS是前端三剑客不可忽略的一部分,CSS对前端来说是一个美化页面的工具,而且其功能十分强大,程序员可以如果熟练运用的话可以‘随心所欲’的更改页面的样式,使得页面更加美观。 CSS标签是由 键值对 的模式来排列的。 CSS三大特征👍 学习CSS之前,先认识一下CSS的三大

    2024年02月04日
    浏览(45)
  • Vue中的el-date-picker时间选择器的使用

    1、value-format属性设置需要什么格式的时间 2、type类型选择datetime、date type类型改成date时,日期选择器就变成了年月日。 value-format不指定时,也默认时年月日。

    2024年02月12日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包