CSS基础（1.选择器）

先来一个小例子，告诉你什么是CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="background-color: gold; height: 66px;">1</div>
<!--style里就叫做CSS，可以设置很多，比如第一个设置颜色，第二个设置高度-->
<div style="background-color: olivedrab; height: 66px;">1</div>
<div></div>
</body>
</html>

接下来我们就深入了解：

CSS里面的注释，和C++有相同之处！

/*xxxxxxx*/

选择器：（其实可以理解成函数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            background-color: rebeccapurple; height: 66px;
        }
        .c1{
            background-color: olivedrab;
            height: 10px;
        }
    </style>
</head>
<body>
<div id="i1">1</div>
<!--id属性是寻找#号
这种很罕见，因为id是不可以重复的！
如果后边要只用i1的内容，再次写id="i1"是错误的
必须要重新写一个#号的内容，id="i2"-->
<div class="c1">1</div>
<!--class属性是寻找.c号
class是可以重复使用的
这种是很常用的-->
<div></div>
</body>
</html>

还有一种写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2,#i3{
            background-color: olivedrab;
            height: 10px;
        }
    </style>
</head>
<body>
<div id="i1">1</div>
<div id="i2">1</div>
<div id="i3">1</div>
<div></div>
</body>
</html>

这里也可以用.c1,.c2一样的方法

接下来呢：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: blue;
            color: black;
        }
        /*找到所有的div标签，使他们的背景为蓝色，字体颜色为黑色*/
    </style>
</head>
<body>
<div>1</div>
<span>这里不是div
<div>
    嵌套在span里面的div
</div>
这里也不是div</span>
<div >1</div>
</body>
</html>

CSS基础（1.选择器）

那么，如果只想给span里面的div加上style呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span div{
            background-color: blue;
            color: black;
        }
        /*当然也可以写成 .c1 div  表示，找所有class="c1"标签内所有的div*/
        /*也可以套很多层，不过如果你套的太多，是不妥当的*/
  </style>
</head>
<body>
<div>1</div>
<span>这里不是div
<div>
    嵌套在span里面的div
</div>
这里也不是div</span>
<div >1</div>
</body>
</html>

CSS基础（1.选择器）

还有一种：属性选择器（在头里定义好，身体里使用的时候，用头定义的即可）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type="text"]{width: 100px; height: 100px;}
        input[type="password"]{width: 100px; height: 100px;}
    </style>
</head>
<body>
<input type="text">
<input type="password">
</body>
</html>

CSS基础（1.选择器）

另外：这里还有一个问题，就是当属性有相同的时候，存在

优先级：

1.标签上的style优先

2.编写顺序，越往下越优先（就近原则）

CSS基础（1.选择器）

相关推荐