Blogger Information
Blog 87
fans 1
comment 0
visits 59158
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
前端选择器的认识
阿杰
Original
673 people have browsed it

基本代码与效果

  • 九宫格代码基础及样式

    1. <style>
    2. .container{
    3. width: 300px;
    4. height: 300px;
    5. display: grid;
    6. grid-template-columns: repeat(3,1fr);
    7. gap: 5px;
    8. }
    9. .item{
    10. font-size: 24px;
    11. background-color: lightskyblue;
    12. display: flex;
    13. justify-content: center;
    14. align-items: center;
    15. }
    16. </style>
    17. <body>
    18. <div class="container">
    19. <div class="item">1</div>
    20. <div class="item">2</div>
    21. <div class="item">3</div>
    22. <div class="item">4</div>
    23. <div class="item center">5</div>
    24. <div class="item">6</div>
    25. <div class="item">7</div>
    26. <div class="item">8</div>
    27. <div class="item">9</div>
    28. </div>
    29. </body>
  • 九宫格效果

1. 简单选择器

  • 元素选择器:标签选择器
  1. body{
  2. background-color: lightcyan;
  3. }
  • 类选择器:对应着html标签中的class属性
  1. .item{
  2. border: 1px solid #000;
  3. }
  4. /* 多个类复合应用 */
  5. .item.center{
  6. background-color: green;
  7. }
  • id选择器:对应着html标签中的id属性
  1. /* id选择器 */
  2. #first{
  3. background-color: lightpink;
  4. }
注意事项
  1. id,class可以添加到任何元素上,所以可以省略*
  2. 层叠样式表,相同元素,后面追加的样式会覆盖前面的样式
  3. 选择器优先级: 元素 < class < id,属于元素,所以.item#first样式会覆盖*#first,就是.item#first优先级高于#first
    1. .item#first{
    2. background-color: lightpink;
    3. }
    4. #first{
    5. background-color: yellow;
    6. }
    7. #first.item{
    8. background-color: red;
    9. }
    10. /*最后背景颜色显示red(红色)*/
  4. id选择器的应用场景目前只有两种:表单元素、锚点

2.上下文选择器

  • 后代选择器:通过空格
  1. /*1. 后代选择器:空格*/
  2. .container div{
  3. border: 1px solid #000000;
  4. }

  • 父子选择器:通过 > 号
  1. /* 2.父子选择器: > */
  2. body > div{
  3. border: 5px solid coral;
  4. }

  • 同级相邻选择器(给第五个item类加一个center类,然后给它同级下一个标签添样式)
  1. /* 3.同级相邻选择器 */
  2. .item.center + .item{
  3. background-color: lightgreen;
  4. }

  • 同级所有选择器(给第五个item后面的同级标签添加样式)
  1. /* 4.同级所有选择器 */
  2. .item.center ~ .item{
  3. background-color: lightsalmon;
  4. }

3.结构伪类选择器

  • 不分组(不区分元素类型)

    1. /* 匹配第一个元素 */
    2. :first-child{
    3. background-color: wheat;
    4. }

    1. /* 最后一个子元素 */
    2. .container > :last-child{
    3. background-color: yellow;
    4. }

    1. /* 选第三个:索引是从1开始 */
    2. .container > :nth-child(3){
    3. background-color: limegreen;
    4. }

    1. /* 选择偶数单元格 */
    2. .container > :nth-child(2n){
    3. /* background-color: limegreen; */
    4. }
    5. .container > :nth-child(even){
    6. background-color: limegreen;
    7. }
    8. /* 选择奇数单元格 */
    9. .container > :nth-child(2n-1){
    10. /* background-color: magenta; */
    11. }
    12. .container > :nth-child(odd){
    13. background-color: magenta;
    14. }

    1. /* 从指定位置(第四个开始),选择剩下的所有元素 */
    2. .container > .item:nth-child(n+4){
    3. background-color: limegreen;
    4. }

    1. /* 只取前三个 */
    2. .container > .item:nth-child(-n+3){
    3. background-color: limegreen;
    4. }
    5. /* 只取最后三个 */
    6. .container > .item:nth-last-child(-n+3){
    7. background-color: limegreen;
    8. }

  • 分组
    先把九宫格元素分两组

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

    如果只用:last-of-type,会各自给div和span的最后一位添加样式

    1. /* 分组结构伪类分两步
    2. 1.元素按类型进行分组
    3. 2.在分组中根据索引进行选择
    4. */
    5. .container :last-of-type{
    6. background-color: violet;
    7. }


    如果在:last-of-type前加上类型进行区分,就只会给指定类型最后一位添加样式

    1. /* 分组结构伪类分两步
    2. 1.元素按类型进行分组
    3. 2.在分组中根据索引进行选择
    4. */
    5. .container span:last-of-type{
    6. background-color: violet;
    7. }

    1. /* 在分组中匹配任何一个 */
    2. .container span:nth-of-type(3){
    3. background-color: violet;
    4. }


    取前三个和后三个

    1. /* 取前三个 */
    2. .container span:nth-of-type(-n+3){
    3. background-color: limegreen;
    4. }
    5. /* 取后三个 */
    6. .container span:nth-last-of-type(-n+3){
    7. background-color: violet;
    8. }

4.伪类与伪元素

基本示例标签

  1. <a href="#login-form">我要登录</a>
  2. <form action="" method="post" id="login-form">
  3. <label for="email">邮箱:</label>
  4. <input type="email" name="email" id="email">
  5. <label for="password">密码</label>
  6. <input type="password" name="password" id="password">
  7. <button>登录</button>
  8. </form>

  • 伪类 :target

    1. #login-form{
    2. display: none;
    3. }
    4. /* :target: 必须id配合,实现锚点操作 */
    5. /* 当前#login-form的表单元素被a的锚点激活的时候执行 */
    6. #login-form:target{
    7. display: block;
    8. }

  • 伪类 :focus

    1. /* :focus: 当获取焦点的时候 */
    2. input:focus{
    3. background-color: yellow;
    4. }

  • 伪类 :not()

    1. <ul class="list">
    2. <li class="item">1</li>
    3. <li class="item">2</li>
    4. <li class="item">3</li>
    5. <li class="item">4</li>
    6. </ul>
    1. /* :not(): 用于选择不满足条件元素 */
    2. .list > :not(:nth-of-type(3)){
    3. color: red;
    4. }

  • 伪元素 ::before与::after (伪元素不为页面中的元素)

    1. /* ::before */
    2. .list::before{
    3. content: "购物车";
    4. color: blue;
    5. font-size: 1.5rem;
    6. border-bottom: 1px solid #000000;
    7. }
    8. /* ::after */
    9. .list::after{
    10. content: "结算中...";
    11. color: red;
    12. font-size: 1.1rem;
    13. }


    (注意:伪元素签名是双冒号,伪类前面是单冒号)

Correcting teacher:WJWJ

Correction status:qualified

Teacher's comments:写的非常努力,认真!
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post