Web入门----css中伪类

最新推荐文章于 2024-04-25 20:37:26 发布

会写代码的哈士奇

最新推荐文章于 2024-04-25 20:37:26 发布

阅读量408

点赞数

分类专栏：前端文章标签： css 伪类动态伪类选择器

本文链接：https://blog.csdn.net/yuguqinglei/article/details/99831364

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS中的选择器

基本选择器

通用选择器

<style>
	*{
        margin:0px;
        padding:0px;
	}
</style>

类型原则器

<style>
	p{
    	background-color:white;
	}
</style>

类选择器

<style>
	.className{
        font-size:18px;
        border:solid red 1px;
	}
</style

ID选择器

<style>
#id{
  	color:green;
      text-align:center;
}
</style>

属性选择器

<style>
[href='']{
  	text-decoration:none;
      list-style:none;
}
</style>

总结

基本选择器是基础，之后的符合选择器就是在此基础上操作。

复合选择器

并集选择器
并集选择器间用逗号分隔
<style>
	body,div,a,ul,ol,li,select,option,input{
    	margin:0px;
        padding:0px;
        text-decorection:none;
	}
</style>
后代选择器
后代选择器用空格分隔
<style>
	p div ul li.current{
    	color:red;
        background-color:yellow;
	}
</style>
子类选择器
子类选择器用小于号表示直接子类
<style>
	p.title < div < * < #current{
    	border:solid red 1px;
        font:normal 18px/28px 'Microsoft YaHei','Simsun';
	}
</style>
兄弟选择器
兄弟选择器用加号表示兄弟元素关系
<style>
	p > #id .className +span{
    	text-align:left;
	}
</style>
总结

名称形式作用 CSS最低版本
并集选择器 <>,<>,<> 单个选择器匹配的所有元素并集 1
后代选择器 <> <><> 匹配第一个选择器的后代，且继续匹配二代 1
子代选择器 < > < < > < <> 匹配选择器的直接后代 2
兄弟选择器 <>+<>+<> 目标元素匹配的第一个选择器元素 2

名称	形式	作用	CSS最低版本
并集选择器	<>,<>,<>	单个选择器匹配的所有元素并集	1
后代选择器	<> <><>	匹配第一个选择器的后代，且继续匹配二代	1
子代选择器	< > < < > < <>	匹配选择器的直接后代	2
兄弟选择器	<>+<>+<>	目标元素匹配的第一个选择器元素	2

伪选择器(重要)

伪类选择器可以分为***伪元素选择器***和***伪类选择器***。伪元素实际上并不存在，他们额外的福利。

伪元素选择器

::first-line

选中文本内容的首行

<style>
    p::first-line{
        border: solid red 1px;
        font: 400 18px/32px "Microsoft YaHei", "SimSun";
        background-color: rgba(4, 247, 41, 0.2);
    }
</style>

在这里插入图片描述

::first-letter

选中文本的首个字符

<style>
	  p::first-letter {
            border: solid red 1px;
            font: 400 18px/32px "Microsoft YaHei", "SimSun";
            background-color: rgba(4, 247, 41, 0.2);
        }
</style>

在这里插入图片描述

:before / :after

这两个选择器会生成内容，并将它插入文档。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../js/jquery-3.4.1.js"></script>
    <title>Document</title>
    <style>
        p {
            font-size: 19px;
            text-indent: 2em;
        }

        .poetry::before {
            content: '浣溪沙----';
        }

        .poetry::after {
            content: '----清.纳兰性德'
        }
    </style>
</head>

<body>
    <p>纳兰性德（1655年1月19日—1685年7月1日），叶赫那拉氏，字容若，号楞伽山人，满洲正黄旗人，清朝初年词人，原名纳兰成德，一度因避讳太子保成而改名纳兰性德。大学士明珠长子，其母为英亲王阿济格第五女爱新觉罗氏。</p>
    <p>纳兰性德自幼饱读诗书，文武兼修，十七岁入国子监，被祭酒徐元文赏识。十八岁考中举人，次年成为贡士。康熙十五年（1676年）殿试中二甲第七名，赐进士出身。纳兰性德曾拜徐乾学为师。他于两年中主持编纂了一部儒学汇编——《通志堂经解》，深受康熙皇帝赏识，授一等侍卫衔，多随驾出巡。
    </p>
    <p> 康熙二十四年（1685年）五月，纳兰性德溘然而逝，年仅三十岁（虚龄三十有一）。纳兰性德的词以“真”取胜，写景逼真传神，词风“清丽婉约，哀感顽艳，格高韵远，独具特色“。著有《通志堂集》、《侧帽集》、《饮水词》等。</p>

    <p class='poetry'>
        我是人间惆怅客，
        知君何事泪纵横，
        断肠声里忆平生。
    </p>
</body>

在这里插入图片描述

例子

Switcher

