CSS3-使用CSS选择器(第二部分)
CSS3-使用CSS选择器(第二部分)
<!-- 使用结构性伪类选择器 --> <!-- 使用根元素选择器 --> <style type = "text/css"> :root{ border: thin black solid; padding: 4px; } </style> <!-- 总是返回html元素 --> <!-- 使用子元素选择器 --> <!-- 使用 :first-child 选择器 --> <style type = "text/css"> :first-child{ border: thin black solid; padding: 4px; } </style> <!-- 选择了所有元素的第一个元素 --> <style type = "text/css"> p > span:first-child{ border: thin black solid; padding: 4px; } </style> <!-- 选择了p元素下第一个子span元素 --> <!-- 使用 :last-child 选择器 --> <style type = "text/css"> :last-child{ border: thin black solid; padding: 4px; } </style> <!-- 使用 :only-child 选择器 --> <!-- 父元素包含的唯一子元素,只包含一个元素 --> <style type = "text/css"> :only-child{ border: thin black solid; padding: 4px; } </style> <!-- 使用 :only-of-type 选择器 --> <style type = "text/css"> :only-of-type { border: thin black solid; padding: 4px; } </style> <!--使用:nth-child选择器 --> <!-- :nth-child(n) 选择父元素的第n个子元素 --> <!-- :nth-last-child(n) 选择父元素的倒数第n个子元素 --> <!-- :nth-of-child(n) 选择父元素定义类型的第n个子元素 --> <!-- :nth-last-of-child(n) 选择父元素定义类型的倒数第n个子元素 --> <style type = "text/css"> body > :nth-child(2) { border: thin black solid; padding: 4px; } </style> <!-- 使用UI伪类选择器 --> <!-- 选择启用或禁用元素 --> <!-- :enabled :disabled --> <style type = "text/css"> :enabled { border: thin black solid; padding: 4px; } </style> <!-- 选择已勾选的元素 --> <style type = "text/css"> :checked + span { border: thin black solid; padding: 4px; } </style> <!-- 选择默认元素 --> <!-- 从一组类似的元素中选择默认元素,例如:提交按钮总是表单的默认按钮 --> <style type = "text/css"> :default { border: thin black solid; padding: 4px; } </style> <!-- 选择有效和无效的 input 元素 --> <!-- :valid :invalid --> <input required/> <input required/> <input type = "submit" value = "submit" /> <style type = "text/css"> :invalid { outline: medium solid red; } :valid { outline: medium solid blue; } </style> <!-- 当(required)的input中未填值时为 invalid , 填值后为 valid --> <!-- 选择限定范围的 input 元素 --> <!-- :in-range :out-of-range --> <input min = "0" max ="100"/> <input type = "submit" value = "submit" /> <style type = "text/css"> :in-range { outline: medium solid red; } :out-of-range { outline: medium solid blue; } </style> <!-- 选择必须和可选的input元素 --> <!-- :required 选择含required属性的input元素 --> <!-- :optional 选择不含required属性的input元素 --> <input required/> <input /> <input type = "submit" value = "submit" /> <style type = "text/css"> :required { outline: medium solid red; } :optional { outline: medium solid green; } </style> <!-- 使用动态伪类选择器 --> <!-- 使用 :link 和 :visited 选择器 --> <!-- :link 选择超级链接 --> <!-- :visited 选择已访问的超级链接 --> <style type = "text/css"> :link { border: thin black solid; padding: 4px; } :visited { color: grey; } </style> <!-- 使用 :hover 选择器 --> <!-- :hover 选择鼠标悬停在其上的任意元素 --> <style type = "text/css"> :hover { border: thin black solid; padding: 4px; } </style> <!-- 使用 :active 选择器 --> <!-- :active 选择当前被用户激活的元素,多数情况下是鼠标点击时 --> <style type = "text/css"> :active { border: thin black solid; padding: 4px; } </style> <!-- 使用 :focus 选择器 --> <!-- :focus 选择当前获得焦点的元素 --> <style type = "text/css"> :focus { border: thin black solid; padding: 4px; } </style> <!-- 使用否定选择器 --> <!-- :not() --> <style type = "text/css"> a:not([href*="apple"]) { border: thin black solid; padding: 4px; } </style> <!-- 选择 href 属性值中没有apple的a元素 --> <!-- 使用 :empty 选择器 --> <!-- :empty 选择没有属性值的元素 --> <!-- 使用 :lang 选择器 --> <!-- :lang(<目标语言>) --> <style type = "text/css"> :lang(en) { border: thin black solid; padding: 4px; } </style> <!-- 选择其内容采用英语表达的语言 --> <!-- 使用 :target 选择器 --> <style type = "text/css"> :target { border: thin black solid; padding: 4px; } </style> <!-- 选择URL地址 #id 所匹配的元素 -->
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18