一分钟了解HTML 与 CSS（乐字节，乐字节java，乐字节架构）4

HTML 与 CSS（4）

主要内容

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

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

CSS选择器

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

​ CSS选择器有很多，掌握常用的即可；

基本选择器

通用选择器

选择所有 *

* {
    ......
}

* {
    color: orange;
}

元素选择器

选择指定标签

元素名称 {
    ......
}

p {
    color: red;
    font-size: 20px;
}

ID选择器

选择设置过指定id属性值的元素 #

#id属性值 {
    ......
}

#p1 {
    font-weight: bold;
}

类选择器

选择设置过指定class属性值的元素 .

.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;
}

食物

    
水果
        

            
香蕉
            
苹果
            
梨
        
    
    
蔬菜
        

            
白菜
            
油菜
            
卷心菜
        
    

子元素选择器

​ 用于选择指定标签元素的所有第一代子元素，以大于号分隔

选择器1 + 选择器2 {
    ......
}

#d + div {
    border: 1px solid red;
}

html代码同上

相邻兄弟选择器

​ 可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔

选择器1 + 选择器2 {
    ......
}

#d + div {
    border: 1px solid red;
}

    相邻兄弟选择器1
    

        
开心麻花
        
贾玲
        
宋小宝
    


    相邻兄弟选择器2

普通兄弟选择器

​ 选择紧接在另一个元素后的所有元素，而且二者有相同的父元素，以波浪线分隔

选择器1 ~ 选择器2 {
    ......
}

li ~ li {
    background-color : yellow;
}

    普通兄弟选择器1
    

        
开心麻花
        
贾玲
        
宋小宝
        
沈腾
        
王宁
    

li ~ li {
    background-color : yellow;
}

    普通兄弟选择器1
    

        
开心麻花
        
贾玲
        
宋小宝
        
沈腾
        
王宁