HtmlCsscss css3 属性选择器 img元素&&含有alt属性 div元素&&含有class属性,属性值为t

css

css3

属性选择器

img元素&&含有alt属性

img[alt] {border: 5px solid red;}//从而突出显示这些有效的图像

a[href][title] {color:red;}//同时有两个属性的a

div元素&&含有class属性,属性值

<div class='text'>小图标11</div>
<div class='icon1-data'>小图标1</div>
<div class='icon2-data'>小图标2</div>
<div class='icon3'>小图标3</div>
<div class='icon4'>小图标4</div>
<div class='33'>小图标33</div>
<div class='44'>小图标44</div>

为text

div[calss = text]{
    color:pink;
}

含有icon

div[class*=icon]{
    color:pink;
}

以icon开头

div[class^=icon]{
    color:pink;
}

以data结尾

div[class$=data]{
    color:pink;
}

所有元素&&含有class属性

*[calss] {color:red;}

结构伪类选择器

ul li:first-child {
    background-color:pink;
}
p:first-of-type {
    color: red;
}

ul li:last-child {
    background-color:pink;
}
p:last-of-type {
    color: red;
}

p:nth-child(n)

找p的父元素的几个特定的子元素：

n 如果是数字，就是选择第n(1,2,3…)个子元素
n 可以是关键字：even 偶数，odd 奇数
n 可以是公式：常见的公式如下( 如果n是公式，则从0开始计算，但是忽略第0个元素或者超出了元素的个数)

p:nth-child(2)
{
background:#ff0000;
}

nth-child(2n)    :偶数 0没有 2 4 6 8
nth-child(2n+1)：奇数  1 3 5 7
nth-child(5n)     ：5   10   15...
nth-child(n+5)    ：从第五个开始（包含第五个）到最后
nth-child(-n+5)    ：前5个（包含第五个）

nth-child,nth-of-type区别

p:nth-child父元素的所有孩子，**再从中匹配P测试链接-带上div哦，适合无序列表
p:nth-of-type父元素指定类型的孩子测试链接-p序号对着呢

伪元素选择器

新创建的这个元素在文档树中是找不到的，所以我们称为伪元素；

before和after必须有content 属性

当插入的内容定义宽高和其他属性时，即块级元素（必须通过display转换，因为默认是一个行内元素）。

::before在元素内部的前面插入内容。
::after在元素内部的后面插入内容。

<div>必须带一个属性content</div>

 div::before {
            content: "我是插入的内容";
            background: #572eb8;
        }