一分钟了解HTML 与 CSS(乐字节,乐字节java,乐字节架构)4

xiaohuli 2020-06-17

HTML 与 CSS(4)

主要内容

如果你想成为一名优秀的java架构师,看这里 → 乐字节免费公开课(腾讯课堂)
[.]()

如需要跟多资料请点击右侧 → 这是一条不归路,有秃头风险,请慎重选择!

一分钟了解HTML 与 CSS(乐字节,乐字节java,乐字节架构)4

CSS选择器

? 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。

? CSS选择器有很多,掌握常用的即可;

基本选择器

通用选择器

选择所有 <font color="red">*</font>

* {
    ......
}
* {
    color: orange;
}
元素选择器

选择指定标签

元素名称 {
    ......
}
p {
    color: red;
    font-size: 20px;
}
ID选择器

选择设置过指定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>

相关推荐

aSuncat / 0评论 2020-08-18