//h5新增的表单属性
<!--
autofocus 自动聚焦 一个页面只能有一个
pattern 后面的属性是一个正则表达式 【手机号验证】
pattern 属性规定用于验证输入字段的模式;就是指正则表达式;
新增type类型
type = "email" 限制用户必须输入email类型
required
-->
/* class属性 属性值最后为li1 */
li[class$="li2"]{
background-color: crimson;
}
<ul>
<li class="list box li1"></li>
<li class="list box li2"></li>
<li class="list box li3"></li>
</ul>
<!--
层级选择器
父元素>子元素{}
只能选择父元素的最近的一层的元素
兄弟元素 + 兄弟元素{}
通过当前的元素 选择符 离他最近 下面的兄弟元素
兄弟元素 ~ 兄弟元素{}
通过当前的元素 选择符 下面所有的兄弟元素
-->
<!--
css3属性选择器
1、选择符[属性名] 只要带有当前属性名就会被选中;
2、选择符[属性名=“属性值”] 指定属性名属性值;
3、选择符[属性名~=“属性值”] 属性值是一个词列表
只要包含当前词就会被选中
4、选择符[属性名^="属性值"] 属性值必须是当前指定
的属性值开头
5、选择符[属性名$="属性值"] 属性值必须是当前指定属性
值结尾
6、选择符[属性名*="属性值"] 属性值只要包含了指定的
字符就会被选中
7、选择符[属性名|="属性值"] 属性值仅仅是当前指定的属性值
或者是以属性值 - 开头
-->
<!--
结构伪类选择器
选择谁
在一个父元素下 子集标签类型一致
1、 选择符:first-child{}
2、 选择符:last-child{}
3. 选择符 : nth-child(val){}
val
2n 或者 even 偶数
2n+1 odd 奇数
如果子集合标签类型不一致
采用先确定类型
-->
<style>
:root{
background-color: cadetblue;
}
/* */
/* ul:nth-child(2n+1){
background-color: chartreuse;
} */
li:empty{
/* background-color: coral; */
}
/* nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型 */
li:nth-child(2n){
background-color: cornsilk;
}
span:nth-child(2){
font-size: 30px;
}
#div1 span:nth-last-child(1){
font-size: 30px;
}
#div1 span:nth-last-child(2){
font-size: 30px;
}
/* 因为p标签的存在 无法生效了 */
#div1 span:nth-child(2){
font-size: 30px;
}
#div1 span:nth-of-type(2){
font-size: 30px;
}
/* 第一个p标签 */
#div1 p:nth-of-type(1){
font-size: 30px;
}
</style>
<div id="div1">
<span>1</span>
<p>pppppppp</p>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div id="div2">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div>
</div>
<ul>
<li>老虎1</li>
<li>老虎2</li>
<li></li>
<li>老虎4</li>
<li>老虎5</li>
</ul>
<br>
<ul>
<li></li>
<li>老虎2</li>
<li></li>
<li>老虎4</li>
<li>老虎5</li>
</ul>
<br>
<ul>
<li></li>
<li>老虎2</li>
<li></li>
<li>老虎4</li>
<li>老虎5</li>
</ul>
css的一些我的问题 c3属性选择器
最新推荐文章于 2023-05-14 15:02:35 发布