css学习总结（1）

本篇文章主要介绍css即层叠样式表的选择器

 

首先我们知道了css控制着页面的样式

那么它是如何控制页面样式呢？

答案：通过选择器

 

css选择器可以分为以下几种

1、元素选择器，即直接使用元素名作为选择器，比如： 

　　div {

　　　　width:400px；

　　　　height:400px;

　　}

以上代码会把页面上的所有div变成宽高400px

 

2.id选择器，即使用id名作为选择器，比如： 

　　#test {

　　　　width:400px；

　　　　height:400px;

　　　　background:red;

　　}

以上代码会把页面上的所有id为test的元素变成宽高400px,背景色为红色的正方形盒子

比如：<div id="test">我也去试一试</div>

 

3.class选择器，即使用class名作为选择器，比如： 

　　.test {

　　　　width:400px；

　　　　height:400px;

　　　　background:red;

　　}

以上代码会把页面上的所有class为test的元素变成宽高400px,背景色为红色的正方形盒子

比如：<div class="test">我也去试一试</div>

 

4.组合选择器

组合选择器包括 后代选择器、子代选择器、兄弟选择器、多元素选择器、相邻选择器

1）后代选择器，比如一个div盒子里还嵌套了一个class为test的div盒子，我们可以通过(注意下面代码div后面有空格)

　　div .test {

　　　　width:400px;

　　}

来修改那个class为test的div的样式（这种方法会使所有的div下的.test都变成宽400px）

2)子代选择器，比如：

　　<!-- html部分 -->

　　<div class="my-test">

　　　　<span>子代选择器说明： <span>

　　　　<p class="test">只有我才生效</p>

　　　　<div class="test">

　　　　　　<p class="test">我是不生效的</p>

　　　　</div>

　　</div>

　　// css部分

　　.my-test>p {

　　　　color:red;

　　}

以上代码只会让my-test这个div下面一级的（也就是子级）p元素字体颜色变成红色

3）兄弟选择器，还是这段代码做说明

　　<div class="my-test">

　　　　<span>兄弟选择器说明： <span>

　　　　<p class="test">只有我才生效</p>

　　　　<div class="test">

　　　　　　<p class="test">我是不生效的</p>

　　　　</div>

　　</div>

从上面代码我们可以看到span和p标签是同一级的，都是my-test的子级

我们可以用兄弟选择器一起改它们的样式

　　span~p {

　　　　color:red;

　　}

那么它们字体颜色都是红色了

4）多元素选择器，还是用代码说明

　　<div class="my-test">

　　　　<span>兄弟选择器说明： <span>

　　　　<p class="test">只有我才生效</p>

　　　　<div class="test">

　　　　　　<p class="test">我是不生效的</p>

　　　　</div>

　　</div>

多元素选择器就是同时操作多个选择器：

　　span, p {

　　　　color:red;

　　}

5)相邻选择器

　　<div class="my-test">

　　　　<span>兄弟选择器说明： <span>

　　　　<p class="test">只有我才生效</p>

　　　　<div class="test">

　　　　　　<p class="test">我是不生效的</p>

　　　　</div>

　　</div>

可以改变相邻元素的样式：

　　span+p {

　　　　color:red;

　　}

　　但是只能是相邻的下一个元素，才能使用相邻选择器

 

5.伪类选择器

伪类选择器有很多，不做一一介绍了，大家可以看这篇文章：https://new.qq.com/omn/20181011/20181011A21S5F.html