原创 CSS六大基本选择器介绍

发布时间:2019-08-12 17:58:27 浏览 3353 来源:博学谷资讯 作者:照照

    CSS是一种格式化网页的标准方式,用于设置网页的样式,并允许样式信息与网页内容分离的一种技术。要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。本文将向大家介绍六大基本选择器,即元素选择器、类选择器、ID选择器、通用选择器、伪类选择器、伪元素选择器。

     

    CSS基本选择器

     

    1、元素选择器

     

    <!DOCTYPE html>

     

    <html>

     

    <head>

     

    <meta charset="UTF-8">

     

    <title>元素选择器</title>

     

    <style type="text/css">

     

    p{color: goldenrod;}

     

    h1{color: blueviolet;}

     

    h2{color: rosybrown;}

     

    </style>

     

    </head>

     

    <body>

     

    <h1>this is the head title!</h1>

     

    <h2>this is the second title!</h2>

     

    <p>古诗词鉴赏</p>

     

    </body>

     

    </html>

     

    2、类选择器

     

    <!DOCTYPE html>

     

    <html>

     

    <head>

     

    <meta charset="UTF-8">

     

    <title>类选择器</title>

     

    <style type="text/css">

     

    .txt01{

     

    color: #8A2BE2;

     

    }

     

    .txt02{

     

    color: tomato;

     

    }

     

    .txt03{

     

    color: saddlebrown;

     

    }

     

    .txt04{

     

    color: #BC8F8F;

     

    }

     

    </style>

     

    </head>

     

    <body>

     

    <h1 class="txt01">欢迎来到类选择器</h1>

     

    <h2 class="txt02">数据分析总结表</h2>

     

    <table class="txt03" border="2">

     

    <tr>

     

    <td>01</td>

     

    <td>02</td>

     

    <td>03</td>

     

    <td>04</td>

     

    <td>05</td>

     

    </tr>

     

    <tr>

     

    <td>12.9</td>

     

    <td>12.4</td>

     

    <td>13.9</td>

     

    <td>12.3</td>

     

    <td>11.9</td>

     

    </tr>

     

    </table>

     

    <p class="txt04">分析结果</p>

     

    </body>

     

    </html>

     

    3、ID选择器

     

    <!DOCTYPE html>

     

    <html>

     

    <head>

     

    <meta charset="UTF-8">

     

    <title>id选择器</title>

     

    <style type="text/css">

     

    #txt01{

     

    text-align: center;

     

    color: rosybrown;

     

    }

     

    #txt02{

     

    text-align: center;

     

    font: 楷体;

     

    color: goldenrod;

     

    }

     

    #txt03{

     

    font: 楷体;

     

    font-size: 22px;

     

    align-content: center;

     

    text-align: center;

     

    color: chocolate;

     

    margin: auto;

     

    }

     

    #txt04{

     

    text-align: center;

     

    color: saddlebrown;

     

    }

     

    </style>

     

    </head>

     

    <body>

     

    <h1 id="txt01">欢迎来到CSS页面</h1>

     

    <p id="txt02">数据分析表</p>

     

    <table id="txt03" border="2">

     

    <tr>

     

    <td>第一期</td>

     

    <td>第二期</td>

     

    <td>第三期</td>

     

    <td>第四期</td>

     

    <td>第五期</td>

     

    </tr>

     

    <tr>

     

    <td>34.90</td>

     

    <td>46.97</td>

     

    <td>35.15</td>

     

    <td>45.33</td>

     

    <td>50.01</td>

     

    </tr>

     

    <tr>

     

    <td>34.90</td>

     

    <td>46.97</td>

     

    <td>35.15</td>

     

    <td>45.33</td>

     

    <td>50.01</td>

     

    </tr>

     

    </table>

     

    <p id="txt04">总结分析:</p>

     

    </body>

     

    </html>

     

    4、通用选择器

     

    <!DOCTYPE html>

     

    <html>

     

    <head>

     

    <meta charset="UTF-8">

     

    <title>通用选择器</title>

     

    <style type="text/css">

     

    *{

     

    text-align: center;

     

    font-size: 24px;

     

    color: chocolate;

     

    font: "楷体";

     

    margin: auto;

     

    }

     

    </style>

     

    </head>

     

    <body>

     

    <p> 欢迎来到通用选择器页面</p>

     

    <table border="2">

     

    <tr>

     

    <td>01</td>

     

    <td>02</td>

     

    <td>03</td>

     

    <td>04</td>

     

    <td>05</td>

     

    </tr>

     

    <tr>

     

    <td>12.9</td>

     

    <td>12.4</td>

     

    <td>13.9</td>

     

    <td>12.3</td>

     

    <td>11.9</td>

     

    </tr>

     

    </table>

     

    </body>

     

    </html>

     

    5、伪类选择器

     

    <style>

     

    a{

     

    font-size: 14px;

     

    font-weight: bold;

     

    color: darkgray;

     

    }

     

    a:hover{

     

    color: red;

     

    }

     

    </style>

     

    </head>

     

    <body>

     

    <a href="">首页</a>

     

    </body>

     

    6、伪元素选择器

     

    <p>

     

    <before> </before> < !--默认加-->

     

    p1

     

    <after> </after> < !--默认加-->

     

    以上就是CSS六大基本选择器的全部介绍了,对此还有疑问的同学,可以上博学谷官网在线学习,上面有优质的学习视频和在线答疑的老师,相信一定能帮助大家弄清楚CSS基本选择器知识点的内容。

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

上一篇: 入行IT编程,学前端开发好还是学后台开发好? 下一篇: Redis是干啥的?Redis的线程模型

相关推荐 更多

热门文章

  • 创建表并给某个字段添加数据的SQL语句怎么写
  • 如何使用连接更新表中某个字段数据?
  • MySQL数据库应用之如何将查询结果插入到其它表中?
  • 分组和聚合函数的组合怎么使用?代码怎么写?
  • 外键SQL语句的编写怎么用?
  • 数据库设计之三范式是什么?有什么作用?
  • 子查询的SQL语句怎么写?如何使用?
  • 连接查询自连接的SQL语句怎么写?
  • 连接查询右连接的SQL语句怎么写?
  • 连接查询左连接的SQL语句怎么写?
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码