标签选择器:(范围比较大)
* 通配符选择器,全部选择器
h1,h2,p,div... 标签选择器
类与ID选择器:
.class 类选择器
#id ID选择器
注意:ID选择器是唯一的,范围比较小,个人不建议使用id来定义样式,建议使用class
多类样式声明:
class="class1 class2 class3"
结构选择器:
<!DOCTYPE html> <html lang="en"head> meta charset="UTF-8"name="viewport" content="width=device-width,initial-scale=1.0"="keywords"="关键词1,关键词2,关键词3"="description"="网站描述bla bla"title>网站标题</style> /* 后代选择器 */ main article h2{ color:red; } 直接子元素选择器 main article>h2 backgroundpink 兄弟选择器,取后面不取前面 article h1~h2 text-decoration underline 紧挨着的兄弟选择器,取后面不取前面 article h1+h2 font-size12px} bodymain> article> h1>h1h2>h2aside> aside >aside-h2html>
属性选择器:
> h1[title][id] 指定属性值 h1[title='cyy'] background 指定值开始 h1[title^='cyy'] text-decoration 指定值结束 h1[title$='cyy'] font-sizeh1 title id>h1-title-id='cyy'>h1-title='cyyhahaha'='cyyhahahacyy'>
属性选择器内容值筛选:
指定值出现在任意位置 h1[title*='cyy'] 指定值出现在任意位置,独立词两边有空格 h1[title~='cyy'] 单独的指定值本身,或者后面跟着中划线 h1[title|='cyy']='cyyhahaha cyy'='cyy hahahacyy'='cyy-hahaha >
伪类选择器:
a:link} a:visitedyellow a:hovergreen a:activeorange input:focus; outlinenone input:active input:hovera href="http://www.baidu.com" target="_blank">baiduainput type="text" value="111">
实际开发过程中建议使用第三方库
目标与根伪类以及空元素的处理:
main height1000px 锚点目标 div:target 根元素 html 根伪类元素 :rootlightblue 空元素 li:empty display="#cyy">cyy> ulli>111></div id="cyy"div>