css學習16 UI位類選擇器

2021-10-19 08:33:30 字數 1253 閱讀 9371

選擇器

內容:enabled

選取已啟用的元素

:disabled

選取被禁用的元素

:checked

選取所有選中的核取方塊和單選按鈕

:default

選取預設元素

:valid

選取基於輸入驗證判定的有效或者無效的input元素

:invalid

:in-range

選取被限定在指定範圍之內或者之外的input元素

:out-of-range

:required

根據是否允許使用required屬性選取input元素

:optional

:optional選擇器匹配沒有required屬性的input元素。

1、選擇啟用或禁用元素

:enabled

2、選擇已勾選的元素
:checked

3、選擇預設元素

:default選擇器從一組類似的元素中選擇預設元素。例如,提交按鈕總是表單的預設按鈕。

:default

4、選擇有效和無效的input元素

:valid和:invalid選擇器分別匹配符合和不符合它們的輸人驗證要求的input元素。

:invalid

:valid

5、選擇限定範圍的input元素

關於輸入驗證的一種具體程度更高的變體是選擇值限於指定範圍的input元素。:in-range選擇器匹配位於指定範圍內的input元素,:out-of-range選擇器匹配位於指定範圍之外的input元素。

:in-range

:out-of-range

"number" min="0" max="100" value="1" id="price" name="price"/>

主流瀏覽其還沒有實現out-of-range選擇器,只有chrome 和opera支援in-range選擇器。

6、選擇必須和可選的input元素

:required選擇器匹配具有required屬性的input元素,這能夠確保使用者必需輸入與input元素相關的值才能提交表單。:optional選擇器匹配沒有required屬性的input元素。

:required

:optional

CSS 類選擇器

center在上面的例子中,所有擁有 center 類的 html 元素均為居中。在下面的 html 中,h1 和 p 元素都有 center 類。這意味著兩者都將遵守 center 選擇器中的規則。this paragraph will also be center aligned.注意 類名的第...

CSS 類選擇器

在 css 中,類選擇器以乙個點號顯示 center在上面的例子中,所有擁有 center 類的 html 元素均為居中。在下面的 html 中,h1 和 p 元素都有 center 類。這意味著兩者都將遵守 center 選擇器中的規則。this paragraph will also be ce...

CSS 類選擇器

在 css 中,類選擇器以乙個點號顯示 center 在上面的例子中,所有擁有 center 類的 html 元素均為居中。在下面的 html 中,h1 和 p 元素都有 center 類。這意味著兩者都將遵守 center 選擇器中的規則。class center this paragraph w...