菜单 搜索
首页 前端知识 【前端从入门到精通：第五课：CSS介绍及CSS选择器】

【前端从入门到精通：第五课：CSS介绍及CSS选择器】

2024-08-08 22:08:50 前端知识 前端哥 431 900 我要收藏

走进CSS世界

了解CSS

CSS层叠样式表 cascading style sheet
作用：用于增强控制网页样式并且允许样式信息与内容分离的一种标记性语言
CSS不需要编译，可由浏览器直接解析
CSS3是目前被使用最广泛的版本，但是部分特性尚不能得到支持
CSS的基本语法

  • CSS定义分别由：选择符、属性、属性取值组成

  • 格式：

p{color:yellowgreen}
复制

  • CSS大小写不敏感，推荐使用小写。

  • 属性和值之间用冒号(:)分开，多个属性之间用分号(;)隔开

CSS中的注释
/*书写注释的内容*/
复制

放置CSS的几种方式

内联样式表(行内引用)
<p style=""></p>
复制
  • 内联的样式比其它方式更加灵活，但是需要和展示的内容混在一起，内联样式会失去样式表的优点。
内嵌样式表(内部引用)
<!DOCTYPE html>
<html>
  <head>
    <style></style>
  </head>
</html>
复制
  • 适用于一个HTML文档具有独一无二的样式时。
外联样式表(外部引用)
 
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="文件地址" />
  </head>
</html>
 
<!--了解-->
<style>
      @import "CSS文件地址"
</style>
复制
  • 外部样式引用了外接的CSS文件。一般浏览器有缓存的功能所以用户不用每次都下载此CSS文件，并且外部引用相对于内部和内联来说高效的是节省带宽，外部引用是W3C推荐使用的标准。
多重样式表的叠加
  • 依照后定义的优先，所以优先级最高的是内联样式。连入的外部样式和内部样式表之间是最后定义的优先级高。
  • 案例
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>放置CSS的几种方式</title>
        <link rel="stylesheet" href="./style.css" />
 
        <style>
            /*@import "./style.css";*/
            #one{
                background-color:tomato;
                color:#fff;
                font-size:50px;
            }
        </style>
        <style>
            /*@import "style.css";*/
        </style>
    </head>
    <body>
        <p>女孩子最喜欢西游记里面的哪个人物？猪八戒</p>
        <p>女孩子最喜欢西游记里面的哪个人物？猪八戒</p>
        <p>女孩子最喜欢西游记里面的哪个人物？猪八戒</p>
        <p style="background-color:blue;color:white">女孩子最喜欢西游记里面的哪个人物？猪八戒</p>
        <div>唐僧喜欢哪个女孩子只有白龙马知道</div>
        <div id="one" style="font-size:100px">唐僧喜欢哪个女孩子只有白龙马知道</div>
        <div id="two">唐僧喜欢哪个女孩子只有白龙马知道</div>
        <div>唐僧喜欢哪个女孩子只有白龙马知道</div>
    </body>
</html>
 
复制
  • style.css文件
 
#two{
    background-color:yellow;
    color:pink;
}
#one{
    font-size:200px;
    color:#000;
}
复制

CSS选择器

基本选择器
  • 类选择器(class选择器)
    （1）在css中使用(.)来查找，类选择器可以有多个属性值，使用空格分开即可。
    案例：
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本选择器</title>
        <style>
            /*CSS区间 写CSS代码*/
            /*查找class选择器*/
            .one{
                background-color:tomato;
            }
            .two{
                color:#fff;
            }
 
        </style>
    </head>
    <body>
<!--        <div class="top">-->
<!--            <div class="top_left"></div>-->
<!--            <div class="top_right"></div>-->
<!--        </div>-->
        <div class="one">我是第一个div元素</div>
        <div class="one two">我是第二个div元素</div>
    </body>
</html>
 
复制
  • 唯一选择器(ID选择器)
    （1）在CSS中使用(#)来查找。
    案例：
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本选择器ID选择器</title>
        <style>
            /*CSS区间 写CSS代码*/
            /*查找id选择器  #*/
            #one{
                background-color: fuchsia;
            }
            #one_two{
                background-color:pink;
            }
        </style>
    </head>
    <body>
        <div id="one">我是第三个元素 我设置的属性是id属性</div>
        <div id="one_two">我是第四个元素 我设置的属性是id属性</div>
    </body>
</html>
复制
 
- 通配符选择器(*)
（1）匹配所有标签
		案例：
 
