博主信息

博文 55

粉丝 3

访问量 70593

专题推荐

更多>

CSS选择器

一、简单选择器

1. 元素选择器：标签选择器

实例：

body {
        background-color: red;
        }

浏览器显示结果：

2. 类选择器：对应着html中的class属性

实例：

<head>
<style>
  .box{
        width:200px;
        height:200px;
        background:green;
      }
</style>
</head>
<body>
  <div class="box"></div>
</body>

浏览器显示结果：

3. 复合类样式：把一个元素的多个类写在一起

实例：

<head>
<style>
   .box{
      width:200px;
      height:200px
      background:red;
   }
   .box.box1{
      background:blue;
   }
</style>
</head>
<body>
<div class="box box1"></div>
</body>

浏览器显示结果：

学习重点：认识这种写法，知道这种写法是什么意思，在css中后面相同的属性会覆盖前面的属性，所以显示结果为蓝色。

4. id选择器

实例：

<head>
<style>
.box#box{
width:200px;
height:200px;
background:red;
}
#box{
background:blue;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
</body>

浏览器显示结果：

学习重点：因为.box#box的优先级要高于#box所以显示为红色。而#box.box的优先级要比.box#box的优先级更高，了解复合类样式的优先级规则。id现在很少用，大部分用在表单和锚点上，所以尽可能用class选择器

二、上下文选择器

