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阅读 2.1k评论 3

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

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

    XboxYan赞 12阅读 2.5k

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

    XboxYan赞 12阅读 1.6k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1.1k

    头像
    盘点CSS文本两端对齐的N种方式

    XboxYan赞 1阅读 1.4k

    0 条评论
    得票最新