CSS——选择器及选择器的组合

为网页添加样式

术语解释

h1{
    color: red;
    background-color: lightblue;
    text-align: center;
}

CSS代码书写位置

1. 内部样式表

书写在style元素中

2. 内联样式表，元素样式表

直接书写在元素style属性中

3. 外部样式表[推荐]

<link rel="stylesheet" href="./css/index.css">

1). 外部样式可以解决多页面样式重复问题
2). 有利于浏览器缓存，从而提高页面响应速度
3). 有利于代码分离（HTML和CSS），更容易阅读和维护

css规则=选择器+声明块

声明块

出现在大括号中

声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。

选择器

选择器：帮助你精准的选中想要选择的元素

1. ID选择器：选中的是对应的id值的元素

2. 元素选择器

3. 类选择器

<style>
        .red {
            color:red;
            font-size: 2em;
        }
</style>

4. 通配符选择器

*，选中所有元素

5. 属性选择器

根据属性名和属性值选中元素

<!-- 选中所有具有href属性的元素 -->
[href]{
    color:red;
}

[href="https://www.sina.com"]{
    color:red;
}

[href$="baidu.com"]{
    color:#008c8c;
}

[class*="b"]{
    color:#008c8c;
}

6. 伪类选择器

选中某些元素的某种状态

1） link：超链接未访问时的状态

2） visited:超链接访问过后的状态

3） hover：鼠标悬停状态

4） active：激活状态，鼠标按下状态

爱恨法则：love hate

<!-- 鼠标悬停时的a元素状态 -->
a:hover{
    color:red;
}

<!-- 鼠标按下时元素状态 -->
a:hover{
    color:#008c8c;
}

7. 伪元素选择器

before

after

span::before{
    content:"《";
    color:red;
}

span::after{
    content:"》";
    color:red;
}

选择器的组合

1. 并且

p.red{
    color:red;
}

2. 后代元素—— 空格

.abc .bcd{
    color:#008c8c;
}

3. 子元素—— >

.abc>.bcd{
    color:red;
}

4. 后面出现的相邻兄弟元素—— +

.special+li{
    color:#008c8c;
}

5. 后面出现的所有兄弟元素—— ~

.special~li{
    color:#008c8c;
}

选择器的并列

多个选择器，用逗号分隔

语法糖

.special~li，p{
    color:#008c8c;
}