C3踩坑2--css选择器

头像
坤凡1996
    阅读 10 分钟

    css的选择器可能大家都懂,可是有一些知识点我们往往会忽略,接下来po一些以前我经常没去看的point

    兄弟选择器

    clipboard.png
    废话不多说,po代码

    <div class="a">
      <div class="b"></div>
      <div class="c"></div>
      <div class="d">111</div>
      <div class="d">222</div>
    </div>
    *{
        margin: 0;
        padding: 0
      }
      .a{
        width:100px;
        height:100px;
        border:1px solid red
      }
    .c+.d{
        width:30px;
        height: 30px;
        background-color: green
      }

    实现图

    clipboard.png

    在这里,.c+.d的意思就是选择一个名为d的类,并且这个类的前面"邻居"有个类c这样就找到我们要求的类了,如果前面的类不是c那么d类就不符合要求(看包裹"222"的类就不符合要求).

    再po一段代码

    *{
        margin: 0;
        padding: 0
      }
      .a{
        width:100px;
        height:100px;
        border:1px solid red
      }
    .c~.d{
        width:30px;
        height: 30px;
        background-color: green
      }

    这时候我们把+号换成~就变成这样

    clipboard.png

    为什么会这样呢,因为.c~.d的意思就是找到名为d的类,并且在d类前面能找到c类.
    如果用集合表示的话".c+.d"是包含在".c~.d"的

    子选择器

    <div class="a">
      <div class="b">

      </div>
    </div>
    ***
    <div class="q">
      qqqq
      <div class="w">
        www
        <div class="e">
          eee
          <div class="r">
            rrr
          </div>
        </div>
      </div>
    </div>
    *{
        margin: 0;
        padding: 0
      }
      .a{
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }

    .a > .b{
      width: 30px;
      height: 30px;
      background-color: green
    }

    clipboard.png

    这是子选择器基础语法,接下来做个改动

    *{
        margin: 0;
        padding: 0
      }
      .a{
        width: 100px;
        height: 100px;
        border: 1px solid red;
      }

    div > div{
      width: 30px;
      height:30px;
      background-color: green
    }

    clipboard.png

    在这里div>div可以嵌套,也就是说只要满足这个关系就可以嵌套,所以w,e,r类满足这个条件样式就可以改变样式

    伪类:没想到有这么多分类...

    c3的伪类分为6种 -->动态伪类选择器,目标伪类选择器,语言伪类选择器,UI状态伪类选择器,结构伪类选择器,否定伪类选择器

    伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容；原则上特征是不可以从文档树上推断得到的。
    伪类写法:E : pseodu { property : value }, E -->选择器,pseodu -->伪类名字,property -->属性,value -->值

    1.动态伪类选择器分为2种:
    a. 链接伪类选择器 : E:link-->已经链接未访问 E:visited-->已经链接已经访问
    b. 用户行为伪类选择器 : E:active-->目标被激活 E:hover-->目标被鼠标悬停E:focus目标获得焦点
    2.目标伪类选择器
    写法:E:target,意思是匹配E元素并且E元素被相关uri(也就是a标签)指向

    <style>
p:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
</head>
<body>

<h1>这是标题</h1>

<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>

<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>

<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>

    clipboard.png

    3.语言伪类选择器-->根据元语言编码匹配元素

    <style>
p:lang(en)
{ 
background:yellow;
}
</style>
</head>

<body>

