CSS3属性选择器

最新推荐文章于 2023-10-18 23:46:29 发布

CLAM-

最新推荐文章于 2023-10-18 23:46:29 发布

阅读量133

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq_42306826/article/details/115052317

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

`CSS3` 选择器

什么是 CSS3
- 在 CSS2 的基础上拓展、新增的样式
CSS3 发展现状
- 移动端支持优于 PC 端
- CSS3 相对 H5，应用非常广泛
属性选择器列表

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

案例：

<style>
        button {
            cursor: pointer;
        }
        /* 属性选择的使用方法 */
        /* 选择的是：既有button又有disable */
        /* 属性选择器 权限 优先于 标签选择器 */
        
        button[disabled] {
            cursor: default;
        }
        
        input[type="search"] {
            color: red;
        }
        /* 从头开始包含 */
        
        div[class*="icon"] {
            color: royalblue;
        }
        /* 从结尾开始 */
        
        div[class$="oni"] {
            color: slategray;
        }
        /* 任意一个值 */
        
        div[class*="r"] {
            color: springgreen;
        }
    </style>

<body>
    <button>按钮</button>
    <button disabled>按钮</button>
    <input type="text" value="文本框">
    <input type="search" value="搜索框">
    <div class="icon1">图标1</div>
    <div class="icon2">图标2</div>
    <div class="con4">图标3</div>
    <hr>
    <div class="i1coni">图标1</div>
    <div class="i1coni">图标2</div>
    <div class="con4">图标3</div>
    <hr>
    <div class="inri">图标1</div>
    <div class="inri">图标2</div>
    <div class="co4">图标3</div>
</body>

结构伪类选择器列表

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

案例：

<style>
        .div1 ul li:first-child {
            background-color: teal;
        }
        
        .div1 ul li:last-child {
            background-color: yellow;
        }
        
        .div1 ul li:nth-child(3) {
            background-color: hotpink;
        }
      
    </style>
    <body>
    <div class="div1">
        <ul><li></li><li></li><li></li><li></li><li></li></ul>
    </div>
    <div class="div2">
        <ul><li></li><li></li><li></li><li></li><li></li></ul>
    </div>
    <div class="div3">
        <ul><li></li><li></li><li></li><li></li><li></li></ul>
    </div>
    <div class="div4">
        <ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
    </div>
</body>

nth-child 参数详解

注意：本质上就是选中第几个子元素
n 可以是数字、关键字、公式
n 如果是数字，就是选中第几个
常见的关键字有 even 偶数、odd 奇数
常见的公式如下(如果 n 是公式，则从 0 开始计算)
但是第 0 个元素或者超出了元素的个数会被忽略

公式	取值
2n	奇数
2n+1	偶数
5n	5 10 15 …
n+5	从第五个开始（包含第五个）直到最后
-n+5	前五个（包含第五个）…

案例：

<style>
  /* 参数---even偶数  odd奇数 */
        
        .div2 ul li:nth-child(even) {
            background-color: khaki;
        }
        /* n是公式 从0开始 */
        
        .div3 ul li:nth-child(3n) {
            background-color: khaki;
        }
        /* n+5就是从5开始后面全部选中  */
        /* -n+5就是前面5个全部选中  */
        
        .div4 ul li:nth-child(n+5) {
            background-color: red;
        }
</style>

<body>
    <div class="div3">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="div4">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

nth-child 和 nt-of-type 的区别

nth-child 选择父元素里面的第几个子元素，不管是第几个类型
nt-of-type 选择指定类型的元素

CLAM-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3属性选择器

CSS3 选择器什么是 CSS3在 CSS2 的基础上拓展、新增的样式CSS3 发展现状移动端支持优于 PC 端CSS3 相对 H5，应用非常广泛属性选择器列表选择符号简介E[att]选择具有 att属性的E元素E[att=“val”]选择具有att属性、且属性值等于val的E元素E[att^=“val”]匹配具有val属性、且值以val开头的E元素E[att$=“val”]匹配具有val属性、且值以val结尾的E元素
复制链接

扫一扫