首页 > 博客列表 > css-20201215（css02）选择器详解

博主信息

博文 29

粉丝 0

访问量 24420

专题推荐

更多>

选择器

01 标签选择器h1,li,等

标签选择器返回的是一组数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            color: brown;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item1</li>
        <li>item1</li>
        <li>item1</li>
        <li>item1</li>
    </ul>
</body>
</html>

02类选择器

类选择器，使用class（简化.）
标签选择器返回的是一组数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li.on{background-color: cornflowerblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li class="on">item1</li>
        <li>item1</li>
        <li class="on">item1</li>
        <li>item1</li>
    </ul>
</body>
</html>

id选择器

id选择器，使用class（简化#）

标签选择器返回的是一个数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      .on {background-color: cornflowerblue;
      }
      #off {background-color: darkgoldenrod;
      }
  </style>
</head>
<body>
  <ul>
      <li id= "off">item1</li>
      <li class="on">item1</li>
      <li>item1</li>
      <li class="on">item1</li>
      <li id = "off">item1</li>
  </ul>
</body>
</html>

上下文选择器

由大到小选择。后代选择器
01选择所有标签渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li {
            background-color:darkgoldenrod
        }
    </style>
</head>
<body>
    <ul>
        <li id="off">item1</li>
        <li class="on">item1</li>
        <li>item1</li>
        <ul>
            <li>item1-2</li>
            <li>item1-2</li>
        </ul>
        <li class="on">item1</li>
        <li id="off">item1</li>
    </ul>
</body>
</html>

02父子级别的发生渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       body> ul> li {
           background-color: darkgreen;
       }
    </style>
</head>
<body>
    <ul>
        <li id="off">item1</li>
        <li class="on">item1</li>
        <li>item1</li>
        <ul>
            <li>item1-2</li>
            <li>item1-2</li>
        </ul>
        <li class="on">item1</li>
        <li id="off">item1</li>
    </ul>
</body>
</html>

同级选择器

04 伪类选择器(重点)
nth-of-type与last-of-type

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css01.css">
</head>
<body>
    <ul>
        <li>itme1</li>
        <li>itme2</li>
        <li>itme3</li>
        <li>itme4</li>
        <li>itme5</li>
        <li>itme6</li>
        <li>itme7</li>
        <li>itme8</li>
        <li>itme9</li>
        <li>itme10</li>
    </ul>
</body>
</html>
`

-匹配任意位置的元素写法一

/* 写法一匹配第三个li */
 ul li:nth-of-type(0n+3){
     background-color: rgb(228, 127, 164);
 }

写法二

 ul li:nth-of-type(3){
     background-color: rgb(228, 127, 164);
 }

匹配所有元素


ul li:nth-of-type(1n){
   background-color: rgb(228, 127, 164);
}

匹配倒数第三个

ul li:nth-last-of-type(3){
   background-color: rgb(228, 127, 164);
}

匹配从第三个开始

ul li:nth-of-type(n+3){
   background-color: rgb(228, 127, 164);
}

匹配倒数

ul li:nth-last-of-type(-n+3){
   background-color: rgb(228, 127, 164);
}

匹配偶数 (even)


 ul li:nth-of-type(2n){
    background-color: rgb(228, 127, 164);
}

匹配奇数(odd)

 ul li:nth-of-type(2n-1){
    background-color: rgb(228, 127, 164);
}

批改老师：

天蓬老师

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

python的闭包与装饰器语法糖

2021-01-06 21:40:38