css3 伪属性:checked 怎么调试

html-css021

css3 伪属性:checked 怎么调试,第1张

首先,此类伪选择器只针对与 表单元素的单选(radio)多选(checkbox)起作用。

调试方法:

1 在页面中打开开发者工具(本例以chrome浏览器为例),

2.选则选中的checkbox货radio.

3.在右侧的style面板中点击new Style rule 输入

input[type="checkbox"]:checked {

margin: 30px

}

即可以看到效果。

4.勾掉选中状态则margin的效果消失。

checked 属性规定在页面加载时应该被预先选定的 input 元素。

checked 属性 与 <input type="checkbox">或 <input type="radio">配合使用。

并不是checked="true"

具体用法如下

<input type="radio" checked />

<input type="radio" checked="checked" />

第一条规则:

拆分解释:

input、ol都为标签选择器,选择标签名为input和ol的所有标签

:checked,选择勾选状态的元素(input为checkbox的,并且已经勾选)

+为兄弟选择器,代表+两侧的元素是前后紧邻的

整体解释:选择紧邻前面的标签为选中的checkbox(input type=checkbox)的ol标签(选择器选的是ol而不是input)

第二条规则:

拆分解释:

input、ol、li为标签选择器

>子元素选择器,表示>之前的元素是后面元素的父级元素

整体解释:选择被选中的input紧邻的ol元素的子元素li

举例,下面的li会匹配input:checked + ol >li

<input type="checkbox" />

<ol>

    <li>选择的是这个元素,前提是上面的checkbox已经被勾选了</li>

</ol>