CSS基础笔记四,伪类选择器和对象选择器(鼠标点击的四种状态,列表自定义选择,容器只有一个,除了被选中的其他都有,元素为空的时候,元素获得焦点的时候,单选和复选增强)

这篇具有很好参考价值的文章主要介绍了CSS基础笔记四,伪类选择器和对象选择器(鼠标点击的四种状态,列表自定义选择,容器只有一个,除了被选中的其他都有,元素为空的时候,元素获得焦点的时候,单选和复选增强)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

伪类选择器  常用有这些:

1,鼠标点击元素的4种状态 爱恨离别(link visited hover active) 前面的2个只适用于

a标签,后面的2个适用于其他标签。顺序不能改变

2,列表中先选择谁就选择谁 

            first-child  选择开头

             last-child 选择结尾

            nth-child(odd或者enen或者自定义数值) 选择偶数或者奇数或者自定义行

3,当一个容器只有一个值就生效的选择器 only-child 只爱一个人 多了就不生效了

4,当容器除让她以外 其他都匹配到  not(她)  一个好的前任就应该更死了一样

5,当容器里面的元素为空的时候 就生效 empty

6,当元素获得焦点的时候,就生效 focus  这个很常用 也很实用 通常用于用户输入的对话框

7,作为单选和复选修改样式的时候 checked

伪元素(对象)选择器

有befor 和alter  

他们常用于给列表前后添加各种样式的美化效果

也是用于给标题前后添加美化效果

目录

一,伪类选择器

一,鼠标点击的四种状态 link visited hover active

第一种 link  鼠标访问之前的颜色  

第二种,visited 鼠标访问之后的颜色

第三种,鼠标滑过去的颜色

第四种,鼠标按住不动的状态

​编辑

二,列表中想选择谁就选择谁  first-child last-child nth-child(n)

第一种frist-child

  第二种 last-child

第三种,选择列表偶数或者奇数或者任意一个

三,只有一个子元素的时候才会生效 only-child

四,里面没有任何元素,他就生效,有了子元素他就不生效 emply

五,除了被not选中的,其他都生效

六,焦点选择器,谁被鼠标点中,获得焦点,谁就生效 focus

 ​编辑

 七,单选和复选框增强效果选择器 checked

二,伪对象选择器  before alter

三,总结


一,伪类选择器

一,鼠标点击的四种状态 link visited hover active

注意link 和visited 仅仅限于超级连接 a标签

第一种 link  鼠标访问之前的颜色  

修改超链接 鼠标点击之前的颜色

        a:link{
            color: #fa4d15;
        }
第二种,visited 鼠标访问之后的颜色
        /*修改点击之后的颜色*/
        a:visited{
            color: yellow;
        }
第三种,鼠标滑过去的颜色
    /*    鼠标悬停上面的颜色*/
        a:hover{
            color: dimgray;
        }
第四种,鼠标按住不动的状态
   /*    鼠标点击但是不松手的状态*/
        a:active{
            color: yellowgreen;
        }

全部代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
<!--  伪类选择器
示例 比如a标签有4个状态  访问之前 的颜色  访问过后的  鼠标放在标签上的  鼠标点击但是不松手的
link 访问之前的
visited 点击之后的颜色
hover 鼠标悬停上面的颜色
active 鼠标点击但是不松手的状态
必须按照顺序来的 l v h a
-->
    <style>
/*<!--      修改访问之前的颜色  -->*/
        a:link{
            color: #fa4d15;
        }
        /*修改点击之后的颜色*/
        a:visited{
            color: yellow;
        }
    /*    鼠标悬停上面的颜色*/
        a:hover{
            color: dimgray;
        }
    /*    鼠标点击但是不松手的状态*/
        a:active{
            color: yellowgreen;
        }
    /*    点击和点击后的颜色 只要a这种可以点击生效  其他的对所有标签都生效*/
    /*    鼠标悬停上面的颜色*/
        p:hover{
            color: dimgray;
        }
    /*    鼠标点击但是不松手的状态*/
        p:active{
            color: yellowgreen;
        }

    /*    看看input的效果  同样,前面的2个不生效 只是后面的2个生效*/
    /*    鼠标悬停上面的颜色*/
        input:hover{
            color: dimgray;
        }
    /*    鼠标点击但是不松手的状态*/
        input:active{
            color: yellowgreen;
        }


    </style>
