网站建设中几种CSS选择器

  一个项目会有很多样式和特效，如何用CSS选择器控制网页，下面讲述网站建设中几种CSS选择器。

1，基本选择器

 类选择器(class选择器)
 .one{font-size:12px;}
 唯一选择器(ID选择器)
 #one{font-size:12px;}
 通配符选择器(*)
 *{font-size:12px;}
 tagName标签选择器
 p{font-size:12px;}

2,层级选择器

组合选择器
例：div,p 相同属性选择出来
包含选择器
例：div p 包含都可以选择出来
子选择器
子元素为选择器2(只有父子关系才可以) 例：div > p
相邻选择器
紧贴在选择器1之后的选择器2元素 例 div + p
兄弟选择器
选择器1后面的所有兄弟元素  例 div ~ p

3，属性选择器

属性选择器就是根据属性名或者属性值来查找到某个元素
标签[属性]
 1.  E[ATT] 匹配所有具有ATT属性的E元素，不考虑属性值。
 2.  E[ATT = VAL] 匹配所有ATT属性等于VAL的E元素。
 3.  E[ATT ~= VAL] 匹配所有ATT属性具有多个空格分隔的值，其中一个值等于VAL的E元素。
 4.  E[ATT |= VAL] 匹配所有的ATT属性具有多个连接分隔符的值，其中一个值以val-开头的E元素，主要用于lang属性。比如：’en-us’,’en-gb’（了解3）。
 5.  E[ATT ^= VAL]属性ATT的值以VAL开头的E元素。
 6.  E[ATT $= VAL] 属性ATT的值以VAL结尾的E元素。
 7.  E[ATT *= VAL] 属性ATT的值中有VAL存在的E元素。

4，结构性伪类选择器

在CSS中引入的结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式
 在CSS中引入的结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式
        -   四个最基本的结构性伪类选择器
            1.  :root 将样式绑定到页面的根元素。
            2.  E:not() 对某个结构元素使用样式，但是想拍出这个元素下的子结构元素。
            3.  E:empty 匹配所有为空的E元素。
            4.  :target 代表链接到目标时。
        -   其他的结构伪类选择器
            -   E:first-child 对一个父元素中的第一个子元素E设置样式。
            -   E:last-child 对一个父元素中的对吼一个子元素E设置样式。
            -   E:nth-child() 对指定需要的子元素E设置样式。
            -   E:nth-last-child() 对指定需要的子元素E设置样式。
            -   E:nth-of-type() 与:nth-child()作用类似，但是仅匹配使用的同种标签元素。
            -   E:nth-last-of-type() 与:nth-last-child()作用类似，但是仅匹配使用的同种标签
            -   E:nth-child(an+b)
                -   a 表示每次循环中间隔几个改变样式。
                -   b 表示指定在循环中开始的位置。
            -   E:only-child 匹配父元素下仅有一个子元素，并且该子元素为E元素。
            -   E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素E。
            -   E:enabled 匹配表单中激活的元素
            -   E:disabled 匹配表单中未激活的元素。
            -   E:checked 匹配表单中被选择的radio或者checkbox元素。
            -   :focus 设置元素在其获取鼠标焦点的样式。
            -   ::selection 匹配用户当前选中的元素(了解)。

5，状态伪类选择器

1. :link  设置超链接a在未被访问前的样式。
2. :visited 设置超链接a在其链接地址已经被访问的样式。
3. :hover 设置元素在鼠标悬停时的样式。
4. :active 设置元素在被用户激活时的样式。