一分钟看懂HTML和CSS(Lebyte,Lebytejava,LebyteArchitecture)4
时间:2023-04-05 00:23:18
HTML5
HTML和CSS(四)主要内容如果你想成为一名优秀的java架构师,看这里→乐子免费公开课(腾讯课堂)如果需要更多信息请点击右侧→这是一条不归路,有秃顶风险,请慎重选择!CSS选择器在CSS中,选择器是一种模式,用于选择需要设置样式的元素。CSS选择器有很多种,掌握常用的即可;基本选择器通用选择器选择所有**{......}*{color:orange;}元素选择器选择指定标签元素名{.....}p{颜色:红色;font-size:20px;}ID选择器选择指定id属性值集合的元素##idattributevalue{......}#p1{font-weight:bold;}class选择器选择设置了指定class属性值的元素..classattributevalue{......}.hidden{display:none;}分组选择器当多个元素具有相同的样式属性时,可以一起调用一个声明,元素之间用逗号分隔selector1,Selector2,...{......}h2,#pre1{颜色为橙色;font-style:italic;}CSS样式的优先级根据选择器的精度/权重决定,常见的权重如下,权重越大优先级越高元素选择器:1类选择器:10Idselector:100Inlinestyle:1000CombinationselectorsCSS组合选择器说明了两个选择器的直接关系。CSS组合选择器包括各种简单选择器的组合。CSS中有四种组合:后代选择器(以空格分隔)、子元素选择器(以大于号分隔)、相邻兄弟选择器(以加号分隔)、普通兄弟选择器(由波浪线分隔)。后代选择器(派生选择器)用于选择指定标签元素下的后代元素,以空格分隔Selector1Selector2{......}.foodli{border:1pxsolidred;}Food
水果Vegetables子元素选择器用于全选指定label元素的第一代子元素,用大于号分隔selector1+selector2{......}#d+div{border:1pxsolidred;}html代码同上NeighboringSiblingSelector选择紧跟在具有相同父元素的另一个元素之后的元素。用加号分隔selector1+selector2{…}#d+div{border:1pxsolidred;}相邻selector1
AdjacentBrotherSelector2
OrdinaryBrotherSelector选择紧跟在另一个元素之后的所有元素,并且都具有相同的父元素元素,由波浪号分隔selector1~selector2{......}li~li{background-color:yellow;}
li~li{background-color:yellow;}