CSS选择器

0、CSS选择器

  • 通用选择器
    • 所有元素都会被选中
      • *(性能比较低,不推荐;因为部分浏览器会对所有标签进行遍历,从而初始化样式,从而降低浏览器性能)
  • 元素选择器(type selectors)
  • 类选择器(class selectors)
  • id选择器(id selectors)
  • 属性选择器(attribute selectors)
  • 组合
  • 伪类
  • 伪元素

1、属性选择器

  • 拥有某一个属性[att]

  • 属性等于某一个值[att=val]

  • 其它

    • [attr*=val]:属性值包含某一个value

    • [attr^=val]:属性值以value开头

    • [attr$=val]:属性值以value结尾

    • [attr|=val]:属性值等于value或以val开头后面紧跟连接符-

    • [attr~=val]:属性值包含value,如果有其他值必须以空格和val分割

      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
          /* 属性选择器:选择包含该属性的元素 */
          [title]{
            background-color: #eee;
          }
        </style>
      </head>
      <body>
        <div title="div">我是div元素</div>
        <div>我是div1元素</div>
        <div>我是div2元素</div>
        <p title="p">我是div2元素</p>
      </body>
      </html>
      

2、后代选择器(直接/间接后代)

  • 所有后代
    • 选择器之间用空格分隔
  • 直接子代
    • 选择器之间以>分隔

3、兄弟选择器

  • 相邻选择器:使用符号+连接
  • 普遍兄弟选择器:使用符号~连接

4、选择器组

  • 交集选择器()
  • 并集选择器(,)

5、伪类选择器

  • 什么是伪类
    • pseudo-classes:伪类
    • 伪类是选择器的一种,它用于选择处于特定状态的元素
  • 元素的状态
  • 动态伪类
    • :hover
    • :link
    • :visited
    • :active(点下但还没有松手)
    • :focus
    • 注意事项
      • :hover必须放在:link和:visited后面才能完全失效
      • :active必须放在:hover后面才能失效
      • 建议编写顺序::link、:visited、:focus、:hover、:active
  • 目标伪类
    • :target
  • 语言伪类
    • :lang
      • :lang(en):选择设置英文的伪类
  • 结构伪类
    • :nth-child()、:nth-last-child()、:nth-of-type()
  • 否定伪类
    • :not()

6、伪元素(pseudo-element)

  • 常用的伪元素(推荐写两个冒号,便于区分伪类)

    • :first-line、::first-line
      • 首行文本属性设置
    • :first-letter、::first-letter
      • 首字母属性设置
    • :before、::before
      • 内容之前
    • :after、::after
      • 内容之后
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        div::first-line{
          /* 设置第一行内容 */
          font-size: 30px;
          color: #ff0;
        }
        .box::first-letter{
          /* 设置首字母 */
          color: aqua;
        }
        .box::before{
          color: blueviolet;
          content: "在前面插入内容";
        }
        .box::after{
          content: url("https://www.jeasyui.cn/jeasyui/public/images/logo2.png");
          /* 调整位置 */
          position: relative;
          left: 5px;
        }
        .box1::after{
          /* 使用伪元素过程种,不要将content省略 */
          content: "";
          display: inline-block;
          width: 8px;
          height: 8px;
          background-color: #f00;
        }
      </style>
    </head>
    
    <body>
      <div class="box">
        奥古斯都在《忏悔录》里面问我这样一个问题:“时间到底是什么?你不问我的时候,我是知道的;你一问我,我就不知道了。”
        把“时间”换成“MVI”,这个问题同样困扰着我:“MVI 到底是什么?你不问我的时候,我是知道的;你一问我,我就不知道了。”
        维特根斯坦会说,上面是一个非法的问题,源于错误地使用了语言。
        正确的问题应该是这样问的:人们在什么场景下使用 MVI,他们是怎么使用 MVI 的?他们为什么会使用 MVI?
      </div>
      <div class="box1">我是box1</div>
    </body>
    
    </html>
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值