```css
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本选择器-通配符选择器</title>
        <style>
            /*CSS区间 写CSS代码*/
            /*通配符选择器*/
            *{
                font-size:30px;
            }
 
        </style>
    </head>
    <body>
        <div class="one">我是第一个div元素</div>
        <div class="one two">我是第二个div元素</div>
        <div id="one">我是第三个元素 我设置的属性是id属性</div>
        <div id="one_two">我是第四个元素 我设置的属性是id属性</div>
        <p>我是p标签</p>
        <a href="">我是a标签</a>
        <ul>
            <li>我是无序列表</li>
        </ul>
        <ol>
            <li>我是有序列表</li>
        </ol>
    </body>
复制
  • tagName标签选择器
    （1）根据HTML标签名来选择对应的标签，此时在页面中出现的所有该标签都会被选择。
    案例：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本选择器</title>
        <style>
            /*CSS区间 写CSS代码*/
            /*查找class选择器*/
            /*标签选择器*/
            div{
                background-color:blue;
            }
            li{
                background-color:tomato;
            }
        </style>
    </head>
    <body>
<!--        <div class="top">-->
<!--            <div class="top_left"></div>-->
<!--            <div class="top_right"></div>-->
<!--        </div>-->
        <div class="one">我是第一个div元素</div>
        <div class="one two">我是第二个div元素</div>
        <div id="one">我是第三个元素 我设置的属性是id属性</div>
        <div id="one_two">我是第四个元素 我设置的属性是id属性</div>
        <p>我是p标签</p>
        <a href="">我是a标签</a>
        <ul>
            <li>我是无序列表</li>
        </ul>
        <ol>
            <li>我是有序列表</li>
        </ol>
    </body>
</html>
复制
层级选择器
  • 组合选择器：选择器1,选择器2 多个选择器之间用逗号分隔。例：div,p
    案例：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层级选择器-组合选择选择器</title>
        <style>
 
            /*.one{*/
            /*    background-color:tomato;*/
            /*}*/
            /*p{*/
            /*    background-color:tomato;*/
            /*}*/
            /*.two{}*/
             /*组合选择器*/
            .one,p,.two{
                background-color:tomato;
            }
        </style>
    </head>
    <body>
        <div class="one">我是div元素</div>
        <p>我是P元素</p>
        <p>我是第二个p元素</p>
        <div>我是第二个div元素</div>
        <a href="" class="two">我是a</a>
    </body>
</html>
复制
  • 包含选择器：选择器1 选择器2 表示选择器2被选择器1包含即可。例：div p
    案例：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层级选择器-包含选择器</title>
        <style>
            /*包含选择器*/
            div p{
                background-color:red;
            }
        </style>
    </head>
    <body>
        <!--父子关系-->
        <div>
            <p>我是div中的p</p>
        </div>
        <!--爷孙关系-->
        <div>
            <section>
                <p>我是div中section里面所包含的p标签</p>
            </section>
        </div>
    </body>
</html>
复制
  • 子选择器：选择器1 > 选择器2 表示选择器1的子元素为选择器2(只有父子关系才可以)。例：div > p
    案例：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层级选择器-子代选择器</title>
        <style>
            /*子代选择器*/
            div>p{
                background-color:tomato;
            }
        </style>
    </head>
    <body>
        <!--父子关系-->
        <div>
            <p>我是div中的p</p>
        </div>
        <!--爷孙关系-->
        <div>
            <section>
                <p>我是div中section里面所包含的p标签</p>
            </section>
        </div>
        <div>
            <!--父子关系-->
            <div>
                <p>我是div中div里面的p元素</p>
            </div>
        </div>
    </body>
</html>
复制
  • 相邻选择器：选择器1 + 选择器2 表示选择紧贴在选择器1之后的选择器2元素。例 div + p
    案例：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层级选择器-相邻选择器</title>
        <style>
            /*相邻选择器*/
            div + p{
                background-color:pink;
            }
        </style>
    </head>
    <body>
        <div class="one">我是div元素</div>
        <p>我是P元素</p>
        <p>我是第二个p元素</p>
        <div>我是第二个div元素</div>
        <a href="" class="two">我是a</a>
        <!--父子关系-->
        <div>
            <p>我是div中的p</p>
        </div>
        <!--爷孙关系-->
        <div>
            <section>
                <p>我是div中section里面所包含的p标签</p>
            </section>
        </div>
        <p>我是div之后的p元素</p>
        <div>
            <!--父子关系-->
            <div>
                <p>我是div中div里面的p元素</p>
            </div>
        </div>
        <a href="">我是div之后的a</a>
        <p>我是a后面的p元素</p>
    </body>
</html>
复制
  • 兄弟选择器：选择器1 ~ 选择器2 表示选择器1后面的所有兄弟元素选择器2。 例 div ~ p
  • ~ shift+键盘1键盘的那个键
    案例：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>层级选择器-兄弟选择器</title>
        <style>
            /*兄弟选择器*/
            div ~ p {
                background-color:red;
            }
        </style>
    </head>
    <body>
        <div class="one">我是div元素</div>
        <p>我是P元素</p>
        <p>我是第二个p元素</p>
        <div>我是第二个div元素</div>
        <a href="" class="two">我是a</a>
        <!--父子关系-->
        <div>
            <p>我是div中的p</p>
        </div>
        <!--爷孙关系-->
        <div>
            <section>
                <p>我是div中section里面所包含的p标签</p>
            </section>
        </div>
        <p>我是div之后的p元素</p>
        <div>
            <!--父子关系-->
            <div>
                <div></div>
                <p>我是div中div里面的p元素</p>
            </div>
        </div>
        <a href="">我是div之后的a</a>
        <p>我是a后面的p元素</p>
    </body>
</html>
复制
属性选择器
  • 属性选择器就是根据属性名或者属性值来查找到某个元素
  • E element元素标签 ATT attribute 属性 VAL value 值
  • 标签[属性]
    （1）E[ATT] 匹配所有具有ATT属性的E元素，不考虑属性值。
    案例：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            /*E[ATT] 匹配所有具有ATT属性的E元素*/
            /*p[title]{*/
            /*    background-color:red;*/
            /*}*/
            [title]{
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <p title="this is a test">我是一个P标签</p>
        <p title="this ia a test">我是第二个P标签</p>
        <p title="this">我是第三个P标签</p>
        <a href="" title="this is a test">我是a标签</a>
        <p index="1000">我是最后一个P标签</p>
    </body>
</html>
复制

（2）E[ATT = VAL] 匹配所有ATT属性等于VAL的E元素。
案例：

```html
   <!DOCTYPE html>
   <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>属性选择器</title>
           <style>
               /*E[ATT = VAL] 匹配所有ATT属性等于VAL的E元素。*/
               [title = "this is a test"]{
                   background-color: red;
               }
           </style>
       </head>
       <body>
           <p title="this is a test">我是一个P标签</p>
           <p title="this is a test">我是第二个P标签</p>
           <p title="this">我是第三个P标签</p>
           <a href="" title="this is a test">我是a标签</a>
           <p index="1000">我是最后一个P标签</p>
           <span title="this is a test">我是span标签</span>
       </body>
   </html>
