广西南宁网站制作,个体做敦煌网站怎么样,沈阳包装设计公司,网站内容的设计与实现文章目录 一、CSS高级选择器有哪些呢#xff1f;二、高级选择器的应用1、层次选择器后代选择器子选择器相邻兄弟选择器通用兄弟选择器 2、结构伪类选择器#xff08;不常用#xff09;3、属性选择器E[attr]E[attrval]E[attr^val]E[attr$val]E[attr*val] 一、CSS高级选择器有… 文章目录 一、CSS高级选择器有哪些呢二、高级选择器的应用1、层次选择器后代选择器子选择器相邻兄弟选择器通用兄弟选择器 2、结构伪类选择器不常用3、属性选择器E[attr]E[attrval]E[attr^val]E[attr$val]E[attr*val] 一、CSS高级选择器有哪些呢
1、层次选择器 2、结构伪类选择器 3、属性选择器
二、高级选择器的应用
1、层次选择器
选择器类型功能描述E F后代选择器选择匹配的F元素且匹配的F元素被包含在匹配的E元素内EF子选择器选择匹配的F元素且匹配的F元素是匹配的E元素的子元素EF相邻兄弟选择器选择匹配的F元素且匹配的F元素紧位于匹配的E元素后面E~F通用兄弟选择器选择匹配的F元素且位于匹配的E元素后的所有匹配的F元素
后代选择器
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
stylebody p{width: 200px;height: 200px;background-color: red;}
/style
body
p/p
/body
/html运行结果
子选择器
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
stylebodyp{background-color: red;}p{width: 200px;height: 200px;background-color: black;}
/style
body
p/p
p/p
p/p
/body
/html运行结果
相邻兄弟选择器
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
style.aap{background-color: red;}p{width: 200px;height: 200px;background-color: black;}
/style
body
p classaa/p
p/p
p/p
/body
/html运行结果
通用兄弟选择器
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
style.aa~p{background-color: red;}p{width: 200px;height: 200px;background-color: black;}
/style
body
p classaa/p
p/p
p/p
/body
/html运行结果
2、结构伪类选择器不常用
属性选择器功能描述E:first-child作为父元素的第一个子元素的元素EE:last-child作为父元素的最后一个子元素的元素EE F:nth-child(n)选择父级元素E的第n个子元素Fn可以是1、2、3关键字为even、oddE:first-of-type选择父元素内具有指定类型的第一个E元素E:last-of-type选择父元素内具有指定类型的最后一个E元素E F:nth-of-type(n)选择父元素内具有指定类型的第n个F元素
3、属性选择器
属性选择器功能描述E[attr]选择匹配具有属性attr的E元素E[attrval]选择匹配具有属性attr的E元素,并且属性值为val其中val区分大小写E[attr^val]选选择匹配元素E且E元素定义了属性attr其属性值是以val开头的任意字符串E[attr$val]选择匹配元素E且E元素定义了属性attr其属性值是以val结尾的任意字符串E[attr*val]选择匹配元素E且E元素定义了属性attr其属性值包含了“val”换句话说字符串val与属性值中的任意位置相匹配
E[attr]
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
stylep[class]{background-color: red;}p{width: 100px;height: 100px;background-color: black;}
/style
body
p classaaaa/p
p classqwert/p
p classhjekl/p
/body
/html运行结果
E[attrval]
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
stylep[classaaaa]{background-color: red;}p{width: 100px;height: 100px;background-color: black;}
/style
body
p classaaaa/p
p classqwert/p
p classhjekl/p
/body
/html运行结果
E[attr^val]
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
stylep[class^qw]{background-color: red;}p{width: 100px;height: 100px;background-color: black;}
/style
body
p classaaaa/p
p classqwert/p
p classhjekl/p
/body
/html运行结果
E[attr$val]
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
stylep[class$kl]{background-color: red;}p{width: 100px;height: 100px;background-color: black;}
/style
body
p classaaaa/p
p classqwert/p
p classhjekl/p
/body
/html运行结果
E[attr*val]
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
stylep[class*e]{background-color: red;}p{width: 100px;height: 100px;background-color: black;}
/style
body
p classaaaa/p
p classqwert/p
p classhjekl/p
/body
/html运行结果