利用:before和:after伪元素给自定义的switcher开关按钮的左右两边添加文字；

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="../js/jquery-3.4.1.js"></script>
  <title>Document</title>

  <style>
      #container {
          margin-left: 100px;
          padding-left: 100px;

      }

      .bg {
          width: 150px;
          height: 50px;
          background-color: red;
          border-radius: 25px;
          position: relative;
      }

      .thumb {
          width: 50px;
          height: 50px;
          border-radius: 25px;
          background-color: green;
          position: absolute;
          left: 0px;
          top: 0px;
      }

      .bg::before {
          content: "OFF";
          font: 400 20px/50px "SimSun";
          display: inline-block;
          width: 50px;
          position: absolute;
          left: 0px;
          margin-left: -50px;
      }

      .bg::after {
          width: 50px;
          content: "ON";
          font: 400 20px/50px "SimSun";
          display: inline-block;
          position: absolute;
          left: 100%;
          text-align: center
      }
  </style>

  <script>
      $(document).ready(function () {
          //点击事件
          $('.thumb').click(function (element) {
              var thumb = $(this);;
              var position = thumb.position();
              if (position.left == 0) {
                  // No:move the thumb;
                  thumb.css({
                      'left': '100%',
                      'marginLeft': '-50px',
                  });
                  // No2:changed the bg color;
                  $('.bg').css('backgroundColor', 'yellow');

              } else {
                  thumb.css({
                      'left': '0%',
                      'marginLeft': '0px',
                  });
                  $('.bg').css('backgroundColor', 'red');
              }
          });
      });
  </script>

</head>

<body>

  <div id='container'>
      <div class="bg">
          <div class="thumb">
          </div>
      </div>
  </div>

</body>

在这里插入图片描述

总结

选择器匹配原则最低兼容CSS版本
::first-line 文本内容的的首行 1
::first_letter 文本内容的的第一个文字（letter or word） 1
:befor 选中元素内容之前插入内容 2
:after 选中元素内容之后插入内容 2

选择器	匹配原则	最低兼容CSS版本
::first-line	文本内容的的首行	1
::first_letter	文本内容的的第一个文字（letter or word）	1
:befor	选中元素内容之前插入内容	2
:after	选中元素内容之后插入内容	2

伪类选择器

  > 	伪类选择器用于选择元素特定状态时期的性状。特定状态不仅表现在文档结构性上，还表现在一些动态特性上。
  >
  > ****

结构性伪类选择器

:root

选择器匹配文档中的根元素，它总是返回html元素；

:Empty

选择器匹配返回没有字元素的元素，可以单独使用，也可以配合其他选择器一起使用；

:first-child

:last-child

:only-child

:only-of-child

选择元素中的第一个子元素
选择元素中的最后一个元素
选择元素中唯一子元素
选择元素指定类型的唯一元素

UI伪类选择器

启用与禁用

  有些元素有启动或者禁用状态，这些元素一般是用来收集用户的输入。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        input:enabled {
            border: 3px solid green;
        }

        input:disabled {
            border: 3px solid red;
        }
    </style>
</head>

<body>
    <div class="center">
        <div style="margin-top: 30px">表单</div>
        <form action="http://www.linktop.com/form" method="POST" enctype="application/x-www-form-urlencoded">

            <fieldset>
                <legend>Disable and Enable</legend>
                <p>姓名:<input type="text" placeholder="请输入姓名" name="name" /></p>
                <p>密码:<input type="password" placeholder="请输入密码" name="pw" disabled /></p>

            </fieldset>

        </form>
    </div>
</body>
</html>

在这里插入图片描述

已勾选

checked选择器可以选中有checked属性或者用户勾选的单选按钮或者多选框；

<body>
    <div class="center">
        <div style="margin-top: 30px">表单</div>
        <form action="http://www.linktop.com/form" method="POST" enctype="application/x-www-form-urlencoded">

            <fieldset>
                <legend>Checked</legend>
                <p>
                    <label>性别
                        <span>男<input type="radio" name="sex" value="man" checked /></span>
                        <span>女<input type="radio" name="sex" value="women" /></span>
                    </label>
                </p>

                <p>
                    <label>兴趣
                        <span>阅读<input type="checkbox" name="habit" value="read" /></span>
                        <span>写作<input type="checkbox" name="habit" value="write" checked /></span>
                        <span>旅行<input type="checkbox" name="habit" value="trip" /></span>
                    </label>
                </p>

                <p><label>特长<input list="speciality" multiple /></label></p>

                <p><label>专业<select name="profession" id="profession">
                            <option value="java" selected>JAVA</option>
                            <option value="Kotlin">KOTLIN</option>
                            <option value="Flutter">FLUTTER</option>
                            <option value="Go">GO</option>
                        </select></label></p>
            </fieldset>
            <input type="button" id="getChecked" value="GET" />

        </form>
    </div>

    <datalist id="speciality">
        <option value="talk" label="交际"></option>
        <option value="languae" label="外语"></option>
        <option value="strong" label="强健"></option>
        <option value="smart" label="机智"></option>
        <option value="experirment" label="经验"></option>
    </datalist>