</head>
<body>
<a href="https://www.baidu.com/">百度</a>
<p>我也来看看有没有这个效果</p>
<form action="https://www.baidu.com/">
    <input type="submit">
</form>

</body>
</html>

伪对象选择器用法,CSS,css,笔记,前端,python,mysql,css3,html5

二,列表中想选择谁就选择谁  first-child last-child nth-child(n)

第一种frist-child

选择列表的第一个

/*<!--   first-child是让其第一个生效 -->*/
    ul li:first-child{
      color: #fa4d15;
    }
  第二种 last-child

选择列表的最后一个

  /*last-child 是让最后一个生效*/
  ul li:last-child{
    color: yellow;
  }
第三种,选择列表偶数或者奇数或者任意一个
  /*自定义 想选择谁就选择谁  也可以是统一选择偶数或者奇数*/
  /*odd奇数  envn是偶数*/
  ul li:nth-child(odd){
    color: yellowgreen;
  }
    ul li:nth-child(even){
    color: pink;
  }
    /*定义指定 想让谁变色就让谁变色*/
    ul li:nth-child(4){
    color: red;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>first-child选择器</title>
  <style>
/*<!--   first-child是让其第一个生效 -->*/
    ul li:first-child{
      color: #fa4d15;
    }
  /*last-child 是让最后一个生效*/
  ul li:last-child{
    color: yellow;
  }
  /*自定义 想选择谁就选择谁  也可以是统一选择偶数或者奇数*/
  /*odd奇数  envn是偶数*/
  ul li:nth-child(odd){
    color: yellowgreen;
  }
    ul li:nth-child(even){
    color: pink;
  }
    /*定义指定 想让谁变色就让谁变色*/
    ul li:nth-child(4){
    color: red;
  }

  </style>
</head>
<body>
<ul>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
  <li>列表4</li>
  <li>列表5</li>
  <li>列表6</li>
  <li>列表7</li>
  <li>列表8</li>
  <li>列表9</li>
  <li>列表10</li>
</ul>
</body>
</html>

伪对象选择器用法,CSS,css,笔记,前端,python,mysql,css3,html5

三,只有一个子元素的时候才会生效 only-child

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>only-child</title>
<!--  only-child 仅仅有一个子元素

-->
  <style>
/*<!--   当一个容器仅仅只有一个元素的时候 才会生效 -->*/
    div p:only-child{
      color: #ffcccc;
    }
  </style>
</head>
<body>
<div>
  <p>我是唯一一个p标签</p>
</div>
<!--以上第二个就没生效-->
<div>
  <p>我是大哥</p>
  <p>我是二哥</p>
</div>

</body>
</html>

伪对象选择器用法,CSS,css,笔记,前端,python,mysql,css3,html5

四,里面没有任何元素,他就生效,有了子元素他就不生效 emply

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>empty选择器</title>
<!--  empty
里面没有任何子元素到时候 她就生效 有了子元素他就不生效-->
  <style>
    p{
      /*没有文本的时候 p是不生效的,line-height 是设置文本高度的 */
      height: 30px;
      line-height: 30px;
      /*background-color: #ffcccc;*/
    }
  /*  当文本内容为空的时候 ,这个选择器就生效了 包括文本节点 空格等都算  必须是None*/
    p:empty{
      background-color: red;
    }

  </style>
</head>
<body>
<!--我们创造了3个文本-->
<p></p>
<p><span>我是p里里面的span</span></p>
<p>有文字</p>
</body>
</html>

伪对象选择器用法,CSS,css,笔记,前端,python,mysql,css3,html5

五,除了被not选中的,其他都生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>not选择器</title>
<!--  not选择器
除了这个 其他都选择-->
  <style>
/*<!--    not 里面加了p 表示除了p以外 其他都生效  注意div后面需要空格一下-->*/
    div :not(p){
      color: #ffcccc;
    }
  </style>
</head>
<body>
<div>
  <p>我是p</p>
  <a href="#">我是a</a>
  <span>我是span</span>
</div>

</body>
</html>
 

伪对象选择器用法,CSS,css,笔记,前端,python,mysql,css3,html5

六,焦点选择器,谁被鼠标点中,获得焦点,谁就生效 focus

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>focus焦点</title>
<!--  焦点选择器 谁获得鼠标焦点 谁就改变颜色-->
  <style>
    input:focus{
      background-color: #ffcccc;
    }
  </style>
</head>
<body>
<!--通过设置4个对话框方便观察-->
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</body>
</html>

 

 七,单选和复选框增强效果选择器 checked

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checked选择器</title>
  <style>
/*<!--   有了这个选择器,当选择谁的时候 谁就会边宽和边高 -->*/
    input:checked{
      width: 30px;
      height: 25px;
    }
  </style>
</head>
<body>
<input type="checkbox" name="a1" value="xue">学习
<input type="checkbox" name="a1" value="xue1">学习1
<input type="checkbox" name="a1" value="xue2">学习2
<input type="radio" name="a2" value="nan">男
<input type="radio" name="a2" value="女">女

</body>
</html>

伪对象选择器用法,CSS,css,笔记,前端,python,mysql,css3,html5

二,伪对象选择器  before alter

可以给标题修改美化效果 同时也能给列表添加效果

代码中的2个案例 一个是给列表前后增加内容,一个是给标题前后增加美化效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪对象选择器</title>
<!--  也被成为伪元素选择器-->
<!--  可以在列表前面或者后面添加内容
必须要配额和content来使用
-->
  <style>
/*<!--  在前面添加内容  -->*/
    ul::before{
      content: '我是前面的';
      /*对这条修改内容*/
      color: #ffcccc;
      font-size: 50px;
    }
  ul:after{
    content: '我是后面的内容';
    /*对这条修改内容*/
    color: #fa4d25;
    font-size: 12px;
  }
  /*对标题前面添加特效*/
 h3::before{
   content: '';
   padding-left: 5px;
   background-color: #fa4d25;
 }
  /*给标题后面添加特效*/
 h3::after{
   content: '';
   padding-left: 5px;
   background-color: #ffcccc;
 }
  </style>
</head>
<body>
<ul>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
</ul>
<h3>&nbsp;我是标题3&nbsp;</h3>
</body>
</html>

伪对象选择器用法,CSS,css,笔记,前端,python,mysql,css3,html5文章来源地址https://www.toymoban.com/news/detail-773523.html

三,总结

选择器分类
    1,基础选择器: 全局选择器 元素选择器 类选择器 id选择器 合并选择器
    2,关系选择器  后代选择器  子代选择器 相邻兄弟选择器  通用兄弟选择器
    3,伪类选择器
          鼠标点击状态选择器(4个状态)(爱恨离别  link visited hover active)
          让列表中任何一个值 想选谁就选谁(first-child)
          当容器只有以一个值的时候就生效的选择器 only-child
          当容器除了他其他都生效的选择器  not(她)
          当标签为空的时候,就生效的选择器 empty
          当标签被获得焦点,就触发各种自定义特效的选择器 focus
          作为单选和复选 修改样式的选择器  checked
      4,伪对象(元素)选择器  befor 和alter  可以给列表或者系列元素前后添加内容 特效等等

到了这里,关于CSS基础笔记四,伪类选择器和对象选择器(鼠标点击的四种状态,列表自定义选择,容器只有一个,除了被选中的其他都有,元素为空的时候,元素获得焦点的时候,单选和复选增强)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css,类选择器,id选择器,伪类选择器

    四个伪类选择器顺序不能换 id选择器class选择器标签选择器

    2024年02月13日
    浏览(48)
  • CSS - 选择器详解 - 子代、后代选择器详解 - 伪类选择器 - 测试

    新建一个测试项目文件夹 test ,然后在 test 文件夹内新建一个名为 css 的文件夹,创建一个名为 style.css 的文件,最后在 test 文件夹下新建一个 test.html 文件。 test | —— | | ——css —— style.css | test.html 选择子节点 父节点 (父标签) | 子节点 (子标签) eg: ul 是父标签,而

    2024年02月05日
    浏览(49)
  • 关于css 的选择器和 css变量

    1. 后代选择器:也就是我们常见的空格选择器,选择的对象为该元素下的所有子元素 。例如,选择所有 元素下的 元素 2. 子元素选择器 ‘’ 选择某元素下的直接子元素。例如,选择所有 元素的直接子元素 :div p { … } 3. 相邻兄弟选择器:+ 用于选择某个元素的下一个兄弟元

    2024年02月11日
    浏览(49)
  • CSS选择器和优先级权重

    标签选择器、伪元素选择器:1 类选择器、属性选择器、伪类选择器:10 id 选择器:100 内联样式:1000 选择器 格式 优先级权重 id选择器 #id 100 类选择器 .class 10 属性选择器 a[ref=“eee”] 10 伪类选择器 div:last-child 10 标签选择器 div 1 伪元素选择器 div:after 1 相邻兄弟选择器 h1+p

    2024年02月10日
    浏览(72)
  • CSS快速入门-选择器和优先级

    CSS是一种用于样式化网页的语言,全称为“层叠样式表”(Cascading Style Sheets)。 它可以控制网页中元素的外观和布局,例如颜色、字体、大小、边距、对齐等,让网页变得更加美观和易于阅读。 使用CSS可以将样式与网页内容分离开来,从而使网页结构更加清晰,减少HTML代码

    2023年04月22日
    浏览(52)
  • 【css伪类选择器及透明度——附项目图片及代码】

    不知不觉,又鸽了好长时间了,非常抱歉,没办法,毕竟开学了,今天课少,抽出了两个小时写了一篇css的,每天不是被催更,就是在催更的路上。放心,小陈陈有时间一定会给大家分享好玩的作品。 让大家欢声笑语中学到新知识,文章大概写了3个半小时,到目前为止已完

    2023年04月09日
    浏览(44)
  • CSS的伪类选择器:nth-child()的用法示例

    CSS的伪类选择器 :nth-child() 的用法示例 n 可以 +- , 右边数字 只能 + 第一到第六的td : td:nth-child(n+1):nth-child(-n+6) 第二到第八的a : a:nth-child(n+2):nth-child(-n+8) 1 等效 0n+1 , 7 等效 0n+7 , 没有负数,不能倒数 第一个a : (1) 或 (0n+1) 第七个a : (7) 或 (0n+7) 想\\\"-1\\\",“0n-1”,“-7”,\\\"0n-7\\\"从倒数开始

    2024年02月22日
    浏览(40)
  • CSS(二)-- 选择器的运用(针对基本选择器和复合选择器的详细解析)

    目录 1.  选择器的作用  2.  选择器的分类  3.  基本选择器 3.1  标签选择器 3.2  类选择器 3.3  id 选择器 小拓展: 3.4  通配符选择器 小总结: 4.  复合选择器(记忆) 4.1  子代选择器 4.2  后代选择器 小拓展: 4.3  交集选择器 4.4  并集选择器 选择器(选择符)就是 根据不

    2024年02月02日
    浏览(41)
  • 【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )

    常见的 结构伪类选择器 : E:first-child 选择器 : E 表示 HTML 标签类型 , 该选择器 选择 匹配的父容器 中的 第一个 E 类型标签 子元素 ; E:last-child 选择器 : 该选择器 选择 匹配的父容器 中的 最后一个 E 类型标签 子元素 ; E:nth-child(n) 选择器 : 该选择器 选择 匹配的父容器 中的 第

    2024年02月05日
    浏览(42)
  • 数字电路基础(四) 数据分配器、数据选择器和数值比较器

    在数据传输的过程中,数据选择器可以把某一路的数据分配到不同的数据通道上,这种电路称为数据分配器。简称DEMUX,一般有已鞥输入和多个输出。如下图所示是一个四路数据选择器的芯片集成图: 它可以将D送到数据变量选择的通道,下图是数据选择器的真值表: 可以看

    2024年02月05日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包