2020-10-03

前端学习day2（上）

<h1>标题</h1> <p id="first">锄禾日当午</p> <p class="mid">汗滴禾下土</p> <p class="mid">谁知盘中餐</p> <p>粒粒皆辛苦</p> p{ color: blue; } #first{ color: blueviolet; } .mid{ color: brown; } h1{ color: darkorange; } *{ color: chartreuse; }

元素选择器，例如p，h1 语法：p{} id选择器，例如#first 语法：#first{} 类选择器，例如.mid 语法：.mid{} 通配选择器,*

<p class="mid">谁知盘中餐</p> <div class="mid">这是一句话</div> div.mid{ color: darkturquoise; }

当不同标签有相同类名称的时候，可以使用交集选择器来选中某一个

<h1>标题</h1> <span>这又是一句话</span> h1,span{ color: fuchsia; }

并集选择器，同时选择多个元素，中间用逗号分开

<div> 这是一个div <p> 这是一个p，div里面的p <span>这是一个span，p里面的span</span> </p> <span>这是div里面的span</span> </div> div > span{ color: fuchsia; } div span{ color: green; }

子元素选择器，选中指定父元素的指定子元素 语法：父元素 > 子元素，如div>span，最后一个span里面的内容会改变颜色 后代元素选择器，选中指定元素的指定后代元素 语法：祖先 后代，如div span，以上两个span都会改变颜色

<div> 这是一个div <p> 这是一个p，div里面的p <span>这是一个span，p里面的span</span> </p> <span>这是p后面的第一个span</span> <span>这是div里面的span</span> </div> p + span{ color: green; } p ~ span{ font-size: 40px; }

选择下一个兄弟，语法：前一个 + 后一个，上面第二个span颜色会改变 选择下边所有兄弟，语法：前一个 ~ 后一个，上面第二个和第三个span的字体大小都会改变

<p title="abcd">锄禾日当午</p> <p title="efg">汗滴禾下土</p> <p title="qweabcd">谁知盘中餐</p> <p title="qwabcder">粒粒皆辛苦</p> p[title]{ color: green; } p[title=abcd]{ font-family: 'Times New Roman', Times, serif; } p[title^=abcd]{ font-size: 40px; } p[title$=abcd]{ font-style: italic; } p[title*=abc]{ color: lightsalmon; }

[属性名]选择含有指定属性的元素 [属性名=属性值]选择含有指定属性和属性值的元素 [属性名^=属性值]选择属性值以指定值开头的元素 [属性名$-属性值]选择属性值以指定值结尾的元素 [属性名*=属性值]选择展性值中含有某值的元素的元素