H5 15-交集选择器

【H5 15-交集选择器】的更多相关文章

15-交集选择器我是段落我是段落我是段落我是段落我是段落 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15-交集选择器</title> <style> /* p.para1{ color: red; } */ .para1#identity{ color: blue; } <…

css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器

高级选择器: 后代选择器子代选择器并集选择器交集选择器一.后代选择器: 使用空格表示后代选择器,父元素的后代(包括儿子,孙子,从孙子) 也就是说,box类下的所有span标签字体颜色都被设置为了红色 .box span{ color:red; } 二.子代选择器: 使用>表示子代选择器. 之选中box类下第一层的span标签设置为红色 .box>span{ color:red; } 三.并集选择器: 多个选择器之间用逗号隔开,表示选中页面中的多个标签, 一些共性的元素可以使用并集选…

HTML连载19-子元素选择器&交集选择器

一.子元素选择器 1.定义:找到指定标签中所有特定的直接子元素,然后设置属性 2.格式: 标签名称一>标签名称2{ 属性:值: } 3.释义:先找到叫做“标签名称1”的标签,然后在这个标签中查找所有直接子元素名称叫做“标签名称2”的元素 div>p{ color:red; } .......省略代码....... <div> <p>我是段落一</p> <p>我是段落2</p> <p>我是段落3</p> <…

CSS 交集选择器和并集选择器

交集选择器是and 也就是要同时满足且只能交2个只能交2个只能交2个,第一个是标记,第二个是class或者id,之间不可以有空格 eg: span.small-height 并集选择器是or,也就是左边或者右边用","隔开. 交集选择器 span.small-height{width:100%;height:30px;} 并集选择器 span, .p2, #p3{ display:inline; color:red; } 并集选择器内有交集选择器 span.small-…

H5 68-伪元素选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>68-伪元素选择器</title> <style> *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; background-color: red; } /* p{ widt…

H5 21-属性选择器下

21-属性选择器下 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>21-属性选择器下</title> <style> /* img[alt^=abc]{ color: red; } */ /* img[alt|=abc]{ color: red; } img[alt$=abc]…

H5 20-属性选择器上

20-属性选择器上 --> 我是段落1 我是段落2 我是段落3 我是段落4 我是段落5 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>20-属性选择器上</title> <style> /* p[id]{ color: red; } */ p[class=cc]{ color: blu…

H5 17-兄弟选择器

17-兄弟选择器我是标题我是超链接我是段落我是段落我是段落我是标题我是段落我是段落我是段落 --> 我是标题我是超链接我是段落我是段落我是超链接我是段落我是标题我是段落我是段落我是段落 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>17-兄弟选择器</title>…

H5 16-并集选择器

16-并集选择器我是标题我是段落我是段落我是段落 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>16-并集选择器</title> <style> /* .ht{ color: red; } .para{ color: red; } */ .ht,.para{ color: red;…

H5 14-后代选择器和子元素选择器

14-后代选择器和子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>14-后代选择器和子元素选择器</title> </head> <body> <!-- 1.后代选择器和子元素选择器之间的区别? 1.1 后代选择器使用空格作为连接符号子元素选择器使用>作…