Web入门----css中伪类

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" requiredplaceholder="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

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

Web入门----css中伪类相关推荐

html中怎么写小箭头,HTML+CSS入门 CSS用伪类制作小箭头
本篇教程介绍了HTML+CSS入门 CSS用伪类制作小箭头,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 本文对轮播图左右按钮的处理方法一改往常,不是简单地用btn.pr ...
css中伪类与伪元素的区别
一:伪类: 1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为 ...
css中伪类和伪元素有什么不一样
css中的伪类[:]和伪元素[::]都是我们日常开发过程中会用到的伪元素选择器,有时候我们用的是[:],有时候用的又是[::],有时候又好像两者都行,这到底是为什么呢?今天我们就来看看这两个东西到底有 ...
css中伪类选择器详解(a:visited不生效的原因)
css伪类是一种css定义的方法,主要用于对链接显示效果的定义, 主要包括: a:link :链接平常的状态. a:visited:链接被访问之后的状态. a:hover:鼠标停留在链接上的状态. a ...
css中伪类after before用法
:before 选择器在被选元素的内容后面插入内容. :after 选择器在被选元素的内容后面插入内容. 1基本用法 before和after p:before{ content: "bef ...
css中伪类选择器的顺序
link(正常状态) > visited(访问过后的状态) > hover(鼠标放上去的状态) > active(鼠标按下并未抬起的状态)
使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字实例说明 :link a:link 选择所 ...
CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器伪元素选择器伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
html伪类选择器focus,了解CSS :focus-within伪类选择器
一.了解CSS :focus-within伪类选择器 CSS :focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲,区别在于:focus表示当前元素处于focus状态时候干 ...

Web入门----css中伪类

CSS中的选择器

基本选择器

通用选择器

类型原则器

类选择器

ID选择器

属性选择器

总结

复合选择器

并集选择器

后代选择器

子类选择器

兄弟选择器