复制

（3）E[ATT ~= VAL] 匹配所有ATT属性具有多个空格分隔的值，其中一个值等于VAL的E元素。
案例：

   <!DOCTYPE html>
   <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>属性选择器</title>
           <style>
               /*E[ATT ~= VAL] 匹配所有ATT属性具有多个空格分隔的值，其中一个值等于VAL的E元素。*/
               p[title ~= 'is']{
                   background-color:blue;
               }
           </style>
       </head>
       <body>
           <p title="this is a test">我是一个P标签</p>
           <p title="this is a test">我是第二个P标签</p>
           <p title="this">我是第三个P标签</p>
           <a href="" title="this is a test">我是a标签</a>
           <p index="1000">我是最后一个P标签</p>
           <span title="this is a test">我是span标签</span>
       </body>
   </html>
复制

（4）E[ATT |= VAL] 匹配所有的ATT属性具有多个连接分隔符的值，其中一个值以val-开头的E元素，主要用于lang属性。比如：’en-us’,’en-gb’（了解）。
案例：

```html
   <!DOCTYPE html>
   <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>属性选择器</title>
           <style>
               /*E[ATT |= VAL] 匹配所有的ATT属性具有多个连接分隔符的值，其中一个值以val-开头的E元素*/
               p[title |= this]{
                   background-color: fuchsia;
               }
           </style>
       </head>
       <body>
           <p title="this is a test">我是一个P标签</p>
           <p title="this is a test">我是第二个P标签</p>
           <p title="this">我是第三个P标签</p>
           <a href="" title="this is a test">我是a标签</a>
           <p index="1000">我是最后一个P标签</p>
           <p title="this-is-a-test">我是新增的P</p>
           <span title="this is a test">我是span标签</span>
       </body>
   </html>
复制
（5）E[ATT ^= VAL]属性ATT的值以VAL开头的E元素。
         英文状态下shift + 6
		案例：
		
 
复制
   <!DOCTYPE html>
   <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>属性选择器</title>
           <style>
               /*E[ATT ^= VAL]属性ATT的值以VAL开头的E元素。*/
               p[title ^= 't']{
                   background-color:pink;
               }
           </style>
       </head>
       <body>
           <p title="this is a test">我是一个P标签</p>
           <p title="this is a test">我是第二个P标签</p>
           <p title="this">我是第三个P标签</p>
           <a href="" title="this is a test">我是a标签</a>
           <p index="1000">我是最后一个P标签</p>
           <p title="this-is-a-test">我是新增的P</p>
           <span title="this is a test">我是span标签</span>
       </body>
   </html>
复制

（6）E[ATT $= VAL] 属性ATT的值以VAL结尾的E元素。
英文状态下shift + 4
案例：

```html
   <!DOCTYPE html>
   <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>属性选择器</title>
           <style>
               /*E[ATT $= VAL] 属性ATT的值以VAL结尾的E元素。*/
               p[title $= 's']{
                   background-color: fuchsia;
               }
           </style>
       </head>
       <body>
           <p title="this is a test">我是一个P标签</p>
           <p title="this is a test">我是第二个P标签</p>
           <p title="this">我是第三个P标签</p>
           <a href="" title="this is a test">我是a标签</a>
           <p index="1000">我是最后一个P标签</p>
           <p title="this-is-a-test">我是新增的P</p>
           <span title="this is a test">我是span标签</span>
       </body>
   </html>
