css,类选择器,id选择器,伪类选择器

这篇具有很好参考价值的文章主要介绍了css,类选择器,id选择器,伪类选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

标签选择

 <link rel="stylesheet" href="123.css" type="text/css">
    <style>
        @import url(123.css);
    </style>
    <style>
        h1{
            color:red;
        }
        h2{
            color: gray;
        }
        h3{
            color: blue;
        }
    </style>   
    <h1 style="color: aliceblue;">123123</h1> 

class选择器

<style>
        .ibm1{
            background-color: aqua;
        }
        .ibm2{
            color: red;
            background-color: yellow;
        }
    </style>

<div class="ibm1">123</div>
    <!-- ibm1 ibm2同时控制 ,如果ibm1 ibm2中有同样的属性,在style中靠前的被覆盖掉-->
    <div class="ibm1 ibm2">456</div>

id选择器

<style>
        #box1{
            background-color: aliceblue;
        }
        #box2{
            background-color: red;
        }
        #box3{
            background-color: yellow;
        }
        </style>

 <!-- 不能两个标签使用同一个id -->
    <div id="box1">123</div>
    <div id="box2">456</div>
    <div id="box3">456</div>

伪类选择器

四个伪类选择器顺序不能换

<style>
        /* 超链接访问前的状态 */
        a:link{
            background-color: red;
        }
        /* 超链接访问后的状态 */
        a:visited{
            background-color: yellow;
        }
        /* 鼠标悬停的状态 */
        a:hover{
            background-color: aliceblue;
        }
        /* 点击激活 点击时的状态 */
        a:active{
            background-color: green;
        }
    </style>

几个选择器的优先级

id选择器>class选择器>标签选择器文章来源地址https://www.toymoban.com/news/detail-538795.html

到了这里,关于css,类选择器,id选择器,伪类选择器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS的伪类选择器:nth-child()的用法示例

    CSS的伪类选择器 :nth-child() 的用法示例 n 可以 +- , 右边数字 只能 + 第一到第六的td : td:nth-child(n+1):nth-child(-n+6) 第二到第八的a : a:nth-child(n+2):nth-child(-n+8) 1 等效 0n+1 , 7 等效 0n+7 , 没有负数,不能倒数 第一个a : (1) 或 (0n+1) 第七个a : (7) 或 (0n+7) 想\\\"-1\\\",“0n-1”,“-7”,\\\"0n-7\\\"从倒数开始

    2024年02月22日
    浏览(40)
  • 【css伪类选择器及透明度——附项目图片及代码】

    不知不觉,又鸽了好长时间了,非常抱歉,没办法,毕竟开学了,今天课少,抽出了两个小时写了一篇css的,每天不是被催更,就是在催更的路上。放心,小陈陈有时间一定会给大家分享好玩的作品。 让大家欢声笑语中学到新知识,文章大概写了3个半小时,到目前为止已完

    2023年04月09日
    浏览(43)
  • 前端学习——css盒子模型、css3新特性、伪类、布局0711TODO

    样式还是得具体使用才能理解,不然会忘记也理解不透彻;还有定位,元素溢出,浮动,布局水平垂直对齐: css3新特性 1过渡 2 动画 3 2D、3D转换 伪类 三种定位方式 弹性布局/栅格布局

    2024年02月15日
    浏览(53)
  • 【CSS】CSS 复合选择器 ④ ( 链接伪类选择器 | a:link 默认样式 | a:visited 已访问样式 | a:hover 鼠标移动样式 | a:active 选定链接样式 )

    链接伪类选择器 可以 设置 链接文本 的 不同状态的样式 : 未访问链接样式 : 默认的样式 , 界面打开后 , 默认显示该样式 ; 已访问链接样式 : 点击过的链接 , 链接变成该样式 ; 鼠标移动到链接样式 : 鼠标移动到 链接 上方 , 链接变成该样式 ; 选定链接样式 : 按下鼠标松开时 ,

    2024年02月04日
    浏览(53)
  • 【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )

    常见的 结构伪类选择器 : E:first-child 选择器 : E 表示 HTML 标签类型 , 该选择器 选择 匹配的父容器 中的 第一个 E 类型标签 子元素 ; E:last-child 选择器 : 该选择器 选择 匹配的父容器 中的 最后一个 E 类型标签 子元素 ; E:nth-child(n) 选择器 : 该选择器 选择 匹配的父容器 中的 第

    2024年02月05日
    浏览(41)
  • CSS基础笔记四,伪类选择器和对象选择器(鼠标点击的四种状态,列表自定义选择,容器只有一个,除了被选中的其他都有,元素为空的时候,元素获得焦点的时候,单选和复选增强)

    伪类选择器  常用有这些: 1,鼠标点击元素的4种状态 爱恨离别(link visited hover active) 前面的2个只适用于 a标签,后面的2个适用于其他标签。顺序不能改变 2,列表中先选择谁就选择谁              first-child  选择开头              last-child 选择结尾       

    2024年02月03日
    浏览(50)
  • 【CSS 17】attribute selector 属性选择器 设置无class或id的表单样式

    attribute selector 属性选择器 可以设置带有特定属性或属性值的 HTML 元素的样式 [attribute] 选择器用于选取带有指定属性的元素 [attribute=“value”] 选择器用于选取带有指定属性和值的元素 [attribute~=“value”] 选择器选取属性值包含指定词的元素 [attribute|=“value”] 选择器用于选取

    2024年02月12日
    浏览(48)
  • 前端三剑客CSS篇——CSS选择器

    CSS是前端三剑客不可忽略的一部分,CSS对前端来说是一个美化页面的工具,而且其功能十分强大,程序员可以如果熟练运用的话可以‘随心所欲’的更改页面的样式,使得页面更加美观。 CSS标签是由 键值对 的模式来排列的。 CSS三大特征👍 学习CSS之前,先认识一下CSS的三大

    2024年02月04日
    浏览(44)
  • css伪类和伪元素

    一、伪类说明   定义: 伪类⽤于向某些选择器添加特殊的效果   超链接(a标签)伪类:a标签我们在日常工作和学习中用的很多,我们只知道默认状态下为蓝色,但是a标签其实有四种状态。     1、未访问前为蓝色(如果a标签使用不是蓝色而是紫色,那么近期访问

    2024年02月08日
    浏览(44)
  • 『 前端三剑客 』:CSS选择器

    上一篇文章我们介绍了 html 的常用标签及用法 , 这次我们来介绍 css 来对页面进行美化处理 css 全称 : 层叠样式表 (Cascading Style Sheets). 主要作用 : 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面 的效果. 能够做到 页面的样式和结构分离 . 一 . 基本语法 基本语

    2024年02月09日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包