search

博客列表 >元素样式及选择器

元素样式及选择器

OC的PHP大牛之路
OC的PHP大牛之路原创
2022年07月09日 16:28:26343浏览

元素的样式

颜色、字体、背景可继承
优先级：自定义>继承>默认

  1. 内联样式：style属性，适用于当前特定的某个元素

    1. <body>
    2.  <h1 style="color:red">xxx</h1>
    3.  <h1 style="color:red">xxx</h1>
    4.  <h1 style="color:red">xxx</h1>
    5. </body>

  2. 文档样式：<style></style>标签，适用于当前html文档

    1. <body>
    2.  <h1 >xxx</h1>
    3.  <h1 >xxx</h1>
    4.  <h1 >xxx</h1>
    5.  <style>
    6.      h1{
    7.          color: red;
    8.      }
    9.  </style>
    10. </body>

  3. 外部样式：<link rel="stylesheet" href="css文件">首选

    1.  <link rel="stylesheet" href="01.css">
    2. </head>
    3. <body>
    4.  <h1 >xxx</h1>
    5.  <h1 >xxx</h1>
    6.  <h1 >xxx</h1>
    7. </body>

选择器

基本选择器

  1. 标签选择器
    标签选择器
    html:
    1.  <link rel="stylesheet" href="01.css">
    2. </head>
    3. <body>
    4.  <h1 >xxx1</h1>
    5.  <h1 >xxx2</h1>
    6.  <h1 >xxx3</h1>
    7.  <h1 >xxx4</h1>
    8.  <h1 >xxx5</h1>
    9.  <h1 >xxx6</h1>
    10. </body>
    css:
    1. /* 标签选择器 */
    2. h1{
    3.  color: red;
    4. }

2.属性选择器id# class.
属性选择器
html

  1.     <link rel="stylesheet" href="01.css">
  2. </head>
  3. <body>
  4.     <h1>xxx1</h1>
  5.     <h1 title="welcome">xxx2</h1>
  6.     <h1 class="three">xxx3</h1>
  7.     <h1 id="active">xxx4</h1>
  8.     <h1>xxx5</h1>
  9.     <h1>xxx6</h1>
  10. </body>

css

  1. /* 标签选择器 */
  2. h1{
  3.     color: red;
  4. }
  6. /* 属性选择器 */
  7. h1[title="welcome"]{
  8.     color:green;
  9. }
  11. /* h1[class="three"]{  */
  12.     /* color: blue;  */
  13.  /* }   */
  14. h1.three{
  15.     color: blue;
  16. }
  18. /* h1[id="active"]{ */
  19. /*     color: blueviolet; */
  20. /* } */
  21. h1#active{
  22.     color: blueviolet;
  23. }

3.群组选择器,
群组选择器
html

  1.     <link rel="stylesheet" href="01.css">
  2. </head>
  3. <body>
  4.     <h1>xxx1</h1>
  5.     <h1 title="welcome">xxx2</h1>
  6.     <h1 class="three">xxx3</h1>
  7.     <h1 id="active">xxx4</h1>
  8.     <h1 id="hello">xxx5</h1>
  9.     <h1 class="world">xxx6</h1>
  10. </body>

css

  1. /* 标签选择器 */
  2. h1{
  3.     color: red;
  4. }
  6. /* 属性选择器 */
  7. h1[title="welcome"]{
  8.     color:green;
  9. }
  11. /* h1[class="three"]{  */
  12.     /* color: blue;  */
  13.  /* }   */
  14. h1.three{
  15.     color: blue;
  16. }
  18. /* h1[id="active"]{ */
  19. /*     color: blueviolet; */
  20. /* } */
  21. h1#active{
  22.     color: blueviolet;
  23. }
  25. /* 群组选择器 */
  26. h1#hello,h1.world{
  27.     background-color: aqua;
  28. }

4.通配选择器*
通配选择器
!important用于临时提权，用于调试
html

  1.     <link rel="stylesheet" href="01.css">
  2. </head>
  3. <body>
  4.     <h1>xxx1</h1>
  5.     <h1 title="welcome">xxx2</h1>
  6.     <h1 class="three">xxx3</h1>
  7.     <h1 id="active">xxx4</h1>
  8.     <h1 id="hello">xxx5</h1>
  9.     <h1 class="world">xxx6</h1>
  10.     <h2>大家看这里</h2>
  11. </body>