复制

（7）E[ATT *= VAL] 属性ATT的值中有VAL存在的E元素。
案例：

  <!DOCTYPE html>
  <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>属性选择器</title>
          <style>
              /*E[ATT *= VAL] 属性ATT的值中有VAL存在的E元素。*/
              p[title *= 'a']{
                  background-color:tomato;
              }
          </style>
      </head>
      <body>
          <p title="this is a test">我是一个P标签</p>
          <p title="this is a test">我是第二个P标签</p>
          <p title="this">我是第三个P标签</p>
          <a href="" title="this is a test">我是a标签</a>
          <p index="1000">我是最后一个P标签</p>
          <p title="this-is-a-test">我是新增的P</p>
          <span title="this is a test">我是span标签</span>
      </body>
  </html>
复制
结构性伪类选择器
  • 伪元素选择器(不是对真正的元素选择)
    （1）E:first-line E元素的第一行。
    案例：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪元素选择器</title>
        <style>
            /*E:first-line E元素的第一行*/
            p:first-line{
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <p>
            我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签 <br>
            我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
            我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
            我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
            我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
            我是P标签我是P标签我是P标签我是P标签
        </p>
    </body>
</html>
复制

（2）E:first-letter E元素的第一个字母。
案例：

 ```html
   <!DOCTYPE html>
   <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>伪元素选择器</title>
           <style>
               /*E:first-letter E元素的第一个字母。*/
               p:first-letter{
                   font-size:50px;
               }
           </style>
       </head>
       <body>
           <p>
               我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签 <br>
               我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
               我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
               我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
               我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签我是P标签
               我是P标签我是P标签我是P标签我是P标签
           </p>
       </body>
   </html>
复制

（3）E:before E元素的内容之前。
案例：

```html
   <!DOCTYPE html>
   <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>伪元素选择器</title>
           <style>
               /*E:before E元素的内容之前。*/
               div:before{
                   content: '小母牛';
                   font-size:100px;
                   color:tomato;
               }
           </style>
       </head>
       <body>
           <div>迎风劈叉</div>
       </body>
   </html>
复制

（4）E:after E元素的内容之后。
案例：

 ```html
   <!DOCTYPE html>
   <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>伪元素选择器</title>
           <style>
               /*E:after E元素的内容之后。*/
               div:after{
                   font-size:100px;
                   content: '->凉快';
                   color:purple;
               }
           </style>
       </head>
       <body>
           <div>迎风劈叉</div>
       </body>
   </html>
复制

注意：在使用before或者after时，一定要配合content属性一起来使用

  • 结构性伪类选择器
    （1）在CSS中引入的结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式
    四个最基本的结构性伪类选择器
    a:root 将样式绑定到页面的根元素。
    案例：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>四个最基本的结构伪类选择器</title>
        <style>
            /*:root 将样式绑定到页面的根元素。*/
            :root{
                /*background-color:#000;*/
                /*声明变量*/
                --bgColor:#ccc;
                --fontColor:#000;
            }
            body{
                /*var() 使用变量*/
                background-color: var(--bgColor);
            }
            p{
                color:var(--fontColor)
            }
        </style>
    </head>
    <body>
        <p>我是P标签中的文字颜色</p>
    </body>
</html>
复制
（2）E:not() 对某个结构元素使用样式，但是想排除这个元素下的某个子结构元素。
	案例：
复制
<!DOCTYPE html>
           <html lang="en">
               <head>
                   <meta charset="UTF-8">
                   <title>四个最基本的结构伪类选择器</title>
                   <style>
                       /*E:not() 对某个结构元素使用样式，但是想排除这个元素下的某个子结构元素。*/
                       /*li{*/
                       /*    background-color:tomato;*/
                       /*}*/
                       /*.one{*/
                       /*    background-color: tomato;*/
                       /*}*/
                       li:not(.two){
                           background-color: tomato;
                       }
                   </style>
               </head>
               <body>
                   <ol>
                       <li class="one">我是第一行有序列表</li>
                       <li class="one">我是第二行有序列表</li>
                       <li class="two">我是第三行有序列表</li>
                       <li class="one">我是第四行有序列表</li>
                       <li class="one">我是第五行有序列表</li>
                   </ol>
               </body>
复制

（3） E:empty 匹配所有为空的E元素。
案例：

 <!DOCTYPE html>
           <html lang="en">
               <head>
                   <meta charset="UTF-8">
                   <title>四个最基本的结构伪类选择器</title>
                   <style>
                       /*E:empty 匹配所有为空的E元素。*/
                       li:empty{
                           background-color: tomato;
                       }
                   </style>
               </head>
               <body>
                   <ol>
                       <li class="one">我是第一行有序列表</li>
                       <li></li>
                       <li class="one">我是第二行有序列表</li>
                       <li></li>
                       <li class="two">我是第三行有序列表</li>
                       <li></li>
                       <li class="one">我是第四行有序列表</li>
                       <li></li>
                       <li class="one">我是第五行有序列表</li>
                   </ol>
               </body>
复制

（4）:target 代表链接到目标时。（a标签）
案例：

<!DOCTYPE html>
           <html lang="en">
               <head>
                   <meta charset="UTF-8">
                   <title>四个最基本的结构伪类选择器</title>
                   <style>
                       /*:target 代表链接到目标时。（a标签）*/
                      a:target{
                           font-size:50px;
                           font-weight: bold;
                           color:tomato;
                       }
                   </style>
               </head>
               <body>
                   <a href="#ly">摸柳岩</a>
                   <a href="#ty">摸唐嫣</a>
                   <ol>
                       <li class="one">我是第一行有序列表</li>
                       <li></li>
                       <li class="one">我是第二行有序列表</li>
                       <li></li>
                       <li class="two">我是第三行有序列表</li>
                       <li></li>
                       <li class="one">我是第四行有序列表</li>
                       <li></li>
                       <li class="one">我是第五行有序列表</li>
                   </ol>
                   <a id="ly">柳岩</a>
                   <a id="ty">唐嫣</a>
               </body>
复制
  • 其他的结构伪类选择器
    （1）E:first-child 对一个父元素中的第一个子元素E设置样式。
    案例：
<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器</title>
                  <style>
                      /*E:first-child 对一个父元素中的第一个子元素E设置样式。*/
                      li:first-child{
                          background-color: tomato;
                      }
                  </style>
              </head>
              <body>
                  <ol>
                      <li>风筝大剑五只鸟->寒冰</li>
                      <li>卖萌蘑菇快点跑->提莫</li>
                      <li>国王三刀真五秒->蛮王</li>
                      <li>我还是有序列表项一</li>
                      <li>我还是有序列表项二</li>
                      <li>我还是有序列表项三</li>
                      <li>我还是有序列表项四</li>
                      <li>我还是有序列表项五</li>
                  </ol>
              </body>
复制

（2）E:last-child 对一个父元素中的最后一个子元素E设置样式。
案例：

 <!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器</title>
                  <style>
                      /*E:last-child 对一个父元素中的最后一个子元素E设置样式。*/
                      li:last-child{
                          background-color: tomato;
                      }
                  </style>
              </head>
              <body>
                  <ol>
                      <li>风筝大剑五只鸟->寒冰</li>
                      <li>卖萌蘑菇快点跑->提莫</li>
                      <li>国王三刀真五秒->蛮王</li>
                      <li>我还是有序列表项一</li>
                      <li>我还是有序列表项二</li>
                      <li>我还是有序列表项三</li>
                      <li>我还是有序列表项四</li>
                      <li>我还是有序列表项五</li>
                      <li>我还是有序列表项六</li>
                  </ol>
              </body>
复制

（3）E:nth-last-child() 对指定需要的子元素E设置样式。（倒序）
案例：

<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器</title>
                  <style>
                      /*E:nth-last-child() 对指定需要的子元素E设置样式。（倒序）*/
                      li:nth-last-child(3){
                          background-color: tomato;
                      }
                  </style>
              </head>
              <body>
                  <ol>
                      <li>风筝大剑五只鸟->寒冰</li>
                      <li>卖萌蘑菇快点跑->提莫</li>
                      <li>国王三刀真五秒->蛮王</li>
                      <li>我还是有序列表项一</li>
                      <li>我还是有序列表项二</li>
                      <li>我还是有序列表项三</li>
                      <li>我还是有序列表项四</li>
                      <li>我还是有序列表项五</li>
                      <li>我还是有序列表项六</li>
                  </ol>
              </body>
复制

（4） E:nth-of-type() 与:nth-child()作用类似，但是仅匹配使用的同种标签元素。
案例：

<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器</title>
                  <style>
                      /*E:nth-of-type() 与:nth-child()作用类似，但是仅匹配使用的同种标签元素。*/
                      /*不会匹配到*/
                      li:nth-child(5){
                          background-color: tomato;
                      }
                      /*仅匹配使用的同种标签元素*/
                      li:nth-of-type(5){
                          background-color: fuchsia;
                      }
                  </style>
              </head>
              <body>
                  <ol>
                      <li>风筝大剑五只鸟->寒冰</li>
                      <li>卖萌蘑菇快点跑->提莫</li>
                      <li>国王三刀真五秒->蛮王</li>
                      <li>我还是有序列表项一</li>
                      <p>我是列表标签里面放的其它标签</p>
                      <li>我还是有序列表项二</li>
                      <li>我还是有序列表项三</li>
                      <li>我还是有序列表项四</li>
                      <li>我还是有序列表项五</li>
                      <li>我还是有序列表项六</li>
                  </ol>
              </body>
复制

（5）E:nth-last-of-type() 与:nth-last-child()作用类似，但是仅匹配使用的同种标签(倒叙)
案例：

 <!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器</title>
                  <style>
                      /*E:nth-last-of-type() 与:nth-last-child()作用类似，但是仅匹配使用的同种标签*/
                      li:nth-last-of-type(6){
                          background-color: tomato;
                      }
                  </style>
              </head>
              <body>
                  <ol>
                      <li>风筝大剑五只鸟->寒冰</li>
                      <li>卖萌蘑菇快点跑->提莫</li>
                      <li>国王三刀真五秒->蛮王</li>
                      <li>我还是有序列表项一</li>
                      <p>我是列表标签里面放的其它标签</p>
                      <li>我还是有序列表项二</li>
                      <li>我还是有序列表项三</li>
                      <li>我还是有序列表项四</li>
                      <li>我还是有序列表项五</li>
                      <li>我还是有序列表项六</li>
                  </ol>
              </body>
复制

（6）E:nth-child(an+b)循环设置样式
a 表示每次循环中间隔几个改变样式。
b 表示指定在循环中开始的位置。
案例：

<!DOCTYPE html>
            <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>其它的结构伪类选择器</title>
                    <style>
                       /*E:nth-child(an+b)循环设置样式*/
                        /*li:nth-child(2n+1){*/
                        /*    background-color: tomato;*/
                        /*}*/
                        li:nth-of-type(2n+1){
                            background-color: tomato;
                        }
                    </style>
                </head>
                <body>
                    <ol>
                        <li>风筝大剑五只鸟->寒冰</li>
                        <li>卖萌蘑菇快点跑->提莫</li>
                        <li>国王三刀真五秒->蛮王</li>
                        <li>我还是有序列表项一</li>
                        <p>我是列表标签里面放的其它标签</p>
                        <li>我还是有序列表项二</li>
                        <li>我还是有序列表项三</li>
                        <li>我还是有序列表项四</li>
                        <li>我还是有序列表项五</li>
                        <li>我还是有序列表项六</li>
                    </ol>
                </body>
复制
	（7）E:only-child 匹配父元素下仅有一个子元素，并且该子元素为E元素。
			案例：
 
复制
<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器</title>
                  <style>
                      /*E:only-child 匹配父元素下仅有一个子元素，并且该子元素为E元素。*/
                      p:only-child{
                          background-color: tomato;
                      }
                  </style>
              </head>
              <body>
                  <div>
                      <p>我是div中的p</p>
                  </div>
                  <div>
                      <p>我是第二个div中的第一个P</p>
                      <b>我是第二个div中的第一个B</b>
                  </div>
                  <div>
                      <p>我是第三个div中的第一个P</p>
                      <p>我是第三个div中的第二个P</p>
                  </div>
              </body>
复制

（8）E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素E。
案例：

  <!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器</title>
                  <style>
                     /*E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素E。*/
                      p:only-of-type{
                          background-color: tomato;
                      }
                  </style>
              </head>
              <body>
                  <div>
                      <p>我是div中的p</p>
                  </div>
                  <div>
                      <p>我是第二个div中的第一个P</p>
                      <b>我是第二个div中的第一个B</b>
                  </div>
                  <div>
                      <p>我是第三个div中的第一个P</p>
                      <p>我是第三个div中的第二个P</p>
                  </div>
              </body>
复制

（9） E:enabled 匹配表单中激活的元素(只要没有disabled都是激活的)
案例：

 <!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器-表单相关</title>
                  <style>
                      /*E:enabled 匹配表单中激活的元素*/
                      input:enabled{
                          background-color: tomato;
                      }
                  </style>
              </head>
              <body>
                  <form action="" method="get">
                      <input type="text" name="user" value="admin" />
                      <br>
                      <input type="text" readonly name="user1" value="admin1" />
                      <br>
                      <input type="text" disabled name="user2" value="admin2" />
                  </form>
              </body>
复制

（10）E:disabled 匹配表单中未激活的元素。(有disabled属性)
案例：

<!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器-表单相关</title>
                  <style>
                      /*E:disabled 匹配表单中未激活的元素。(有disabled属性)*/
                      input:disabled{
                          background-color: tomato;
                          color:#fff;
                      }
                  </style>
              </head>
              <body>
                  <form action="" method="get">
                      <input type="text" name="user" value="admin" />
                      <br>
                      <input type="text" readonly name="user1" value="admin1" />
                      <br>
                      <input type="text" disabled name="user2" value="admin2" />
                  </form>
              </body>
复制

（11）E:checked 匹配表单中被选择的radio或者checkbox元素。
案例：

  <!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器-表单相关</title>
                  <style>
                      /*E:checked 匹配表单中被选择的radio或者checkbox元素。*/
                      /*input:checked{*/
                      /*    width: 100px;*/
                      /*    height: 100px;*/
                      /*}*/
                      input[type=radio]:checked+label{
                          font-size:20px;
                          font-weight: bold;
                      }
                      input[type=checkbox]:checked+label{
                          color:tomato;
                      }
                  </style>
              </head>
              <body>
                  <form action="" method="get">
                      <input type="radio" name="sex" value="0" id="nv"><label for="nv">女</label>
                      <input type="radio" name="sex" value="1" id="nan"><label for="nan">男</label>
                      <input type="radio" name="sex" value="2" id="baomi"><label for="baomi">保密</label>
                      <hr>
                      <input type="checkbox" name="hobby[]" value="0" id="one"><label for="one">混球</label>
                      <input type="checkbox" name="hobby[]" value="1" id="two"><label for="two">足球</label>
                      <input type="checkbox" name="hobby[]" value="2" id="three"><label for="three">篮球</label>
                  </form>
              </body>
复制

（12）focus 设置元素在其获取鼠标焦点的样式。(只有输入域有效)
案例：

 <!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器-表单相关</title>
                  <style>
                      /*:focus 设置元素在其获取鼠标焦点的样式。*/
                      input:focus{
                          background-color: tomato;
                          color:#fff;
                      }
                  </style>
              </head>
              <body>
                  <form action="" method="get">
                      <input type="text" name="user" value="admin5" />
                      <br>
                      <input type="text" name="user" value="admin4" />
                      <br>
                      <input type="text" name="user" value="admin3" />
                      <br>
                      <input type="text" name="user" value="admin2" />
                      <br>
                      <input type="text" readonly name="user1" value="admin1" />
                      <br>
                      <input type="text" disabled name="user2" value="admin2" />
                  </form>
              </body>
复制

（13）::selection 匹配用户当前选中的元素(了解)。
案例：

 <!DOCTYPE html>
          <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>其它的结构伪类选择器-表单相关</title>
                  <style>
                      /*::selection 匹配用户当前选中的元素(了解)。*/
                      div::selection{
                          background-color: tomato;
                          color: white;
                      }
                  </style>
              </head>
              <body>
                  <form action="" method="get">
                      <input type="text" name="user" value="admin5" />
                      <br>
                      <input type="text" name="user" value="admin4" />
                      <br>
                      <input type="text" name="user" value="admin3" />
                      <br>
                      <input type="text" name="user" value="admin2" />
                      <br>
                      <input type="text" readonly name="user1" value="admin1" />
                      <br>
                      <input type="text" disabled name="user2" value="admin2" />
                      <hr>
                      <input type="radio" name="sex" value="0" id="nv"><label for="nv">女</label>
                      <input type="radio" name="sex" value="1" id="nan"><label for="nan">男</label>
                      <input type="radio" name="sex" value="2" id="baomi"><label for="baomi">保密</label>
                      <hr>
                      <input type="checkbox" name="hobby[]" value="0" id="one"><label for="one">混球</label>
                      <input type="checkbox" name="hobby[]" value="1" id="two"><label for="two">足球</label>
                      <input type="checkbox" name="hobby[]" value="2" id="three"><label for="three">篮球</label>
                  </form>
                  <div>
                      我是div中的内容
                  </div>
              </body>
复制
状态伪类选择器
  • :link 设置超链接a在未被访问前的样式。
  • :visited 设置超链接a在其链接地址已经被访问的样式。
  • :hover 设置元素在鼠标悬停时的样式。(重点)
  • :active 设置元素在被用户激活时的样式。
    案例：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>状态伪类选择器</title>
        <style>
            /*1. :link  设置超链接a在未被访问前的样式。*/
            a:link{
                color:red;
            }
            /*2. :visited 设置超链接a在其链接地址已经被访问的样式。*/
            a:visited{
                color:blue;
            }
            /*3. :hover 设置元素在鼠标悬停时的样式。(重点)*/
            a:hover{
                color:green;
            }
            /*4. :active 设置元素在被用户激活时的样式。*/
            a:active{
                color:purple;
            }
            li:hover{
                background-color: tomato;
            }
        </style>
    </head>
    <body>
        <a href="https://www.so.com" target="_blank">去360</a>
        <ul>
            <li>aaaaaaaaaaaaaa</li>
            <li>aaaaaaaaaaaaaa</li>
            <li>aaaaaaaaaaaaaa</li>
            <li>aaaaaaaaaaaaaa</li>
            <li>aaaaaaaaaaaaaa</li>
        </ul>
    </body>
 
复制
选择器优先级
  • 内联样式，优先级1000
  • id选择器，优先级100
  • 类和伪类，优先级10
  • 元素选择器，优先级1
  • 通配符选择器，优先级0

当选择器包含多种选择器时，需要将多种选择器优先级相加然后进行比较。选择器的优先级不会超过它最大数量级，如果选择器优先级一样，则使用靠后的样式。
并集(组合)选择器的优先级是单独计算。
可以在样式的最后添加一个!important,则此时该样式会获得一个最高的一个优先级，将会超过所有样式甚至内联样式，所以在开发中尽量避免使用。

案例：

html <!DOCTYPE html>
 
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>
    <style>
        #one{
            font-size: 50px;
        }
        .one{
            font-size:30px!important;
            color:tomato;
        }
        .two>.three{
            color:green;
        }
        .two>div{
            color:blue!important;
        }
      </style>
  </head>
  <body>
      <div class="one" id="one">
          我是内容
      </div>
      <div id="two" class="two">
          <div class="three" style="color: purple">我是包含中的div</div>
      </div>
      <div class="two">
          <div class="three">我是包含中的div2</div>
      </div>
  </body>
 
 
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/15014.html
标签
tensorflow
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

C#解析JSON的常用库--Newtonsoft.Json

2024-11-30 11:11:42

jsonfield 项目常见问题解决方案

2024-11-30 11:11:42

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024-11-30 11:11:41

BugJson因为json格式问题OOM怎么办

2024-11-30 11:11:41

python 解读JSON文件，一文搞懂！

2024-11-30 11:11:40

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

2024-11-30 11:11:40

开源项目“Pretty JSON”安装与配置完全指南

2024-11-30 11:11:39

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

2024-11-30 11:11:39

解决全局安装pnpm后无法使用的问题

2024-11-30 11:11:39

安装Nodejs后，npm无法使用

2024-11-30 11:11:38

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！