前端#CSS 第一章 #选择器1

最新推荐文章于 2024-06-14 11:01:38 发布

枫林、

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量122

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_50577324/article/details/123046342

版权

一、基本选择器

二、结构选择器

三、属性选择器

一、基本选择器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>选择器</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
    <h1>标签选择器</h1>
    <h2 id="feng">ID选择器</h2>
    <h2 class="lin">class选择器</h2>
  </body>

  <style>
    /* 选择所有元素 */
    * {
      padding: 0;
      margin: 0;
    }
    /* 标签选择器 */
    h1 {
      color: brown;
    }
    /* ID选择器（id应该是唯一存在的，不建议重复使用同一个id，重复建议使用class）: */
    #feng {
      color: rgb(20, 168, 45);
    }
    /* class选择器 */
    .lin {
      color: rgb(33, 109, 207);
    }
  </style>
</html>

二、结构选择器

element、element,element、element element、element+elemet、element>element:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>结构型选择器</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
    <p>我是P标签</p>
    <div>我是div 1</div>
    <div>我是div 2</div>

    <div>我是div 3</div>
    <p>我是紧接着div的P标签</p>

    <div><p>我是div下的P</p></div>
  </body>

  <style>
    /* //选择所有<div>元素 */
    /* div {
      font-size: 30px;
    } */

    /* //选择所有<div>和<p>元素 */
    /* div,
    p {
      font-size: 22px;
      color: red;
    } */

    /* //选择所有<div>包含的所有<p>元素 */
    /* div p {
      font-size: 18px;
      color: rgb(113, 211, 33);
    } */
    /* //选择所有紧接着<div>之后的<p>元素 */
    div + p {
      font-size: 20px;
      color: rgb(0, 17, 255);
    }

    /* //选择所有<div>内的所有<p>元素 */
    /* div > p {
      font-size: 14px;
      color: rgb(190, 37, 178);
    } */
  </style>
</html>

三、属性选择器

[attribute]、[attribute=value]、[attribute~=value]、[attribute|=value]、[attribute*=value]、[attribute^=value]、[attribute$=value] 选择器。

/<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>属性选择器</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
    <div class="">拥有class的div 1<div></div>
    <div class="">拥有class的div 2<div></div>

    <div class="" name="">拥有class和name的div1<div></div>
    <div class="" name="">拥有class和name的div2<div></div>

    <img src="xx.png"/>
    <img src="xx.png"/>

    <div class="feng lin">class包含单词"feng"的所有元素1</div>
    <div class="lin feng">class包含单词"feng"的所有元素2</div>


    <h1 class="feng">class属性值为"feng"的单词，或feng-lin以-连接的的独立单词1</h1>
    <h1 class="feng-lin">class属性值为"feng"的单词，或feng-lin以-连接的的独立单词2</h1>
  
    <h2  class="feng-lin"> class包含"feng"的所有元素1</h2>
    <h2  class="linfeng"> class包含"feng"的所有元素2</h2>

    <h3  class="feng-lin">指定属性值的开头的元素1</h3>
    <h3  class="fenglin">指定属性值的开头的元素2</h3>

    <h4 class="feng lin">指定属性值的结尾的元素1</h4>
    <h4 class="fenglin">指定属性值的结尾的元素2</h4>
  </body>

  <style>
    /* //选择所有,拥有class属性的<div> */
    div[class] {
    font-size: 20px;
     color: antiquewhite;
    }
    /* //可以进行多属性约束 */
    div[class][name] {
    font-size: 20px;
     color: aqua;
    }

    /* //选择所有<img src="xx.png"/> */
    img[src="xx.png"] {
      height: 60px;
      width: 60px;
    }

    /* //~ <div class="feng lin"> class包含单词"feng"的所有元素 */
    div[class~="feng"] {
    color: aquamarine;
    }

    /* //| <h1 name="feng-lin"> class属性值为"feng"的单词，或feng-lin以-连接的的独立单词 */
    h1[class|="feng"] {
     color: blue;
    }

    /* // * <h2 class="feng lin"> class包含"feng"的所有元素 */
    h2[class*="feng"] {
      color: red;
    }

    /* // ^ <h1 class="fenglin">指定属性值的开头的元素 */
    h3[class^="feng"] {
      color: rgb(30, 255, 0);
    }

    /* // $ <h1 class="fenglin">指定属性值的结尾的元素 */
    h4[class$="lin"] {
      color: rgb(247, 0, 255);
    }
  </style>
</html>

枫林、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端#CSS 第一章 #选择器1

一、基本选择器1. *选择器://选择所有元素*{ padding:0; margin:0;}2.ID选择器（id应该是唯一存在的，不建议重复使用同一个id，重复建议使用class）://选择所有id=main的元素#main{ width:357px; height:667px background-color: rgb(227, 247, 231);}3.class选择器://选择所有class="text"的元素.class{ font
复制链接

扫一扫

前端#CSS 第一章 #选择器1

一、基本选择器

二、结构选择器

三、属性选择器

“相关推荐”对你有帮助么？