CSS样式与选择器精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/HelloWord176/article/details/100071863

一：CSS：又称层叠样式表(层叠唯一)谁权重高，谁生效；相同的属性层叠唯一，不同的属性共同生效！

样式的三种写法: 行内样式、内部样式、外部样式；

行内样式：写在标签身上，控制范围最小，但是权重是最高； style = “”

内部样式：写在head里面，控制范围为当前页面，权重中等；style

外部样式：写在head里面需要用link标签引入，控制所有引入的页面（大范围控制），权重最弱！

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <link rel="stylesheet" href="style.css"><!-- 单独创建CSS文件，引入外部样式 -->
    <style>
        body {
            background-color: blue;/*内部样式*/
        }
    </style>
</head>
<body style="background:yellow;"><!-- 行内样式 -->
    <h1 style="text-align:center;">本节内容CSS样式学习</h1>
</body>
</html>

样式的生效机制：

1. 当css属性为平行机制时，谁离标签近谁更靠近，谁生效，就近原则（靠下原则，谁在最后，样式就表现什么）！

2. 同类型选择器谁描述更清楚，谁的权重（生效）最高！（位置关系无效）

二：选择器

1.标签选择器：控制当前页面的某一个标签，控制范围广但是不精准！

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <style>
        p {  /*标签选择器*/
            font-size: 25px;
        }
    </style>
</head>
<body>
    <h1 style="text-align:center;">本节内容CSS选择器</h1>
    <p>标签选择器</p>
    <span>分组选择器</span>
</body>
</html>

2.分组选择器：（中间有逗号，）

控制当前页面的某几种标签

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <style>
        p {  /*标签选择器*/
            font-size: 25px;
        }
        h1,p,span {  /*分组选择器*/
            color: green;
        }
    </style>
</head>
<body>
    <h1 style="text-align:center;">本节内容CSS选择器</h1>
    <p>标签选择器</p>
    <span>分组选择器</span>
    <h3>怎么办</h3>
</body>
</html>

3. 子代选择器（中间用 >）

用于选择指定标签下的第一代的子元素称之为“子代选择器” ,必须是父子关系！

语法：选择器 > 选择器｛CSS样式代码｝

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div>p {    /*中间用>表示为子代选择器*/
           font-size: 30px;
           color:red; 
        }
    </style>
</head>
<body>
    <div>
        <p>子代选择器练习</p>
        <h1>子代选择器必须是父元素的子元素才可以</h1>
    </div>
</body>
</html>

4. 后代选择/路径/派生选择器：（中间用空格）

根据标签的路径，控制标签（适用于嵌套式），路径不可逆，从大到小。

文字属性能够从祖先元素继承样式！

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <style>
        div p span {/*路径派生选择器写法，中间用空格*/
            color: red;
        }
        h2 p span {
            color:pink;
        }
    </style>
</head>
<body>
    <h1 style="text-align:center;">本节内容CSS选择器之派生选择器</h1>
    <div>
        <p>
            <span>派生路径选择器</span>
        </p>
    </div>
    <h2>
        <p>
            <span>路径选择器</span>
        </p>
    </h2>
    <strong>问：如何给第一个span字体颜色改为红色？第二个span字体颜色改为粉色？</strong><br>
    <strong>可以使用派生路径选择器，进行样式修改，<b style="color:red;">派生路径选择器中间用空格隔开即可！</b></strong>
</body>
</html>

派生路径选择器和分组选择器可以一起使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <style>
        div p span,h2 p span {
            /*路径派生选择器和分组选择器可以共同使用，路径派生选择器中间用空格加上分组中间用逗号隔开*/
            color: red;
        }
        span {
            color: yellow;
        }
    </style>
</head>
<body>
    <h1 style="text-align:center;">本节内容CSS选择器之派生选择器</h1>
    <div>
        <p>
            <span>派生路径选择器</span>
        </p>
    </div>
    <h2>
        <p>
            <span>路径选择器</span>
        </p>
    </h2>
    <span>这个span标签我想颜色改为黄色</span><br>
    <strong>问：如何给第一个和第二个span字体颜色改为红色？第三个span字体颜色改为黄色？</strong><br>
    <strong>答：可以使用派生路径选择器和分组选择器同时进行样式修改，<b style="color:red;">派生路径选择器和分组选择器中间用英文状态下逗号隔开即可！</b></strong>
</body>
</html>

5. class 类选择器（标签前面加 . ）!

给标签命名，可以重复使用，非常推荐使用！（命名规则不能拼音、中文、数字）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式</title>
    <style>
        .box {  /*class 选择器*/
            font-size: 30px;
            color: yellow;
        }
        .box p span {  /*calss选择器和派生路径选择器一起使用*//*所以最后这个字的最终颜色为红色*/
            color: red;
        }
    </style>
</head>
<body>
    <h1 style="text-align:center;">本节内容CSS选择器之class选择器</h1>
    <div class="box">
        <p>
            <span>class选择器</span>
        </p>
    </div>
    <strong>问：如何将span标签中的文字改成30px，字体颜色改为yellow？</strong><br>
    <strong>答：可以使用class选择器或者class选择器或者派生路径选择器都可以！<br>
        calss 选择器在标签前面加 . 进行选择！
    </strong>
</body>
</html>