css伪类选择器after？

css伪类选择器after？

2),常用的CSS选择器有哪些?标签选择器：通过标签名称来选取元素，例如"p"表示所有段落。
类选择器：通过类名来选取元素，使用"."符号来定义，例如".my-class"表示所有具有"my-class"类名的元素。
ID选择器：通过元素的ID名称来选取元素，使用"#"符号来定义，例如"#my-id"表示具有"my-id"ID名称的元素。
属性选择器：通过元素的属性来选取元素，例如"[type='text']"表示所有type属性为text的元素。
伪类选择器：通过元素的状态或位置来选取元素，例如":hover"表示鼠标悬停在元素上时的样式。
伪元素选择器：可以选取元素中某些部分的样式，例如"::after"表示在元素内容后添加一个伪元素。
后代选择器：选取指定父元素下的子孙元素，例如"divp"表示所有div元素下的所有段落元素。
相邻兄弟选择器：选取紧接在另一个元素后面的元素，例如"h1+p"表示紧接在h1元素后面的第一个段落元素。
通用选择器：选取所有元素，使用""符号来定义，例如""表示所有元素都被选取。
微信小程序CSS选择器::after和::before的简单使用前两天看文档看到选择器那块儿的时候，前面4个基本都能理解：.class，#id，element，element,element，但后面两个::after和::before（文档中说，分别表示在view组件的后面和前面插入内容），表示有点没有理解。于是上网仔细查了下。以下是笔记
wxml
wxss
js
效果
其实，after和before可以添加的不仅仅是像上面这种字符串，以下是可以添加的常用的内容
具体的请参考这篇文章
vuecss伪元素after的使用开篇一句话：CSS的伪类，伪元素就当成vue的过滤器使用就好了，我也是想到这个突然就茅塞顿开了。
用法：
:after选择器表示向选定的元素之后插入内容。
要有content属性
需求举例：div按钮后面有个朝下的ico,点击div后ico方向朝上
实现办法:
1.可以使用JS实现，div的class名绑定到一个变量上，根据变量的真假值更换class
2.伪类的实现方法
先说思路：
要借助两个class，基础class('base_class')和激活class('rotate').
base_class
相对定位。
base_class:after
放ico朝上的样式，绝对定位。
rotate不要单独加after，不然会取代掉base_class的after,
要两个class都出现才加after
rotate绑定到一个布尔变量上，该变量的真假值由open_select_window更改
html:
css选择器类型h1,h2,p{}??//?选择所有的h1,h2,p????
1、后代选择器?(包含选择器)：?以空格隔开包含关系的元素
2、子选择器??以隔开父子级元素
3、兄弟选择器~+
1、.tabp[title]:{color:red}选择所有带有title属性的p标签
2、.tabp[title='name']:{color:red}选择所有title=name属性的标签
3、.tabp[title^='na']:{}?选择开头title属性带有na开头的标签
4、.tabp[title$='po']:{}?选择title属性结尾是po的标签
5、.tabp[title*='name']只要含有name值就行的标签
6、.tabp[title~='nameflower']包含name的属性的标签
7、.tabp[title|='name']以name开头的属性的标签
伪类不仅可以作用在a链接上，还可以作用在其他元素上
:link?未访问过的链接
:visited访问过的链接
:active鼠标点击的一瞬间
:hover?鼠标悬浮在链接上
:focus具有焦点的输入元素innput(将输入的外边框去掉:focus{outline:none})
:target锚点目标选择器
:root?文档的根选择器
:empty?空选择器，没有任何子集的元素
:first-child?div下所有孩子中的第一个
:last-childdiv下所有孩子中的最后一个
:first-of-typediv下类型为p的第一个元素
:last-of-type?div下类型为p的最后一个元素
:nth-child(2)??选择每个p元素是其父级的第二个子元素，选择器匹配父元素中的第n个子元素，元素类型没有限制。
:nth-last-child(n)选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。
:after?文本伪类选择器，在每个p元素之后插入内容
:before?文本伪类选择器，在每个p元素之前插入内容
:first-letter?文本伪类选择器，选择每一个p元素的第一个字母
:first-line?文本伪类选择器，选择每一个p元素的第一行
锚点目标的伪类选择器
首尾元素的伪类选择器
:first-child?div下所有的第一个p元素divp:first-chid
:last-child?div下所有的最后一个p元素?div:last-child
:first-of-type特定类型(p元素)的第一个元素?divp:first-of-type
:last-of-type?特定类型(p元素)的第一个元素
唯一选择器
:only-child??只有一个孩子的div
:only-of-type?div下只有一种孩子类型的选择器
表单上的伪类选择器
文本的伪类选择器
文本伪类表单
知识点补充：
!important:强制权重优先级
浏览器默认font-size:14px
可继承元素：color、font-size、font-family
通配符的权重：0
继承的权重：?NULL????0NULL
总结排序：!important行内样式ID选择器类选择器标签、伪类通配符*继承浏览器默认属性
CSS3选择器css3中，追加了三个属性选择器分别为：
结构性伪类选择器由两部分构成，一是伪类选择器，一是伪元素选择器。
伪类选择器，要注意命名不要与系统定义好的选择器重名，例如link、hover
伪元素选择器中包含first-line、first-letter、before、after。
当root和body起冲突时，body就对内容区域生效，在内容区外则是root生效。
格式:not(selector)
1.first-child对一个父元素中的第一个子元素进行样式的指定
2.last-child对一个父元素中的最后一个子元素进行样式的指定
3.nth-child（positon）对一个父元素中的指定序号的子元素进行样式的指定
4.nth-last-child对一个父元素中的指定倒数序号的子元素进行样式的指定
2）使用nth-of-type（odd）和nth-of-type（even）
1）使用nth-child
2）使用nth-child（an+b），a表示每次循环中，包括几种样式，b表示指定的样式在循环中所处的位置。
only-child选择器，在元素只有一个子元素时，可以代替使用nth-child(1)/nth-last-child(1)。
在css3选择器中，除了结构性伪类选择器外，还有一种UI元素状态选择器——只有当元素处于某种状态下才起作用，在默认状态下不起作用。
通过js改变输入框的可输入和不可输入状态，通过css样式改变输入框可输入和不可输入状态时的背景颜色。
用来位于同一个父元素之下的，给与一个子元素平级的另一个子元素设定样式
2024-09-18