<p>我是555。</p>
<p lang="en">I live in 555.</p>

    clipboard.png

    4.UI状态选择器 -->form表单元素状态的筛选
    E:checked -->被选中的元素
    E:enable -->启用状态的选择器
    E:disable -->禁用状态的选择器

    <style media="screen">
      *{
        margin: 0;
        padding: 0
      }
      input:checked{
        margin-right: 30px
      }
      input:disabled{
        margin-left: 30px
      }
    </style>
  </head>
  <body>
    <form action="">
    <input type="radio" name="sex" value="male" checked>Male
      <br>
    <input type="radio" name="sex" value="female" disabled>Female
    </form>
  </body>

    clipboard.png

    5.结构伪类选择器 -->通过文档树结构进行匹配

    clipboard.png

    clipboard.png

    参数n为整数,当小于0表示不选择元素,当变形为4-n或者是2n+1时,n的取值范围是0,1,2,3....,当n为even表示偶数,odd表示奇数,废话不多说,po一些经常用到的代码

    <style media="screen">
      *{
        margin: 0;
        padding: 0
      }
      ul{
          display:flex;
      }
      ul>li{
        width: 30px;
        height: 30px;
        border: 1px solid red;
        list-style: none;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
    </ul>
  </body>

    效果如下:
    clipboard.png

    现在添加如下

    li:first-child{
        background-color: red
      }
      li:last-child{
        background-color: blue
      }
      li:nth-child(2){
        background-color: green
      }
      li:nth-last-child(2){
        background-color: black
      }

    clipboard.png

    关于奇数偶数

    li:nth-child(even){
        background-color: red
      }
      li:nth-of-type(odd){
        background-color: green
      }

    效果等同于

    li:nth-child(2n){
        background-color: red
      }
      li:nth-of-type(2n+1){
        background-color: green
      }

    clipboard.png

    在这里我么注意到关于n的减法n不能被减只能转换为负数相加

    li:nth-child(-n+5){
        background-color: red
      }

    下面是错误示范

    li:nth-child(5-n){
        background-color: red
      }

    clipboard.png

    6.否定伪类选择器 -->可以起过滤作用

    <style media="screen">
      *{
        margin: 0;
        padding: 0
      }
      ul{
          display:flex;
      }
      ul>li{
        width: 30px;
        height: 30px;
        border: 1px solid red;
        float: left;
        list-style: none;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      li:not([class=demo]){
        background-color: red
      }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li class="demo">5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
    </ul>
  </body>

    clipboard.png

    伪元素(惊呆了,原来平时审查元素的时候经常能看到这个以前就很粗心的pass了~~)

    伪元素用于定位文档中包含的文本,但无法在文档树种定位,我们可以这样理解,伪类元素和伪元素的区别是单冒号和双冒号的区别

    1 ::first-letter -->用来选择文本的第一个字母

    <style media="screen">
      *{
        margin: 0;
        padding: 0
      }
      p::first-letter{
        color:red
      }
    </style>
  </head>
  <body>
    <p>i am tony</p>
  </body>

    clipboard.png

    2 ::first-line -->用于选择第一行文本

    <style media="screen">
      *{
        margin: 0;
        padding: 0
      }
      div{
        /* width: 150px */
      }
      div::first-line{
        color:red
      }
    </style>
  </head>
  <body>
    <div>
      关于inline-block可能很多人都不熟悉,布局这方面很多人用的都是flex或者浮动,flex很强大毋庸</div>
  </body>

    clipboard.png

    3 ::before和::after,这两个非常常见的伪元素

    <style media="screen">
      *{
        margin: 0;
        padding: 0
      }
      p{
        color: red
      }
      p::before{
        content:"before"
      }
      p::after{
        content:"after"
      }
    </style>
  </head>
  <body>
    <p>
      ------
      </p>
  </body>

    clipboard.png

    4 ::selection -->我们右键按下鼠标时文本的样式

      <style media="screen">
      *{
        margin: 0;
        padding: 0
      }
      p{
        color: red
      }
      p::before{
        content:"before"
      }
      p::after{
        content:"after"
      }
      p::selection{
        color: yellow;
        background-color: red
      }
    </style>
  </head>
  <body>
    <p>
      ------
      </p>
  </body>

    clipboard.png

    如图,我们用鼠标选择文本的样式就变了

    接下来是属性选择器(终于本文章可以终结了)

    顾名思义,属性选择器就是过滤选择器嘛~

    接下来就看图po代码吧
    1,
    clipboard.png

      *{
          margin: 0;
          padding: 0
        }
        ul>li{
          width: 30px;
          height: 30px;
          border: 1px solid red;
          list-style: none;
          border-radius: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        li[id]{
          background-color: blue
        }
      </style>
    </head>
    <body>
      <ul>
        <li>1</li>
        <li>2</li>
        <li class="three-eee">3</li>
        <li id="four">4</li>
        <li title="i am programmer">5</li>
        <li title="iamyou">6</li>
        <li title="youami">7</li>
        <li title="hellocss3">8</li>
        <li>9</li>
      </ul>
    </body>

    clipboard.png

    2,
    clipboard.png

    li[class=three-eee]{
          background-color: blue
        }

    clipboard.png

    3,

    clipboard.png

      li[class|=three]{
          background-color: blue
        }

    clipboard.png

    4,

    clipboard.png

    li[title~=am]{
          background-color: blue
        }

    clipboard.png

    5,

    clipboard.png

    li[title^=iam]{
          background-color: green
        }

    clipboard.png

    li[title$=ami]{
          background-color: green
        }

    clipboard.png

    li[title*=llo]{
          background-color: green
        }

    clipboard.png

    最后补充下

    clipboard.png

    css3
    坤凡1996
    36 声望3 粉丝

    吾生有涯而学无涯

    « 上一篇
    C3的坑之inline-block
    下一篇 »
    ES6的demo代码

    引用和评论

    推荐阅读
    头像
    用vue+iview+less+echarts做的小系统,总结

    坤凡1996阅读 3.7k

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 1.6k评论 3

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 1.8k

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 11阅读 1.4k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 938

    头像
    【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究

    chokcoco赞 7阅读 906

    0 条评论
    得票最新