CSS权威指南读书笔记-选择器

第二章 选择器

1、p.warning （没有空格）其class属性包含warning的p段落

区别于 p .warning 选择p标签下子元素包含class=“warning”的元素

2、.warning.urgent{color:red}

选择同时包含这些类名的元素，顺序可变

可以被选择

3、属性选择器

h1[class]{}  选择包含class属性（值不限）的h1元素

*[title]{}  包含title属性的所有元素

a[href][title]  同时具有href和title属性的a标签

planet[moons="1"] 根据属性值选择

div[class="p1 p2"] 选择以上div元素，中间要有空格，顺序必须相同。仅使用div[class="p1"]不能选择该元素，要求完全匹配

根据部分属性选择

p[class~="p1"] 选择class带有p1值的元素

子串匹配属性选择器

---

[foo^="bar"]    选择foo属性以bar开头的所有元素

---

[foo$="bat"]    选择foo属性以bar结尾的所有元素

---

[foo*="bar"]    包含foo子串bar的所有元素

特定属性

*[lang|="en"]选择lang属性等于en或以en-开头的所有元素

子选择器`h1 > strong`选择了h1元素的直接子元素 ，即树中直接相连的元素

选择相邻兄弟元素

h1+p{color:red}  紧连在h1元素后的所有p元素，p元素要与h1元素有共同的父元素

伪类和伪元素

链接伪类：

a:link{} 用于未访问的链接 并忽略没有href属性的a标签

a:visited{ } 用于访问过的标签

动态伪类：

：focus 指示当前具有输入焦点的 元素

：hover 指示鼠标指针停留在哪个元素上

：active 指示被用户输入激活的元素 例如鼠标指针停留在一个超链接上，如果用户点击鼠标，就会激活这个超链接，：active将指示这个超链接

常见情况a

a:link{color：navy}

a:visited{ color：gray}

a:hover{ color:red}

a:active{color:yellow}

伪类的顺序按照link-visited-focus-hover-active 

选择第一个元素子元素    :first-child

The:first-child represents any element that is the first child element of its parent.

选取其父元素的第一个子元素

   

hello

p:first-child{font-weight:bold} hello变粗

这个不是选择p元素的第一个子元素

伪元素选择器

p:first-letter{} 一个块级元素首字母的样式

p:first-line{} 元素第一行

注意：所有伪元素必须出现在该伪元素选择器的最后面。因此p:first-line em是不合法的

---

设置之前之后元素的样式

可以用于插入生成的内容，并设置其样式，要在一个元素后面插入内容，可以使用元素after

body:after{ content:"the End"}