css选择器

最新推荐文章于 2022-09-26 19:29:14 发布

aqyljie

最新推荐文章于 2022-09-26 19:29:14 发布

阅读量50

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/aqyljie/article/details/114491050

版权

前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS2 的选择器

HTML 选择器（标签选择器）
将 HTML 标签作为选择器使用，即 HTML 选择器。如下示例：

 p{...}
 h2{...}

class 类选择器

 <style>
        .my-class1{color: red;}
    </style>

class 类选择器

  <style>
    #id_name1{color: red;}
    #id_name2{color: blue;}
    </style>


    <HTML标签 id="id_name1">id="id_name1"</HTML标签><br/>
    <HTML标签 id="id_name2">id="id_name2"</HTML标签>

使用 id 选择器需要注意：
id 选择器可以在 HTML 文档中通过给目标标签指定唯一的id 属性，从而达到精准使用的目的。在 <style> 中以 id 选择器定义的样式不可重复使用，因为 id 具有唯一性。

组合选择器（选择器组）

    <style>
    a,.my_class,div{color: red;}
    </style>

<body>
  
    <a>a 元素</a><br/>
    <a class="my_class">my_class 类</a>
    <div>div 元素</div>
</body>

伪类选择器

  <!--格式:  标签名:伪类名{样式...}-->
    <style>
    a:link{color: blue; text-decoration: none;} /*未访问链接*/


    a:visited{color: purple; text-decoration: none;}    /*已访问链接*/


    a:hover{color: pink; text-decoration: underline;}   /*鼠标在链接上*/


    a:active{color: red; text-decoration: underline;}   /*激活链接*/
    </style>
    <body>
          <a href="https://www.w3cschool.cn/" target="_blank">链接</a>
    </body>

引用本地字体

@font-face{
     /* 自定义字体名字  */
font-family: 毛笔字体;
src: url('经典毛笔字体.ttf');
}

aqyljie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器

CSS2 的选择器HTML 选择器（标签选择器）将 HTML 标签作为选择器使用，即 HTML 选择器。如下示例： p{...} h2{...}class 类选择器 <style> .my-class1{color: red;} </style>class 类选择器 <style> #id_name1{color: red;} #id_name2{color: blue;} &l...
复制链接

扫一扫