## css 权重 | 类型 | 权重 | | --- | --- | | ! important | 无穷 | | 行间样式 | 1000 | | id | 100 | | class/属性选择器/伪类:hover | 10 | | 标签选择器/伪元素:after | 1 | | 通配符 | 0 | *通配符 | 类型 | 描述 | | --- | --- | | \[abc^="def"\] | 选择 abc 属性值以 "def" 开头的所有元素 | | \[abc$="def"\] | 选择 abc 属性值以 "def" 结尾的所有元素 | | \[abc\*="def"\] | 选择 abc 属性值中包含子串 "def" 的所有元素 | 如：[id*=box] 指的是id包含box的idDOM结点都会被处理 注意：*[title = 'xxx'] 表示此页面所有的DOM元素title属性为xxx ## css 选择器 * 1、元素选择器 >元素选择器是比较常见的一种选择器 如：p,h2,span,a,div等 * 2、id 选择器 >权重较高，书写方式是#xxx，一般用户锚点和一些需要特殊处理的DOM元素 * 3、类选择器 >用到的比较多 ，比如.xx，指的是此页面所有的类名为xx的DOM元素 * 4、同级选择器 >用户多个元素共用一类属性 ``` h1, p { background：red } 注：指的是此页面所有的h1和p标签的背景为red ``` * 5、后代选择器 >两个选择中间用空格隔开 ``` div p{ background：red } 注：指的是在所有div下面的p标签对应的DOM元素背景颜色都为红色 ``` * 6、子元素选择器 >两个选择器用 > 隔开 ``` div>p{ background：red } 注：指的是在div下面的亲子代（第一层）的所有p标签都需要背景为红色 ``` * 7、兄弟选择器 + >如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器 中间用+隔开 ``` div+p{ background：red } 注：指的是在di同级后面的相邻p标签DOM元素的背景都为红色 tips:在处理同种向左margin的时候，但是第一个元素不动，你就可以用到， 直接两个相同的元素相加 如：button+button 提醒------兄弟选择器+器则表示某元素后相邻的兄弟元素，也就是紧挨着的 ``` * 8、兄弟选择器 ~ >和+不同的是，~强调同级后级后面的所有符合条件的元素 ``` div~p{ background：red } 注：指的是在di同级后面的所有p标签DOM元素的背景都为红色 ``` * 9、属性选择器 >表示的是拥有此属性的此标签 ``` img[alt] { border: 5px solid red; } 注：表示的是所有拥有alt属性的imgDOM元素 input[type = "text"]{ border: 1px solid red } 注：表示所有input标签的type值为text的DOM元素 ``` * 10、伪类选择器 >一般是选择器后面加：如：:hover :not :first-child :lang :last-child :nth(2)-child :enabled :disabled :checked等 ``` a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #00FF00} /* 鼠标移动到链接上 */ a:active {color: #00FF00} /* 选定的链接 */ ``` ``` q:lang(no) { quotes: "~" "~" } <p>文字<q lang="no">段落中的引用的文字</q>文字</p> 注：:lang 类为属性值为 no 的 q 元素定义引号的类型 ``` >first-child 表示父元素第一个元素 last-child 表示父元素最后一个元素 nth-child(n) 表示父元素的第几个元素 nth-last-child(n) 表示 父元素的从最后开始数的第几个元素 注意：这些表示的是相对于父元素，比如 `p:first-child` 但是p标签不是其父元素的第一个元素标签，则不做渲染，参照其父元素