Web前端-HTML&CSS笔记之05

时间:2021-09-06
本文章向大家介绍Web前端-HTML&CSS笔记之05,主要包括Web前端-HTML&CSS笔记之05使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

CSS选择器

关系选择器

  • 父元素
    • 直接包含子元素的元素叫做父元素
  • 子元素
    • 直接被父元素包含的元素是子元素
  • 祖先元素
    • 直接或间接包含后代元素的元素叫做祖先元素
    • 一个元素的父元素也是它的祖先元素
  • 后代元素
    • 直接或间接被祖先元素包含的元素叫做后代元素
    • 子元素也是后代元素
  • 兄弟元素
    • 拥有相同父元素的元素是兄弟元素
<html>
    <head>
    </head>
    <body>
        <div>
            我是一个div
            <p>
                我是div中的p元素
                <span>我是p元素中的span</span>
            </p>
            <span>我是div中的span</span>
        </div>
        <div class="box">
            我是div外面的div
            <span>我是第三个span</span>
        </div>
    </body>
</html>
  1. 为div的子元素span设置一个字体颜色红色(为div直接包含的span设置字体颜色)
    • 使用子元素选择器
      • 作用:选中指定父元素的指定子元素
      • 语法:父元素 > 子元素
div > span{

color:red;

}
  • 如果想选中 第三个span怎么写?
div.box > span {
color:pink;
}
  1. 后代颜色选择器
    • 作用:选中指定元素内的指定后代元素
    • 语法:祖先 后代(祖先 空格 后代)
      • 把div元素 的后代元素span 设置成红色怎么写呢?
div span {
color:red;
}
    • 选择下一个兄弟
      • 语法:前一个 + 下一个
#选择紧挨着p元素的下一个span元素!
p + span {

color:red;
}
  • 选择下面所有的兄弟
    • 语法 :兄 ~ 弟
    • 效果:选中 前一个元素后面的所有的兄弟元素
#选中p元素后面兄弟元素中所有的span元素
p ~ span {
 color:orange;
}

属性选择器

<html>
    <head>
        
    </head>
    <body>
        <p title="abc">醉里挑灯看剑 </p>
        <p title="abcdef">梦回吹角连营 </p>
        <p title="helloabc">八百里分麾下炙</p>
        <p>五十弦翻塞外声</p>
    </body>
</html>

[属性名]选择含有指定属性的元素

<style>
   p[title]{

         color:red;
}
    </style>

[属性名=属性值]选择含有指定属性和属性值的元素

p[title=abc]{color:red;}

[属性名^=属性值]选择属性值以指定值开头的元素

p[title^=ab]{color:red;}

[属性名$=属性值]选择以指定属性值结尾的元素

p[title$=ef]{color:red;}

[属性名*=属性值]选择属性值中含有某值的元素

p[title*=e]{color:red;}

伪类选择器

即不存在的类,特殊的类

  • 伪类用来描述一个元素的特殊状态

    • 比如:第一个子元素、被点击的元素、鼠标移入的元素....
  • 伪类一般使用 : 开头

    • :first-child 第一个子元素

    • :last-child 最后一个子元素

    • :nth-child() 选中第n个子元素

      特殊值有

      • n 第n个 n 的范围0到正无穷
      • 2n 或 even 表示选中所有偶数位的元素
      • 2n+1 或 odd 表示选中所有奇数位的元素

以上这些伪类都是根据所有的子元素进行排序!

  • 还有一些
    • :first-of-type
    • :last-of-type
    • :nth-of-type()

以上这几个伪类的功能和上述类似,不同点是他们是在相同类型元素中进行排序

  • :not() 否定伪类 。作用就是将符合条件的元素从选择器中去除

总之 child 是所有元素排序 of-type 是同类元素排序

#练习<ul>
<span>我是一个span</span>
<li>第零个</li>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
# ul > li:first-child{color:red;}  没有变色的因为ul后面第一个不是 li元素而是个span
# ul > li:last-child{color:red;}   "第五个"  会变为红色
# ul > li:nth-child(2){color:red;}  "第零个"  会变红
# ul > li:first-of-type{color:red;}  "第零个" 会变红
# ul > li:nth-of-type(2){color:red;}  "第一个"  会变红
# ul > li:not(:nth-of-type(6)){color:red;}  除了 ”第五个“ 和 ”我是一个span”都红

超链接的伪类

:link 用来表示没访问过的链接(正常的链接)

:visited 用来表示访问过的链接

上面这两个是专属于a元素的。 hover 和 active 所有元素都可以用。

<!DOCTYPE html>
<html lang="en"><head>	
<meta charset="UTF-8">	
<meta name="viewport" content="width=device-width, initial-scale=1.0">	
<title>Document</title>     
 <style>       
 a:link{            color:red;        }       
   </style>
</head>
<body>	
<a href="https://www.baidu.com">访问过的连接</a>   
<a href="https://www.baidu.com">没访问的连接</a>   
 </body>
</html>

:hover 表示鼠标移入

a:hover{   color:red;   font-size:50px;}

:active 用来表示鼠标点击

a:active{
    color:yellowgreen;
}

伪元素选择器

伪元素,便是页面中的一些特殊的并不真实存在的元素(特殊的位置)

伪元素的使用 ::

  • ::first-letter 表示第一个字母 p::first-letter{font-size:20px;}
  • ::first-line 表示第一行
  • ::selection 表示选中的内容 P::selection{color:red;}
  • ::before 元素的开始位置
  • ::after 元素的最后
::first-letter 表示第一个字母  p::first-letter{font-size:20px;}
::first-line   表示第一行
::selection    表示选中的内容  P::selection{color:red;}
::before       元素的开始位置
::after        元素的最后

before和after 必须结合content属性来使用

div::before{
		content:"abc";
		color:red;

}
#content的内容 用单引号或者双引号皆可。而且里面的内容是无法在网页中被选中的。

before和after在这几个标签中是最常用的重点记一下噻。

CSS学习暂告段落~

原文地址:https://www.cnblogs.com/sonemacho/p/15235635.html