css3--学习记录二（选择器）

最新推荐文章于 2023-01-29 11:30:56 发布

Bolt_li

最新推荐文章于 2023-01-29 11:30:56 发布

阅读量521

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/u014010798/article/details/50379004

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、属性选择器

    1. 在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，
    使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。
    如下表所示：

这里写图片描述

如下:

    <style>
       a[class^=column]{
            color:red;
        }
        a[href$=doc]{
            color:green;
        }
        a[title*=box]{
            color:yellow;
        }
   </style>

    <body>
        <a href="##" class="columnNews">我的背景想变成红色</a>
        <a href="##" class="columnVideo">我的背景想变成红色</a>
        <a href="##" class="columnAboutUs">我的背景想变成红</a>
        <a href="1.doc">我的背景想变成绿色</a>
        <a href="2.doc">我的背景想变成绿色</a><br/>
        <a href="##" title="this is a box">我的背景想变成蓝</a>
        <a href="##" title="box1">我的背景想变成蓝色</a>
        <a href="##" title="there is two boxs">我想变蓝色</a>
    </body>

二、结构性伪类选择器—root

:root选择器，
从字面上我们就可以很清楚的理解是根选择器，
他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。

三、结构性伪类选择器—not

:not选择器称为否定选择器，
和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。

    form {
      width: 200px;
      margin: 20px auto;
    }
    div {
      margin-bottom: 20px;
    }
    input:not([type="submit"]){
      border:1px solid red;
    }

    <form action="#">
      <div>
        <label for="name">Text Input:</label>
        <input type="text" name="name" id="name" placeholder="John Smith" />
      </div>
      <div>
        <label for="name">Password Input:</label>
        <input type="text" name="name" id="name" placeholder="John Smith" />
      </div>
      <div>
        <input type="submit" value="Submit" />
      </div>
    </form>

四、结构性伪类选择器—empty

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
    比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。

    <p>我是一个段落</p>
    <p> </p>
    <p></p>

    p{
     background: orange;
     min-height: 30px;
    }
    p:empty {
      display: none;
    }

五、结构性伪类选择器—target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

六、结构性伪类选择器—first-child

“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

七、结构性伪类选择器—last-child

    :last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。
    例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器，

ul>li:last-child{background:blue;}

八、结构性伪类选择器—nth-child(n)

:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。
    其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，
而不是0。
也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
    经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，

这里写图片描述

案例演示

  通过“:nth-child(n)”选择器，并且参数使用表达式“2n”，将偶数行列表背景色设置为橙色
  HTML代码：
<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
</ol>
CSS代码：
ol > li:nth-child(2n){
  background: orange;
}

九、结构性伪类选择器—nth-last-child(n)

    “:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，
    只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，
    从某父元素的最后一个子元素开始计算，来选择特定的元素。

案例演示
    选择列表中倒数第五个列表项，将其背景设置为橙色。

    HTML代码：
    <ol>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
      <li>item8</li>
      <li>item9</li>
      <li>item10</li>
      <li>item11</li>
      <li>item12</li>
      <li>item13</li>
      <li>item14</li>
      <li>item15</li>
    </ol>
    CSS代码：
    ol > li:nth-last-child(5){
      background: orange;
    }

十、nth-of-type(n)选择器

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。
当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。
在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

示例演示

通过“:nth-of-type(2n)”选择器，将容器“div.wrapper”中偶数段数的背景设置为橙色。

HTML代码：

    <div class="wrapper">
      <div>我是一个Div元素</div>
      <p>我是一个段落元素</p>
      <div>我是一个Div元素</div>
      <p>我是一个段落</p>
      <div>我是一个Div元素</div>
      <p>我是一个段落</p>
      <div>我是一个Div元素</div>
      <p>我是一个段落</p>
      <div>我是一个Div元素</div>
      <p>我是一个段落</p>
      <div>我是一个Div元素</div>
      <p>我是一个段落</p>
      <div>我是一个Div元素</div>
      <p>我是一个段落</p>
      <div>我是一个Div元素</div>
      <p>我是一个段落</p>
    </div>
    CSS代码：
    .wrapper > p:nth-of-type(2n){
      background: orange;
    }

这里写图片描述

十一、last-of-type选择器

“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。

十二、nth-last-of-type(n)选择器

“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，
但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

十三、only-child选择器

:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，
匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

十四、only-of-type选择器

“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。
使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。
示例演示

通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。
HTML代码：

<div class="wrapper">
      <p>我是一个段落</p>
      <p>我是一个段落</p>
      <p>我是一个段落</p>
      <div>我是一个Div元素</div>
    </div>
    <div class="wrapper">
      <div>我是一个Div</div>
      <ul>
        <li>我是一个列表项</li>
      </ul>
      <p>我是一个段落</p>
    </div>

CSS代码：

.wrapper > div:only-of-type {
  background: orange;
}

这里写图片描述

十五、:enabled选择器

在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，
比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。
那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。
示例演示

通过“:enabled”选择器，修改文本输入框的边框为2像素的红色边框，并设置它的背景为灰色。

HTML代码:

<form action="#">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="可用输入框"  />
  </div>
   <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="禁用输入框"  disabled="disabled" />
  </div>
</form>

CSS代码：

div{
  margin: 20px;
}
input[type="text"]:enabled {
  background: #ccc;
  border: 2px solid red;
}

结果演示

这里写图片描述

Bolt_li

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3--学习记录二（选择器）

一、属性选择器 1. 在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示：如下: <style> a[class^=column]{ color:red;
复制链接

扫一扫

专栏目录