20 css 选择器 (2.0)

小狗爱吃土豆儿~

已于 2023-08-03 14:59:33 修改

阅读量25

点赞数

文章标签： css 前端

于 2023-08-03 14:57:28 首次发布

本文链接：https://blog.csdn.net/weixin_53971197/article/details/132083708

版权

css 选择器

一、属性选择器

以下 E 代表标签名,attr表示属性名 val 表示属性值
常用（1.2）

E[attr] 选择所有具有 attr属性的 E 元素

li[title]{
    color: #f00;
}

/* 给所有的文本输入框设置样式 */
input[type="text"]{
    color: #04be02;
}

E[attr=val] 选择所有具有 attr属性并且他的值是val的 E元素

/* 属性class的值是abc */
li[class="abc"]{
    border: 1px #f00 solid;
}

E[attr~=val] 选择所有具有 attr属性并且他的值包含 val 的 E元素

 /* 属性class中包含 show */
li[class~="show"]{
    width: 200px;
    height: 200px;
    background: #ff0;
}

E[attr|=val] 选择所有具有 attr属性并且他的值是以 val或者 val-开头的 E元素

/* 属性class 中的字符以 abc开头或者abc-开头 */
div[class|="abc"]{
    font-size:30px;
    color: #f00;
}

E[attr*=val] 选择所有具有 attr属性并且他的值具有 val 字符的 E元素

 /* 属性class 中的字符含有 bc */
 div[class*="bc"]{
    border: 1px #f00 solid;
    margin: 10px 0;
}

E[attr$=val] 选择所有具有 attr属性并且他的值是以val 字符结束的 E元素

/* 属性class 的值以 d 结束 */
div[class$="d"]{
   color: rgb(20, 207, 235);
}

E[attr^=val] 选择所有具有 attr属性并且他的值是以val 字符开始的 E元素

/* 属性class 的值以 li 开头 */
div[class^="li"]{
   color: rgb(32, 125, 6);
}

二、伪类选择器

:focus 为所有获取焦点的input设置样式（常用）

input[type="text"]:focus{
            width: 200px;
            height: 30px;
            padding-left: 10px;
        }

:disabled 为所有被禁用的input设置样式

input:disabled{
            border: 1px #f00 solid;
        }

:target 目标伪类选择器，当跳转到他所修饰的元素上的时候才会执行该选择器修饰的样式

:target{
            color: #f00;
        }

:root 表示的是html

:root{
        border: 2px #00f solid;
    }

E:empty 选中所有内容为空的E标签，并添加样式

div:empty{
            border: 1px #f00 solid;
            width: 100px;
            height: 100px;
        }

:empty 选中所有内容为空的标签，并添加样式

:empty{
        background: #ccc;
}

E:only-child 选中父元素中只有一个E标签的 E标签，并添加样式，独生子标签

div:only-child{
            font-size: 30px;
        }

三、伪元素选择器

通过伪元素选择器可以给元素添加一个类似子元素的内容，不是真正的标签
使用伪元素需要添加 ::
常用3.4

::first-letter 表示修改第一个字符

.txt::first-letter{
            font-size: 30px;
            color: #04be02;
        }

::first-line 表示修改第一行字符

.txt::first-line{
            font-size: 20px;
            color: #f00;
        }

::before 在元素内容的最前面添加一个伪元素

.cont::before{
            content: 'zz';
            border: 1px #f00 solid;
            font-size: 30px;
            color: #04be02;
            display: block;
        }

::after 在元素内容的最后面添加一个伪元素

.cont::after{
            content: 'xy';
            border: 1px #f00 solid;
            font-size: 30px;
            color: #04be02;
        }

四、结构伪类选择器

父级 E:nth-child(num) 选中同一个父级下，排名次序为 num的E元素
num 从1开始

ul>li:nth-child(2){
            background: rgb(241, 187, 71);
        }
ul>li:nth-child(6){
            background: rgb(145, 201, 234);
        }
ul li:nth-child(10){
            margin-bottom: 0;
        }

使用n表达式，设置选中的标签
n从0开始计算
偶数使用 2n,奇数使用2n+1

E:nth-child(2n)
E:nth-child(2n+1)

也可以使用 odd 表示奇数，even 表示偶数

/* 偶数 */
ul li:nth-child(2n){
    background: #ff0;
        }
/* 奇数 */
ul li:nth-child(odd){
    background: rgb(183, 239, 146);
        }

E:nth-last-child(num) 表示从后开始往前面数，使用方式和nth-child一样，就是倒着计算

ul li:nth-last-child(2){
            font-size: 30px;
        }

如果父元素中的子元素不是同一个类型，则不能使用 nth-child(num) 来设置css，因为匹配到的元素不对

使用E:nth-of-type(num) 来匹配元素，他的意思是，找到和E标签同类型的第num个元素

.cont p:nth-of-type(2){
            font-size: 30px;
            color: #f00;
        }
.cont span:nth-of-type(2){
            font-size: 30px;
            color: rgb(186, 107, 168);
        }

E:nth-last-of-type(num) 使用方法和E:nth-of-type(num)一样，只是倒着数

.cont span:nth-last-of-type(1){
            font-size: 40px;
            color: rgb(115, 149, 222);
        }