网站建设学习（七）——CSS选择器_关于我们|联系我们|版权声明 css怎么实现-优快云博客

本文链接：https://blog.youkuaiyun.com/QJM1995/article/details/86438658

上一篇引入了css语言用来装饰页面，这篇主要介绍css的用法，css分为选择器与属性值，选择器顾名思义就是网页如何选择css样式，在执行本篇代码时需要在同一目录下创建css选择器.css文件。

html：

<html>
<!--  标签html：内部包含整个HTML页面，所有的设计均在当前的html标签内部进行-->
    <head>
    <!--整个文件的头部，里面包括一些属性供浏览器识别解析，对用户不可见-->

        <title>标题</title>
        <!--标签title，说明整个页面的标题，最终显示在浏览器加载页面的标签页-->

        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <!--告诉浏览器以utf-8的码表进行解码，防止中文乱码，meta标签是无标签体标签，结束在开始标签后加反斜杠，即空标签-->

        <meta name="keywords" content="html,展示"/>
        <!--展示此网页的关键词，供搜索引擎使用，以“,”分开，其中关键词个数为权重，越多权重越低，一般为3到5个-->

        <meta name="description" content="html编程学习"/>
        <!--网页描述，展示在搜索引擎的网页的索引页面-->

        <link href="css选择器.css" rel="stylesheet"/>
        <!--引入css文件-->

    </head>


    <body>
    <!--整个文件的体，设计元素在这个部分中，最终展示给用户-->
    <!--div标签和spen标签将页面分区，便于格式化以及样式设计-->
    <div>
        标签选择器测试
    </div>

    <div class="class_test">
        类选择器测试
    </div>

    <div id="first">
        id选择器测试
    </div>

    <div class="class_two">
        并集选择器测试
    </div>
    <div id="second">
        并集选择器测试
    </div>

    <div>
        <span>
            交集选择器测试
        </span>
    </div>
    <span>通用选择器测试</span>

    <h1>伪类选择器测试</h1>

    <h2><strong>子元素选择器测试</strong></h2>
    <h2><p><strong>子元素选择器反例</strong></p></h2>

    <h4 title="test">属性选择器测试</h1>
    </body>
</html>

css选择器.css：

/*标签选择器，根据标签来识别，这里的标签为div，所以会识别html中所有的div标签*/
div{
    font-size: 30px;
    color: aqua;
}

/*类选择器，会寻找div中class的值，找到该类的标签进行样式修改*/
.class_test{
    font-size: 30px;
    color: blueviolet;
}

/*id选择器，寻找对应的id值进行样式设计，id用于单一选择即不要同名，class可同名多项设计*/
#first{
    font-size: 30px;
    color: chocolate;
}

/*优先级：id选择器 > 类选择器 > 标签选择器*/

/*并集选择器，在多个选择器相同的情况下可以合并成一个*/
.class_two,#second{
    font-size: 30px;
    color: brown;
}

/*交集选择器，选择的标签必须从头至尾依次符合，即选择的交集*/
div span{
    font-size: 30px;
    color: darkorange;
}

/*通用选择器，即为单一星号，通配符选择到所有的标签*/
*{
    font-size: 30px;
    color: black;
}

/*伪类选择器：
    link：标签没有被访问状态；
    hover：鼠标经过标签状态；
    active：鼠标激活，刚刚点击时的状态；
    visited：已被访问，鼠标点击完成状态，通常是链接访问过后的显示；
    伪类控制这四种状态下的形式，顺序为link->visited->hover->active，否则无法正确显示
*/
h1:link{
    font-size: 30px;
    color: darksalmon;
}
h1:visited{
    font-size: 90px;
    color: darkgreen;
}
h1:hover{
    font-size: 50px;
    color: blue;
}
h1:active{
    font-size: 70px;
    color: crimson;
}

/*子元素选择器，只是缩小范围严格查找父子关系的标签，若前后标签中有其他标签则不会被选择*/
h2 > strong{
    font-size: 30px;
    color: chocolate;
}

/*相邻兄弟选择器，这两个标签满足紧紧相邻并且有相同的父元素*/
h3 + h4{
    font-size: 30px;
    color: beige;
}

/*属性选择器，将具有相同属性的标签选择出来*/
[title=test]{
    font-size: 50px;
    color: darkmagenta;
}

网页编程规范参考链接：w3school 在线教程

这其中有不合适或者不正确的地方欢迎指正，我的QQ号码：2867221444（乔金明），谢谢，也可以相互交流下，备注信息随意，只要能看得出是开发者或者学习者即可。