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

于 2024-07-07 07:24:53 发布
阅读量1.2k 收藏 9
点赞数 35
文章标签： 前端 css tensorflow
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50556117/article/details/140240229
版权

走进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>
无敌开心
关注
  • 35
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
html css3入门到精通 pdf,css3从入门到精通pdf完整版附视频教程
weixin_32430445的博客
06-22 857
本帖最后由 长沙-小知姐姐 于 2019-3-20 09:41 编辑这次和大家一起来聊一聊css3,在前端编程中，html，css，js分别被称之为前端编程中的骨，肉，魂。html搭建前端页面的结构，就像是人的骨骼一般，支撑整个页面。css控制前端页面显示的效果和布局，就像是人的血肉一般，使得整个页面更加生动，灵活。js控制前端页面的业务逻辑，就像是人的灵魂一般，让页面能像一个人一样做该做的事情。...
html5+css3从入门到精通
07-03
本教程"html5+css3从入门到精通"针对前端新手，旨在帮助初学者快速掌握这两项核心技术。 HTML5（超文本标记语言第五版）是网页内容结构的标准，它引入了许多新的元素和属性，以更好地表达内容的语义。例如，`...
HTML5+CSS3+JavaScript从入门到精通【文末送书】
最新发布
一键难忘的博客
05-23 7315
第二，对图书内容进行了深度更新、优化，如优化了内容布置，弥补了讲解疏漏，将开发环境和工具更新为新版本，增加了对新技术点的剖析，将项目替换为更能体现当今IT开发现状的热门项目等，使其更与时俱进，更适合读者学习；全书共计有205个应用实例，141个编程训练，81个综合练习，1个项目案例，为初学者打造“学习+训练”的强化实战学习环境。读者对象：初学编程的自学者，编程爱好者，大中专院校的老师和学生，相关培训机构的老师和学员，进行毕业设计的学生，初、中级程序开发人员，程序测试及维护人员，参加实习的“菜鸟”程序员。
CSS初入门：基础介绍、选择器、特性
lalala_dxf的博客
03-15 1139
一、简介 什么是CSS CSS（英文名：Cascading Style SHeets，中文名：层叠样式表），是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，将文档以比较优雅的形式呈现给用户 HTML和CSS之间的关系 THML是网页内容的载体。就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。可以对网页中标题文字、颜色变化、图片加载、网页边框等加以修饰，使其更加美观 举个生活中比较接近的例子：HTML->人；CSS->化.
CSS 选择器全攻略：从入门到精通（下）
你若盛开，清风自来
01-11 1118
以下是一些常见的高级 CSS 选择器，包括子元素选择器和属性选择器：子元素选择器（Child Selector）：用于选择某个元素的直接子元素。例如，div > p选择器将选择div元素的直接子元素p。属性选择器（Attribute Selector）：根据元素的属性值来选择元素。选择具有特定属性的元素。选择具有特定属性且值等于指定值的元素。选择具有特定属性且值包含指定值的元素。选择具有特定属性且值以指定值开头的元素。选择具有特定属性且值以指定值结尾的元素。
CSS从入门到精通
m0_55674689的博客
01-31 1570
css从入门到精通
Web前端从入门到精通
syqzxz的博客
11-07 727
学习记录，学习笔记
html5 css3 javascript从入门到精通,HTML5+CSS3+JavaScript从入门到精通（微课精编版）
weixin_42309785的博客
06-20 1542
HTML5+CSS3+JavaScript从入门到精通(微课精编版)语音编辑锁定讨论上传视频《HTML5+CSS3+JavaScript从入门到精通(微课精编版)》是2018年8月清华大学出版社出版的图书，作者是前端科技。书名HTML5+CSS3+JavaScript从入门到精通(微课精编版)作者前端科技ISBN9787302502203定价79.80元出版社清华大学出版社...
css从入门到精通
m0_60540878的博客
11-15 1831
目录 1、转义字符 2、mete标签 3、元素类型 1、块元素（block element）和行内元素（inline element） 4、css引入方式 1、链接式 2、行内样式 3、内联式 5、选择器 1、元素选择器 2、类选择器 3、ID选择器 4、属性选择器 5、通配选择器选择所有元素 6、交集选择器 7、并集选择器 8、关系选择器 9、伪类选择器 10、伪元素选择器 11、样式的继承 6、选择器权重 1、样式的冲突 2、选择器的权重 ...
web前端从入门到精通
m0_74219427的博客
10-20 1788
web前端从入门到精通 第1、2、3周
Web-前端html+css从入门到精通 165. 伪元素概念与意义.zip
05-23
伪元素是CSS中一种特殊的选择器，它允许我们对文档中的某些部分进行额外的样式化，而这些部分在HTML中并不存在。它们的名字以双冒号（::）开头，例如::before和::after。这两个最常用的伪元素分别用于在元素内容之前...
CSS3+HTML5+从入门到精通-PDF中文教程
08-22
《CSS3+HTML5+从入门到精通》是一本针对初学者和有一定基础的学习者编写的全面教程，旨在帮助读者掌握这两个现代Web开发的核心技术。HTML5和CSS3是构建现代网页和应用程序不可或缺的工具，它们带来了丰富的交互性和...
HTML5+CSS3从入门到精通.zip
05-29
HTML5和CSS3是现代网页开发的基石，它们极大地提升了网页设计的灵活性和表现力。在JavaWeb前端开发中，熟练掌握这两项技术...通过阅读"HTML5+CSS3从入门到精通1.pdf"这份文档，你可以系统地学习并掌握这些关键知识点。
《HTML5+CSS3从入门到精通》源码17和19章
09-12
《HTML5+CSS3从入门到精通》这本书以其系统全面的内容，成为初学者学习这两项技术的理想教材。在这个压缩包中，包含了第17章和第19章的源码，这些章节通常会涵盖关键知识点，帮助读者深入理解HTML5和CSS3的核心概念...
CSS3+DIV网页样式与布局从入门到精通（未来科技） 源代码
09-13
CSS3+DIV网页样式与布局从入门到精通不仅是一门技术课程，更是现代前端开发不可或缺的一部分。通过系统地学习CSS3的各种新特性以及如何使用DIV进行布局，开发者可以构建出既美观又实用的网页。无论是对于初学者还是...
《HTML5+CSS3从入门到精通》源码14-16章
09-12
《HTML5+CSS3从入门到精通》是针对初学者设计的一本教程，旨在帮助读者掌握现代网页设计的核心技术。这本书的源码包含了14至16章的内容，这些都是学习HTML5和CSS3过程中非常关键的部分。下面将详细介绍这三个章节...
JavaScript从入门到精通（第2版）PPT.7z
07-14
在“JavaScript从入门到精通（第2版）PPT”这套教学资料中，我们将深入探讨JavaScript的核心概念、语法特性以及实际应用。 1. **基础概念** - **变量与数据类型**：JavaScript支持基本数据类型（如字符串、数字、...
精通HTML5与CSS3：从入门到进阶
7. **CSS3样式**：第7章和第8章全面介绍了CSS3，包括选择器、盒模型、布局技术（如Flexbox和Grid）、过渡、动画和渐变等。 8. **CSS3进阶**：第9章进一步探讨了CSS3的一些高级特性，如圆角边框、动画、自定义字体和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

无敌开心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值