首页 > 其他分享 >css_8_复合选择器_伪类选择器_目标伪类&语言伪类

css_8_复合选择器_伪类选择器_目标伪类&语言伪类

时间:2024-06-18 22:31:24浏览次数:29  
标签:lang target 伪类 color 目标 选择器 css

一.目标伪类

  • 作用:选中锚点指向的元素(特定id
  • 结构:

:target

  • 举例:
      div:target {
            background-color: gray;
        }
    <a href="#d1" >去目标伪类1</a>
    <a href="#d2" >去目标伪类2</a>

    <div id="d1" >这是在说目标伪类1</div>
    <br>
    <div id="d2" >这是在说目标伪类2</div>

成果展示:
当鼠标点击“去目标伪类1”时
在这里插入图片描述

二.语言伪类

  • 作用:根据lang属性值指定的语言选择元素。
  • 结构:

:lang()

  • 举例:
    <style>
        div:lang(en) {
            color: brown;
        }
        :lang(zh-CN) {
            color: blue;
        }
    </style>
    <div>这是在说语言伪类</div>
    <div lang="en"> language </div>

成果展示:
在这里插入图片描述

标签:lang,target,伪类,color,目标,选择器,css
From: https://blog.csdn.net/2301_81364463/article/details/139784012

相关文章

  • css_7_复合选择器_伪类选择器_否定伪类&UI伪类
    一.否定伪类作用:排除满足括号中条件的元素结构:not(选择器)举例:<body><div><p>否定伪类1</p><p>否定伪类2</p><pclass="fail"title="否定伪类3">否定伪类3</p><pclass="fail"ti......
  • CSS动画(个人资料卡片)
    1.整体效果https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa63Oz8IaRI51Mw7mY02LHmnpXicG4icA3ERN1MVszMdNafsgV3xaVHLhMA6avquSJux4CLV8uggtfbw/640?wx_fmt=gif&from=appmsg&wxfrom=13今天呈现的不仅是一个个人介绍界面,而是一次交互式的视觉体验。精心编排的HTML与CSS......
  • ​b站视频演示效果:【web前端特效源码】使用HTML5+CSS3+JavaScript十分钟快速制作一个
    b站视频演示效果:【网页设计期末大作业源代码】使用HTML5+CSS3+JavaScript十分钟快速制作一个简约大气卡通动漫静态网站|自制超简单的卡通类网页,响应式自适应新手友效果图:完整代码:<!DOCTYPEhtml><html><head><title>Home</title><metaname="viewpor......
  • CSS学习笔记
    一、盒子模型1.简介盒子模型是网页布局的基础,将页面中所有元素都看作是一个盒子,盒子都包含以下几个属性:width宽度height高度border边框padding内边距margin外边距2.盒子模型2.1border表示盒子的边框分为四个方向:上top、右right、下bottom、左leftborder-top......
  • js+css元素动态出现,前端让元素从底部动态显现,前端让元素从底部跳跃显示
    实现效果实现原理一点也不复杂,耐心看完,思路理解后直接复制粘贴即可使用1.为想要动态出现的元素添加指定class类名,我这里用(animate-element)2.监听屏幕滚动,屏幕滚动时,如果屏幕高度减去元素顶部相对于屏幕的位置大于0的话,说明已经滚动到当前元素,然后给这个元素添加c......
  • HTML5期末考核大作业——学生网页设计作业源码HTML+CSS+JavaScript 中华美德6页面带音
    ......
  • HTML+CSS个人静态网页设计
    ......
  • JQuery基础28_选择器2
    一、作用筛选具有相似特征的元素(标签)二、基本操作学习1、事件绑定//1.获取b1按钮$("#b1").click(function(){alert("abc");});2、入口函数$(function(){});window.onload和$(function)区别window.onload只能定义一......
  • JS 前端动态引用 js 、 css 文件
    JS前端动态引用js、css文件 letjsArrPath=['/web_config_other.js','/web_point.js']letcssArrPath=[]consthead=document.getElementsByTagName("head")[0];jsArrPath.forEach(jsPath=>{letscriptElement=document......
  • django学习入门系列之第三点《快速了解 CSS》
    文章目录CSS快速了解CSS应用方式在标签上在head标签中写到文件中问题:用Flask框架开发不方便往期回顾CSSCSS专门用来"美化"标签基础CSS,写简单的界面&能看懂&会改就行模块,调整和修改快速了解style这种就叫css样式<imgsrc"..."style="height:100px"/><d......