xiaohuli 2020-06-17
如果你想成为一名优秀的java架构师,看这里 → 乐字节免费公开课(腾讯课堂)
[.]()
如需要跟多资料请点击右侧 → 这是一条不归路,有秃头风险,请慎重选择!
? 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。
? CSS选择器有很多,掌握常用的即可;
选择所有 <font color="red">*</font>
* { ...... }
* { color: orange; }
选择指定标签
元素名称 { ...... }
p { color: red; font-size: 20px; }
选择设置过指定id属性值的元素 <font color="red">#</font>
#id属性值 { ...... }
#p1 { font-weight: bold; }
选择设置过指定class属性值的元素 <font color="red">.</font>
.class属性值 { ...... }
.hidden { display: none; }
? 当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔
选择器1,选择器2,... { ...... }
h2 , #pre1 { color: orange; font-style: italic; }
? CSS样式的优先级,是根据选择器的精确度/权重来决定的,常见的权重如下,权重越大,优先级越高
? 元素选择器:1
? 类选择器:10
? id选择器:100
? 内联样式:1000
? CSS组合选择器说明了两个选择器直接的关系。 CSS组合选择符包括各种简单选择符的组合方式。
? 在 CSS 中包含了四种组合方式: 后代选取器(以空格分隔),子元素选择器(以大于号分隔),相邻兄弟选择器(以加号分隔),普通兄弟选择器(以波浪线分隔)。
? 用于选择指定标签元素下的后辈元素,以空格分隔
选择器1 选择器2 { ...... }
.food li { border: 1px solid red; }
<h1>食物</h1> <ul class="food"> <li>水果 <ul> <li>香蕉</li> <li>苹果</li> <li>梨</li> </ul> </li> <li>蔬菜 <ul> <li>白菜</li> <li>油菜</li> <li>卷心菜</li> </ul> </li> </ul>
? 用于选择指定标签元素的所有第一代子元素,以大于号分隔
选择器1 + 选择器2 { ...... }
#d + div { border: 1px solid red; }
html代码同上
? 可选择紧接在另一元素后的元素,且二者有相同父元素。以加号分隔
选择器1 + 选择器2 { ...... }
#d + div { border: 1px solid red; }
<div id="d"> 相邻兄弟选择器1 <ul> <li>开心麻花</li> <li>贾玲</li> <li>宋小宝</li> </ul> </div> <div> 相邻兄弟选择器2 </div>
? 选择紧接在另一个元素后的所有元素,而且二者有相同的父元素,以波浪线分隔
选择器1 ~ 选择器2 { ...... }
li ~ li { background-color : yellow; }
<div> 普通兄弟选择器1 <ul> <li>开心麻花</li> <li>贾玲</li> <li>宋小宝</li> <li>沈腾</li> <li>王宁</li> </ul> </div>
li ~ li { background-color : yellow; }
<div> 普通兄弟选择器1 <ul> <li>开心麻花</li> <li>贾玲</li> <li>宋小宝</li> <li>沈腾</li> <li>王宁</li> </ul> </div>
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT