VsCode CSS3之样式选择器 day3（新手向8）

本文链接：https://blog.csdn.net/weixin_42515365/article/details/108011840

I.什么是选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
html中于用不同的样式生效于不同的页面元素的选择方法

II.CSS3中有哪些选择器

最常用的样式选择器有：
ID选择器，有标签选择器，有Class选择器。
复合选择器：
并列选择器 a , .d1, #footer {}
继承选择器 p a {}

/* 标签选择器 */
        div {
            width: 100px;
            height: 100px;
            background: cadetblue;
        }

/* ID选择器 */
        #box1 {
            width: 100px;
            height: 100px;
            background: greenyellow;
        }

/* class选择器 */
        .box1 {
            width: 100px;
            height: 100px;
            background: orange;
        }

/* 并列选择器 */
        a,
        .box2 {
            widows: 200px;
        }

/* 大继承选择器 
        在页面中符合选择器的路径的元素都选中,可以跳级
        */
        p a span {
            font-size: 20px;
        }

/* 
            小继承选择器
            在页面中符合选择器的路径的元素都选中,不可以跳级
         */
        p>a>span {
            font-size: 30px;
        }

新加入的一些选择可以为我们前端工作带来更方便选择元素的方法。
在这里插入图片描述

III.代码实现

源码：

<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: Zzelcerton
 * @Date: 2020-08-14 18:50:23
 * @LastEditors: Zzelcerton
 * @LastEditTime: 2020-08-14 19:31:17
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式选择器</title>
    <style>
        /* 标签选择器 */
        div {
            width: 100px;
            height: 100px;
            background: cadetblue;
        }

        /* ID选择器 */
        #box1 {
            width: 100px;
            height: 100px;
            background: greenyellow;
        }

        /* class选择器 */
        .box1 {
            width: 100px;
            height: 100px;
            background: orange;
        }

        /* 并列选择器 */
        a,
        .box2 {
            widows: 200px;
        }

        /* 大继承选择器 
        在页面中符合选择器的路径的元素都选中,可以跳级
        */
        p a span {
            font-size: 20px;
        }

        /* 
            小继承选择器
            在页面中符合选择器的路径的元素都选中,不可以跳级
         */
        p>a>span {
            font-size: 30px;
        }

        input[name] {
            color: hotpink;
        }

        input[type=text] {
            font-size: 20px;
        }

        /* 
            在选择器中带有：号的选择器我们叫做伪类选择器
            这种选择器一般来讲是选中的元素在某指定状态下的样子。
            另一种伪类选择器指的是元素在特定位的样子
         */
        ul li:first-of-type {
            font-size: 20px;
            font-weight: bold;
            color: red;
        }

        ul li:last-of-type {
            font-size: 10px;
        }

        /* 这里使用的索引是从1开始的，不是从0开始 */
        ul>li:nth-of-type(2) {
            color: blue;
        }
    </style>
</head>

<body>
    <div></div>
    <div id="box1"></div>
    <div class="box1"></div>
    <P>
        <a href="">
            <b>
                <span>1</span>
            </b>
        </a>
    </P>
    <p><input name="" type="text" value="html"></p>
    <p><input type="text" value="css"></p>
    <p><input type="number" value="123"></p>
    <ul>
        <li>小黑</li>
        <li>小白</li>
        <li>小蓝</li>
        <li>小红</li>
    </ul>
    <ul>
        <li>小白</li>
        <li>小黑</li>
        <li>小蓝</li>
        <li>小绿</li>
    </ul>
</body>

</html>