css3高级选择器和css权重

135 阅读2分钟

contentEditable (规定是否允许用户编辑内容)

QQ截图20220331162854.png

QQ截图20220331163351.png

align="center"等同于style="text-align:center

HTML5废除的属性 table部分属性:bgcolor、border、cellpadding、width等 html的version属性
a元素或者link元素的charset属性
align属性

一。css3高级选择器

①。p:first-of-type(选择父元素div的第一个元素p,即使div里面第一个元素是span也不影响)

33.png

②。p:last-of-type(选择属性其父元素的最后一个元素p)

112.png ③。p:first-child(选择属性其父元素第一个子元素的每个p元素) 第二个div不显示因为他的第一个子元素不是p,是span,所以显示不成功

1111.png ④。p:last-child选择属性其父元素最后一个子元素的每个p元素 第二个div不显示因为他的最后一个子元素不是p,是span,所以显示不成功

111111.png

⑤。p:only-of-type 选择属于其父元素唯一的 p 元素

⑥。nth-of-type强调类型 无论p的前面还是后面有其他的元素 都不会影响nth-of-type设置的样式

1213.png

p:before在每个p元素的内容之前插入内容(content表示文字内容) p:after在每个p元素的内容之后插入内容(content表示文字内容)

666.png

div{ 优先级就近原则,同权重情况下样式定义最近者为准 !important > id选择器 > class类选择器 > tag标签选择器 }

123.png

156.png

444.png

二。css权重 !important infinity(无穷大) 行内样式 1000
id选择器 100
class类选择器|属性选择器|伪类 10 标签选择器 1
通配符(*) 0

电子邮件地址文本框,提交表单时会自动验证email的值,需要填写正确邮箱否则会出现提示, 要按照这种格式:123435@

3435.png

网页的URL,提交表单时会自动验证url的值 要按照这种格式:www.baidu.com或者https://www.baidu.…

1ewd.png

input type="search"(用于搜索引擎(搜索框)语义化表示搜索框)