css

  1. /* 标签选择器 */
  2. h1{
  3.     color: red;
  4. }
  6. /* 属性选择器 */
  7. h1[title="welcome"]{
  8.     color:green;
  9. }
  11. /* h1[class="three"]{  */
  12.     /* color: blue;  */
  13.  /* }   */
  14. h1.three{
  15.     color: blue;
  16. }
  18. /* h1[id="active"]{ */
  19. /*     color: blueviolet; */
  20. /* } */
  21. h1#active{
  22.     color: blueviolet;
  23. }
  25. /* 群组选择器 */
  26. h1#hello,h1.world{
  27.     background-color: aqua;
  28. }
  30. /* 通配选择器 */
  31. body *{
  32.     background-color: grey !important;
  33. }

上下文选择器

1.子元素>
html

  1.     <link rel="stylesheet" href="demo.css">
  2. </head>
  3. <body>
  4.     <ul class="list">
  5.     <li class="item">item1</li>
  6.     <li class="item">item2</li>
  7.     <li class="item">item3</li>
  8.     <li class="item">item4</li>
  9.     <li class="item">item5</li>
  10.     <li class="item">item6</li>
  11.     <li class="item">item7</li>
  12.     <li class="item">item8</li>
  13.     </ul>
  14. </body>

css

  1. /* 1.子元素 */
  2. .list>.item{
  3.     border: 1px solid;
  4. }

2.后代元素空格
html

  1.     <link rel="stylesheet" href="demo.css">
  2. </head>
  3. <body>
  4.     <ul class="list">
  5.     <li class="item">item1</li>
  6.     <li class="item">item2</li>
  7.     <li class="item">item3
  8.         <ul>
  9.             <li class="item">item3-1</li>
  10.             <li class="item">item3-2</li>
  11.             <li class="item">item3-3</li>
  12.         </ul>
  13.     </li>
  14.     <li class="item">item4</li>
  15.     <li class="item">item5</li>
  16.     <li class="item">item6</li>
  17.     <li class="item">item7</li>
  18.     <li class="item">item8</li>
  19.     </ul>
  20. </body>

css

  1. /* 1.子元素 */
  2. .list>.item{
  3.     border: 1px solid;
  4. }
  6. /* 2.后代元素 */
  7. .list .item{
  8.     border: 1px solid;
  9. }

3.相邻兄弟+
html

  1.     <link rel="stylesheet" href="demo.css">
  2. </head>
  3. <body>
  4.     <ul class="list">
  5.        <li class="item">item1</li>
  6.        <li class="item">item2</li>
  7.        <li class="item">item3</li>
  8.        <li class="item">item4</li>
  9.        <li class="item five">item5</li>
  10.        <li class="item">item6</li>
  11.        <li class="item">item7</li>
  12.        <li class="item">item8</li>
  13.     </ul>
  14. </body>

css

  1. /* 1.子元素 */
  2. .list>.item{
  3.     border: 1px solid;
  4. }
  6. /* 2.后代元素 */
  7. .list .item{
  8.     border: 1px solid;
  9. }
  11. /* 3.相邻兄弟 */
  12. .list>.item.five {
  13.     background-color:aqua;
  14. }
  15. .list>.item.five + *{
  16.     background-color: aquamarine;
  17. }

4.所有兄弟~
html

  1.     <link rel="stylesheet" href="demo.css">
  2. </head>
  3. <body>
  4.     <ul class="list">
  5.        <li class="item">item1</li>
  6.        <li class="item">item2</li>
  7.        <li class="item">item3</li>
  8.        <li class="item">item4</li>
  9.        <li class="item five">item5</li>
  10.        <li class="item">item6</li>
  11.        <li class="item">item7</li>
  12.        <li class="item">item8</li>
  13.     </ul>
  14. </body>

css

  1. /* 1.子元素 */
  2. .list>.item{
  3.     border: 1px solid;
  4. }
  6. /* 2.后代元素 */
  7. .list .item{
  8.     border: 1px solid;
  9. }
  11. /* 3.相邻兄弟 */
  12. .list>.item.five {
  13.     background-color:aqua;
  14. }
  15. .list>.item.five + *{
  16.     background-color: aquamarine;
  17. }
  19. /* 4.所有兄弟 */
  20. .list>.item.five ~ *{
  21.     background-color: blueviolet;
  22. }

选择器的权重

(0,0,0)表示选择器因子的权重，
对应(百位<id>,十位<class>，个位<tag>)

增加权重的方法：
1.增加标签（可以是父级标签），这样就可以不依
序，如html body h1{xxx}

2.增加代码，如.title{xxx}可增加至.title.go {xxx}

注：尽量少用或者不用id,权重过大

上一条：会话控制学习下一条：引用外部字体图标及媒体查询
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多