前端打卡第十二天

邮箱

网址

数字

滑块控件

颜色

年

月

周

时间

本地时间

电话

required  输入不能为0

maxlength  最大长度

placeholder  未输入时的提示，输入时自动消失

autocomplete  相当于历史记录 属性值="off"/"on"

output  输出标签

语法：选择器[属性="属性值"]{要修改的代码}

一般用在input

div[class^="box1"]  需以box1开始

div[class$="box1"]  需以box1结束

修改单选框样式：

-weblit-appearance:none;        去掉默认样式

input[type="radio"]:checked{background:url(   )}

ol li:first-child{color:red;}


ol li:last-child{color:red;}


ol li:nth-child(n){color:red;}


ol li:nth-child(2n){color:red;}


ol li:nth-child(2n-1){color:red;} 


ol li:nth-last-child(n){color:red;}


ol li:first-of-type{color:red;}


ol li:nth-of-type(2n+1){color:red;}


ol li:last-of-type{color:red;}


ol li:empty{background:#ff0000;}


:root{background:#ff0000;}

主要用于表单

input:disabled{color:"red";}


input:read-only{color:"red";}


outline:none;


input:focus{color:"red";}


input:enabled{ color:"red";}


input:checked{color:"red";}

除了某个标签中的某个不改，其余全改

li:not(.box){color:red;}
li:not(:nth-child(2)){color:red;}

选中谁给谁添加样式 

使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用

div:target{color:red;}

后代选择器(以空格     分隔)

用于选取某元素的后代元素。

div p
{
  background-color:yellow;
}

子元素选择器(以大于 > 号分隔）

只能选择作为某元素直接/一级子元素的元素

div>p
{
  background-color:yellow;
}

相邻兄弟选择器（以加号 + 分隔）

可选择紧接在另一元素后的元素，且二者有相同父元素

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

div+p
{
  background-color:yellow;
}

普通兄弟选择器（以波浪号 ～ 分隔）

选取所有指定元素之后的相邻兄弟元素 

div~p
{
  background-color:yellow;
}