css3属性选择器

CSS3选择器

一、基本选择器

1.通用选择器(通配符)

*{margin:0; padding:0;}

2.标签选择器(元素选择符)

a{text-decoration:none;}

3.id选择器

4.class选择器

.footer{color:blue;}

5.群组选择器

h1,h2,h3,h4,h5,h6{font-weight:100;}

二、层次选择器(关系选择器)

1.E F 后代选择器

匹配E元素下所有的子元素F

eg: .box a{color:red;}

匹配.box下所有子元素a

2.E>F 子选择器

匹配E元素下第一级子元素F

eg: .box>a{color:red;}

匹配.box下第一级子元素a

3.E+F 相邻兄弟选择器

匹配E元素后紧邻的F元素(有且仅有一个)

eg: .box+h1{color:blue;}

匹配.box后紧邻的h1元素

4.E~F 通用兄弟选择器

匹配E元素后所有的F元素(有可能匹配到多个)

eg: .box~h1{color:blue;}

匹配.box后所有的h1元素

◆ 伪类选择器

三、动态伪类选择器

1. E:link 超链接没有被访问过时的状态
2. E:visited 超链接访问过后的状态
3. E:hover 鼠标滑过(鼠标悬停在E上)时的状态
4. E:active 鼠标按下(E元素被激活)时的状态
5. E:focus 光标聚焦时触发的状态

eg: input:focus{border:2px solid red;}

四、结构性伪类选择器

1. :first-child 匹配某个父元素下第一个子元素

eg: ul li:first-child{color:red;}

匹配ul下第一个子元素li

1. :last-child 匹配某个父元素下最后一个子元素

eg: ul li:last-child{color:blue;}

匹配ul下最后一个子元素li

注：a) :first-child <=> :nth-child(1) 都是匹配父元素下第一个子元素

b) :last-child   <=> :nth-last-child(1) 

都是匹配父元素下最后一个子元素

1. :nth-child(n) 匹配父元素下第n个子元素

eg: ul li:nth-child(4){color:pink;}

匹配ul下第4个子元素li

1. :nth-child(2n) <=> :nth-child(even)

匹配父元素下第偶数个子元素

1. :nth-child(2n+1) <=> :nth-child(odd)

匹配父元素下第奇数个子元素

1. :nth-last-child(n) 匹配父元素下从后往前找的第n个子元素

eg: ul li:nth-last-child(2){color:blue;}

匹配ul下倒数第2个li

---

1. :first-of-type 匹配某个父元素下指定类型的第一个子元素

eg: ul li:first-of-type{color:red;}

匹配ul下li这种类型的子元素中的第一个

1. :last-of-type 匹配某个父元素下指定类型的最后一个子元素

eg: ul li:last-of-type{color:blue;}

匹配ul下li这种类型的子元素中的最后一个

1. :nth-of-type(n) 匹配父元素下指定类型的第n个子元素

eg: ul li:nth-of-type(3){color:pink;}

匹配ul下li这种类型的子元素中的第3个

1. :nth-last-of-type(n) 匹配父元素下指定类型的倒数第n个子元素

eg: ul li:nth-last-of-type(3){color:purple;}

匹配ul下li这种类型的子元素中的倒数第三个

---

1. :only-child 匹配父元素下唯一一个子元素
2. :only-of-type 匹配父元素下指定类型的唯一一个子元素
3. :empty 匹配内容为空的元素(空格，回车换行符都不能有)
4. :root 匹配根元素html

五、UI状态伪类选择器

1. E:checked 匹配选中状态的单选或复选按钮

eg: input:checked+label{color:red;}

匹配选中状态的input元素后面紧邻的label元素

1. E:disabled 匹配禁用状态的表单元素

eg: input:disabled{background:red;}

1. E:enabled 匹配启用状态的表单元素

eg: input:enabled{border:2px solid green;}

六、目标伪类选择器

语法： E:target 匹配锚点链接连接到的那个元素

eg: p:target{display:block;}

当锚点链接连接到p元素时显示

七、语言伪类选择器

语法： E:lang(val) 匹配含有lang属性，并且值为val的E元素

eg: html:lang(en){font-family:"楷体";}

八、否定伪类选择器

语法：E:not(F) 匹配不满足条件F的E元素

eg: li:not([class="lis"]){background:pink;}

匹配不满足条件class名为lis的li元素

九、属性选择器

1. E[attr] 匹配含有attr属性的E元素

eg: a[title]{text-decoration:none;}

匹配含有title属性的a元素

1. E[attr=val] 匹配含有attr属性并且值为val的E元素

eg: a[title="千锋教育"]{color:red;}

匹配含有title属性并且值为千锋教育的a元素

1. E[attr^=val] 匹配含有attr属性并且值以val开头的E元素

eg: a[href^="http"]{color:gray;}

匹配含有href属性，并且值以http开头的a元素

1. E[attr$=val] 匹配含有attr属性并且值以val结尾的E元素

eg: a[href$="com"]{background:orange;}

匹配含有href属性，并且值以com结尾的a元素

1. E[attr|=val] 匹配含有attr属性并且值以val-开头或值为val的E元素

eg: a[class|="link"]{color:blue;}

匹配含有class属性，并且值以link-开头，或值为link的a元素

1. E[attr*=val] 匹配含有attr属性，并且属性值中含有val的E元素

eg: a[title*="教育"]{color:red;}

匹配含有title属性，并且属性值中含有教育两个字的a元素

1. E[attr~=val] 匹配含有attr属性，并且属性值中含有val这个词的E元素

eg: a[title~="教育"]{color:green;}

匹配含有title属性，并且属性值中含有教育这个词的a元素

转载于:https://www.cnblogs.com/mixcoding/p/10655452.html