CSS的选择器

CSS

<style>
    关联css:<link rel="stylesheet" href="*">(style外)
    或@import url（"*"）
</style>

外部样式表可以在顶部加@charset "utf-8";识别注释

<link rel="icon" href="">  引入网页标题旁的小图标

行内样式

<div style="*">1</div>

!important 重要的 选择器权重无限大

书写顺序

布局定位：display/position/float/clear/visibility/overflow （display第一个写关系到模式）

自身属性：width/height/margin/padding/border/background

文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word

其他属性(CSS3)：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…

快速CSS样式

w200 生成width：200px；

lh26 生成 line-height：26px；

选择器

基本选择器

类型选择器

  div{…} p{…}

class选择器
<div class="b"></div> .b{…}

id选择器
<div id="a"></div> #a{…}

通配符

*{…}

群组选择器

  .b,#a,p{…}(多个选择器可用同个样式 逗号隔开)

层次选择器

后代选择器

  ul li{…}

子选择器

  div>p div里最近的一级的p元素标签 必须是亲儿子 孙子等无效

相邻兄弟选择器

  div+p 选择匹配的p元素，且匹配的p元素紧位于匹配的div元素的后

通用兄弟选择器

  div～p 选择匹配的p元素，且位于匹配的div元素后的所有匹配的p元素

伪类选择器

动态伪类选择器

a:link 选择所有未被访问的链接

a:visited 选择所有已被访问的链接

a:hover 鼠标指针位于其上的链接
   伪类选择器hover控制同级时用+

a:hover +ol{...}

a:active 选择活动链接 鼠标按下未弹起

需按照link visited hover active的顺序写 爱恨原则（LVHA）

目标伪类选择器

:target 选择匹配E的所有元素，且匹配元素被相关URL指向

      配合锚点链接使用 实现点击转换效果

UI 元素状态伪类选择器

E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素

E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素

E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E

::selection 匹配E元素中被用户选中或处于高亮状态的部分

focus伪类选择器

用于选取获得焦点的表单元素，焦点就是光标 input表单元素才能获取 （这个选择器针对表单元素来说）

input:focus{background-color:yellow;}

语言伪类选择器

E:lang(en)

否定伪类选择器

E:not(选择器) 除了括号内选择器（E元素）其他E元素应用样式

（IE6-8浏览器不支持:not()选择器。）

属性选择器

E[att] 选择具有att属性的E元素

E[att=“val”] 选择具有att属性且属性值等于val的E元素

E[att~=“val”] 匹配具有att属性且属性值 其中词列表中包含了一个val的E元素

E[att^=“val”] 匹配具有att属性且属性值以val开头的E元素

E[att$=“val”] 匹配具有att属性且属性值以val结尾的E元素

E[att*=“val”] 匹配具有att属性且属性值中有val的E元素

E[att |=“val”] 匹配具有att属性且属性值是value或者以“value-”开头的值

结构伪类选择器

E:first-child 匹配父元素中的第一个子元素E

E:last-child 匹配父元素中的最后一个元素E

E:only-child 匹配的是父元素下的有且仅有一个的E（多个E时不生效）

E:nth-child（n） 匹配父元素中的第n个子元素E

E:nth-last-child（n） 匹配父元素中的倒数第n个子元素E

​ 注： n可以是数字 关键字 和公式

       数字: 选择第几个子元素 从1开始

      关键字：even偶数 odd奇数

      公式（n从0+1+1…到0或超过忽略）： 2n 偶数 2n+1 奇数 5n 五的倍数 n+5 第五个开始 -n+5 前5个（包括5）

E:first-of-type 指定类型E的第一个

E:last-of-type 指定类型E的最后一个

E:only-of-type 匹配属于同类型中唯一兄弟元素的E

E:nth-of-type（n） 指定类型E的第n个

E:nth-last-of-type（n） 指定类型E的倒数第n个

​ 注：当E元素中有多个种类的标签时：如:<b><a><a>

        E a:nth-child 会把所有盒子排列序号 执行时先看1号元素是不是a，不是a不执行

        E a:nth-of-type 会把指定元素盒子排列序号 执行n号

E:root 匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML

E:empty 匹配没有任何子元素（包括包含文本）的元素E

伪元素选择器

::first-letter 定义对象的第一个字符样式（只能用于块元素）

::first-line 定义对象内第一行的样式（只能用于块元素）

::before 在父元素内部前面插入内容

::after 在父元素内部后面插入内容

注：

在页面内不显示，需要添加定位

创建的元素属于行内元素

​ 语法before和after必须有content属性

​ 权重为1

​ 与hover配合使用时

div:hover::before{...};

*注：*伪类只能改变元素样式
      伪对象不仅可以改变元素样式，还可以添加虚拟结构