css 常用属性css 常用选择器css常用属性一篇读懂，

*{} 选定所有对象,会遍历并命中文档中所有的元素。全局样式。:root匹配文档的根元素。在html（标准通用标记语言下的一个应用）中，根元素永远是HTML

css关系选择器：

E F{} 选择所有被E元素包含的F元素。选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子… E>F{} 选择E元素里面的子元素F，与前者 E F{}不同的是，子选择符只能命中子元素，不能选中孙辈,如下示例：

.demo > div { position: relative;}<div class="demo"> <div class="a"> <div class="b">子选择符</div> </div></div>//此时只有 .a 被选中 ，因为它是 .demo 的子元素 E+F{}, 选择紧贴在E元素之后F元素 (E元素之后的第一个F元素)，元素E与F必须同属一个父级。 E~F{},选择E元素后面的所有兄弟元素F (会命中所有符合条件的兄弟元素)，元素E与F必须同属一个父级。 注：选择的只是同级的元素F，后代中的元素F不会被选择。只作用于同级元素

(E+F)与 兄弟选择符(E~F) 相同的是，相邻选择符也是选择同级的元素F；不同的是，(E+F)只会命中符合条件的那个毗邻的兄弟元素（即紧挨着E元素之后的第一个F元素）。css属性选择器E[att]{} 选择具有att属性的E元素。E[att=”val”]{} 选择具有att属性且属性值等于val的E元素。E[att~=”val”]{} 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况），例：<style> div[class~="a"] { border: 2px solid #000; } </style> <div class="a">1</div> <div class="b">2</div> <div class="a b">3</div> //将会命中1, 3两个div，因为匹配到了class属性，且属性值中有一个值为aE[att^=”val”] {} 选择具有att属性且属性值为以val开头的字符串的E元素。

<style>div[class^="a"] { border: 2px solid #000;}</style><div class="abc">1</div><div class="acb">2</div><div class="bac">3</div>//，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头E[att$=”val”] {} 选择具有att属性且属性值为以val结尾的字符串的E元素。

<style>div[class$="c"] { border: 2px solid #000;}</style><div class="abc">1</div><div class="acb">2</div><div class="bac">3</div>//将会命中1, 3两个div，因为匹配到了class属性，且属性值以c结尾E[att*=”val”] {} 选择具有att属性且属性值为包含val的字符串的E元素。

<style>div[class*="b"] { border: 2px solid #000;}</style><div class="abc">1</div><div class="acb">2</div><div class="bac">3</div>//将会命中所有div，因为匹配到了class属性，且属性值中都包含了bE[att|=”val”] {} 果元素E拥有att属性，并且值为val，或者值是以val-开头的，那么E将会被选择。

<style>div[class|="a"] { border: 2px solid #000;}</style><div class="a">0</div><div class="a-test">1</div><div class="b-test">2</div><div class="c-test">3</div>//在这个例子中，前2个div将会被命中：//第1个div，拥有class属性，并且值为a，所以被命中；//第2个div，拥有class属性，值是a开头并紧跟着连接符“-”，所以被命中；css伪类选择器：

:first-child 匹配父元素的第一个子元素。 :last-child 匹配父元素最后一个子元素 E:only-child 匹配父元素仅有的一个子元素el。 E:nth-of-type(n) 匹配同类型的第n个同级元素E。 :nth-child(n) 用于定位某个父元素的一个或者多个特定的子元素，“n” 是参数， 可以是整数，也可以是表达式（2n+1）(-n+3) 索引值从1开始，，也可是关键词（odd）（even）;

注：当“:nth-child(n)”中的n为表达式时，n从0开始计算，当表达式的值为0或者小于0时，选择器选择不到任何相匹配的元素。如下表所示：