Css选择器学习笔记

Css选择器学习笔记

1. 基础选择器
   基础的有三个：标签，#id，.class
2. 后代选择器
   比如：#id p{…}(中间为空格)
3. 子选择器
   比如：.class>p{…}(中间为 > )
4. 伪选择器
   比如：a:link {color: #FF0000} /* 未访问的链接 /
   a:visited {color: #00FF00} / 已访问的链接 /
   a:hover {color: #FF00FF} / 鼠标移动到链接上 /
   a:active {color: #0000FF} / 选定的链接 */
5. 群组选择器
   比如：#id,.class,p{…}(中间用逗号隔开)
6. 同级（兄弟）元素选择器
   比如：#id+p{…}(选择id下面的第一个p标签)
   #id~p{…}选择id下面的所有p标签
7. 属性选择器
   (1)[title]{color:red}(标签里含有tilte属性的都匹配)
   (2)[title=“this”]{colo:red}(表示标签中含有属性名title=“this”的才会匹配上)
   (3)[title^=“this”]{color:red}(表示标签中含有属性名title并且title的值要以this开头才匹配的上)
   (4)[title$=“this”]{color:red}(表示标签中含有title属性名并且title的值要以this结尾才匹配的上)
   (5)[tilte*=“this”]{color:red}(表示标签中含有title属性名并且title的值要含有this才可以匹配上)
   (6)[title~=“a”]{color:red}(表示标签中含有title属性名并且title的值要含有空格分隔的this才可以匹配上)
   (7)[title|=“this”]{color:red}(表示属性值等于“this”或以“this”开头的，属性值等于“this”或以“this”开头的)
8. Css选择器优先级判断
   当样式冲突时，将根据【权重+就近原则】来判断以谁的样式为准。
   基本类型选择器权重
   行列样式：1000
   Id选择器： 100
   Class选择器：10 【属性选择器】
   标签选择器：1
   *任意符选择器：0 （大于默认样式与继承验样式）
   就近原则
   当权重值相同时，谁和要设置的html标签隔得近，谁的权重就高。
   组合选择器权重
   群组选择器： 单独计算
   后代，子代，兄弟等选择器：权重相加