</body>

<script>
    $('#getChecked').click(function () {
        $(':checked').each(function (index, element) {
            console.log(index + ",element:" + $(this).parent().html());
        });
    })
</script>

在这里插入图片描述

总结：伪类选择器:checked会选择input[type='radio',type='checkbox']和select >option[selected]中的元素。但是不会选择出input[type='text']但是含有list属性的input元素。

有效与无效的Input元素

 <head>

	<style>
		:valid {
            border: 2px green solid;
        }

        :invalid {
            border: 2px red solid;
        }
    </style>
</head>

<body>
    <div class="center">
        <div style="margin-top: 30px">表单</div>
        <form action="http://www.linktop.com/form" method="POST" enctype="application/x-www-form-urlencoded">

            <fieldset>
                <legend>Checked</legend>
                <p>
                    <label>姓名
                        <input name="name" maxlength="4" size="4" minlength="2" required
                            placeholder="Please input name" />
                    </label>
                </p>
                <p><label>密码<input type="password" name="password" required minlength="6" maxlength="12"
                            placeholder="Please input password" /></label></p>
            </fieldset>
        </form>

</body>

在这里插入图片描述

备注：从图中可以发现，当表单中存在无效的元素时候，它的父元素fieldset,form都是无效的。只有保证了表单中所有的元素有效，才能保证form是有效的。

选择限定范围内的Input元素


<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
      :in-range {
          border: 2px green solid;
      }

      :out-of-range {
          border: 2px red solid;
      }
  </style>
</head>

<body>
  <div class="center">
      <div style="margin-top: 30px">表单</div>
      <form action="http://www.linktop.com/form" method="POST" enctype="application/x-www-form-urlencoded">

          <fieldset>
              <legend>Checked</legend>
              <p>
                  <label>年级<input type="number" min="18" max="100" step="1" name="age" value="18" /></label>
              </p>
              <p>
                  <label for="price">价格<input type="number" name="price" min="1" max="50" step="5"
                          value="25" /></label>
              </p>
          </fieldset>
      </form>

</body>

在这里插入图片描述

必须与可选的Input元素

<head>
      :required {
          border: 2px green solid;
      }

      :optional {
          border: 2px red solid;
      }
  </style>
</head>

<body>
  <div class="center">
      <div style="margin-top: 30px">表单</div>
      <form action="http://www.linktop.com/form" method="POST" enctype="application/x-www-form-urlencoded">

          <fieldset>
              <legend>Checked</legend>
              <p>
                  <label>年级<input type="number" required min="18" max="100" step="1" name="age" value="18" /></label>
              </p>
              <p>
                  <label for="price">价格<input type="number" name="price" min="1" max="50" step="5"
                          value="25" /></label>
              </p>
              <p>
                  <label>爱好
                      <select name="habit">
                          <option value="read" label="READ"></option>
                          <option value="write" label="WRITE"></option>
                          <option value="sport" label="SPORT"></option>
                      </select>

                  </label>
              </p>
          </fieldset>
      </form>

</body>

</html>

在这里插入图片描述

默认元素

<head>
        :default {
            outline: medium solid red;
        }
    </style>
</head>

<body>
    <div class="center">
        <div style="margin-top: 30px">表单</div>
        <form action="http://www.linktop.com/form" method="POST" enctype="application/x-www-form-urlencoded">

            <fieldset>
                <legend>Checked</legend>
                <p>
                    <label>年级<input type="number" required min="18" max="100" step="1" name="age" value="18" /></label>
                </p>
                <p>
                    <label for="price">价格<input type="number" name="price" min="1" max="50" step="5"
                            value="25" /></label>
                </p>

            </fieldset>

            <fieldset>
                <legend>Button</legend>
                <p><input type="button" value="Button" name="button" />
                    <input type="submit" value="Submit" name="submit" />
                    <input type="reset" value="Reset" name="reset" />
                </p>
            </fieldset>
        </form>

</body>

</html>

在这里插入图片描述

动态伪类选择器

之所以称为动态选择器，是因为他们根据条件的改变匹配元素，是相对于文档的固定状态

:link/:visited

这两个选择器匹配超链接。:link匹配链接元素的原始状态。:visite匹配超链接已访问的状态。

:hover

该选择器匹配用户鼠标悬停在其上的任意其他元素；

:avtive

该选择器匹配当前被用户激活的元素。

:focus

该选择器匹配当前获得焦点的元素。

会写代码的哈士奇

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web入门----css中伪类

CSS中的选择器基本选择器通用选择器<style> *{ margin:0px; padding:0px; }</style>类型原则器<style> p{ background-color:white; }</style>类选择器<style> ....
复制链接

扫一扫