1. 后代选择器：空格（接下来用九宫格来做实例）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选择器：简单选择器</title>
    <style>
      .container {
        width: 625px;
        height: 625px;
        padding: 5px;
        background: #ffffff;
        display: grid;/*网格布局*/
        grid-template-columns: repeat(3, 1fr);
        /*网格的列为3个宽度相同的列*/
        grid-gap: 5px;/*网格间距为5像素*/
      }
      .item {
        font-size: 4rem;rem/*相对大小*/
        display: flex;/*弹性布局*/
        justify-content: center;
        align-items: center;/*居中*/
        background: #f5bb1e;/*垂直居中*/
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item center">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>
</html>

接下来用后代选择器的方式，给九宫格加上边框

<style>
  .container .item{border:2px solid #000;}
</style>

显示结果：

给所有的具有.item选择器的元素都加上了边框

2. 父子选择器：>

实例：

  <style>
     body > div {border:5px solid orange;}
  </style>

显示结果：

如果用后代选择器的话

  <style>
     body  div {border:5px solid blue;}
  </style>

显示结果：

学习重点：后代选择器表示的是不仅是父子关系，它会获得所有后代元素，用空格来连接；父子选择器表示的仅仅是父子关系，用>来连接。

3. 同级相邻选择器：+

实例：

  <style>
     .item.center + .item{background:greenyellow;}
  </style>

显示结果：

4. 同级所有选择器：~

实例：

  <style>
     .item.center ~ .item{background:red;}
  </style>

显示结果：

三、结构伪类选择器(不分组)

1. 匹配第一个子元素： (:first-child)

实例：(九宫格)

  <style>
     .container :first-child{background:red;}
  </style>

结果：

这里我发现如果.container后面没空格的话就会把样式加给自身.container

  <style>
     .container:first-child{background:red;}
  </style>

结果：

学习重点：:first-child没有父元素的话会从根元素开始匹配每个父元素下的第一个元素，一定要在:first-child前面加上父元素并加空格

2. 匹配最后一个元素：（:last-child）

实例：

  <style>
     .container :last-child{background:red;}
  </style>

结果：

3. 选择第n个元素：nth-child(n)

实例1：选择第四个方框

  <style>
     .container :nth-child(4){background:red;}
  </style>

结果：

实例2：选择奇数偶数元素

  <style>
     .container :nth-child(2n){background:red;}
     /*偶数为红色*/
     .container :nth-child(2n-1){background:green;}
     /*奇数为绿色*/
  </style>
  或者用even表示偶数，odd表示奇数
   .container :nth-child(even){background:red;}
     /*偶数为红色*/
     .container :nth-child(odd){background:green;}
     /*奇数为绿色*/

结果：

实例3：选择前3个元素

<style>
    .container :nth-child(-n + 3){background:blue;}
</style>

结果：

实例3：选择倒数前3个元素

<style>
    .container :nth-last-child(-n + 3){background:blue;}
</style>

结果：

实例3：选择第5个到第8个元素

<style>
    .container :nth-child(n + 5):nth-child(-n + 8){background:green;}
</style>

结果：

学习重点：n的索引是从0开始的，所以2n就是偶数，2n+1/2n-1就是奇数,选择从第几个开始是加几，选择从第一个到第几个是-n加几，选择n是从第5个到第8个是 :nth-chlid(n+5):nth-child(-n+8)，两者可以结合使用

四、伪类分组选择器

1. 匹配到最后一个元素

首先把九宫格代码部分改成<span class="item"></span>

    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <span class="item">4</span>
    <span class="item">5</span>
    <span class="item">6</span>
    <span class="item">7</span>
    <span class="item">8</span>
    <span class="item">9</span>

实例：

  <style>
      .container :last-of-type{background:pink;}
  </style>

结果：

分组结构伪类分两步：1.元素按类型进行分组；2.在分组中根据索引进行选择

2. 匹配分组中的任意一个元素：(:nth-of-type(n))

实例1：匹配span分组中的第三个元素

  <style>
      .container span:nth-of-type(3){background:pink;}
  </style>

结果：

实例2：匹配span分组中的前三个元素

  <style>
      .container span:nth-of-type(-n + 3){background:pink;}
  </style>

结果：

实例3：匹配span分组中的倒数2个元素

  <style>
      .container span:nth-last-of-type(-n + 2){background:pink;}
  </style>

结果：

五、伪类与伪元素

1. :target必须与id配合，实现锚点操作

实例：

<head>
<style>
      #login-form {display: none;}
      #login-form:target {display: block;}
      /*当前#login-form的表单元素被a的锚点激活时执行*/
    </style>
  </head>
  <body>
    <a href="#login-form">我要登录：</a>
    <form action="" method="post" id="login-form">
      <label for="email">邮箱：</label>
      <!--<label> 标签为 input 元素定义标注（标记）-->
      <input type="email" name="email" id="email" />
      <label for="password">密码：</label>
      <input type="password" name="password" id="password" />
      <button>登录</button>
    </form>
  </body>

浏览器显示结果：

点击后

2. :focus 当获取焦点的时候

实例：

<style>
input:focus{background:yellow;}
</style>

显示结果：

3. ::selection设置选中文本的前景色和背景色

实例：

<style>
input::selection{color:red;background-color:greenyellow;}
</style>

显示结果：

::selection前面是双冒号

4. :not() 用于选择不满足条件元素

实例：

<style>
.list > *:not(:nth-of-style(2)){color:red;}
</style>
<body>
<ul class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
</body>

显示结果：

5. ::before在元素之前，::after 在元素之后

实例：

<style>
.list::before{content:"购物车";font-size:2rem;}
.list::after{content:"结算中...";color:red;font-size:2rem;}
</style>
<body>
<ul class="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
</body>

显示结果：

::before,::after前面都是双冒号

六、表格

<style>
table,td,tr,th,caption {
        border: 1px solid #000;
        padding: 0px;
        margin: 0px;
      }
</style>
<!-- 表格：数据格式化的工具 -->
    <table>
      <!-- 表格标题 -->
      <caption>
        员工信息表
      </caption>
      <!-- 表格头部 -->
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </tr>
      </thead>
      <!-- 表格主体 -->
      <tbody>
        <tr>
          <td>张三</td>
          <td>男</td>
          <td>22</td>
        </tr>
        <tr>
          <td>张四</td>
          <td>男</td>
          <td>23</td>
        </tr>
        <tr>
          <td>张莉</td>
          <td>女</td>
          <td>22</td>
        </tr>
      </tbody>
      <!-- 表格尾部 -->
      <tfoot>
        <tr>
          <td>尾部</td>
          <td>尾部</td>
          <td>尾部</td>
        </tr>
      </tfoot>
    </table>

显示结果：

学习总结：

1.简单选择器：

css与id选择器的应用场景，id选择器现在大部分用在表单，锚点上，其它地方很少用，尽可能的用class选择器。

2.上下文选择器：

空格、>、+、~分别对应后代选择器、父子选择器、同级相邻选择器、同级所有选择器

3. 伪类选择器(不分组):

first-child,last-child,nth-child(n),nth-last-child(n),选择第一个元素，最后一个元素，选择任意一个元素，选择任意倒数一个元素，n初始索引值为1，但是有点难理解，课堂中说的一个例子，选择前三个元素，nth-child(-n+3),如果n的值为1，这里是不对的，n的值此时应该是0，老师后来说表达式的情况下为0，后来经过自己边写边想，发现确实是这样的，n正常情况下是1，在表达式中就是0，终于想明白了！

4.伪类分组元素:

根据元素类型进行分组；
在分组中按照索引进行选择；
last-of-type,first-of-type,元素:nth-of-type(n),元素:nth-last-type(n)

5.伪类和伪元素:

:target必须与id配合，实现锚点操作；
:focus当获取焦点的时候；
::selection设置选中文本的前景色和背景色；
:not() 用于选择不满足条件元素；
::before在元素之前，::after 在元素之后。

批改老师：

WJ

批改状态：合格

老师批语：写的非常认真，格式工整！

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

初学jQuery

2020-08-29 07:53:59

CSS选择器

一、简单选择器

1. 元素选择器：标签选择器

2. 类选择器：对应着html中的class属性

3. 复合类样式：把一个元素的多个类写在一起

4. id选择器

二、上下文选择器

1. 后代选择器：空格（接下来用九宫格来做实例）

2. 父子选择器：>

3. 同级相邻选择器：+

4. 同级所有选择器：~

三、结构伪类选择器(不分组)

1. 匹配第一个子元素： (:first-child)

2. 匹配最后一个元素： （:last-child）

3. 选择第n个元素：nth-child(n)

四、伪类分组选择器

1. 匹配到最后一个元素

2. 匹配分组中的任意一个元素：(:nth-of-type(n))

五、伪类与伪元素

1. :target必须与id配合，实现锚点操作

2. :focus 当获取焦点的时候

3. ::selection设置选中文本的前景色和背景色

4. :not() 用于选择不满足条件元素

5. ::before在元素之前，::after 在元素之后

六、表格

学习总结：

1.简单选择器：

2.上下文选择器：

3. 伪类选择器(不分组):

4.伪类分组元素:

5.伪类和伪元素:

2. 匹配最后一个元素：（:last-child）