CSS 高级选择器

相信各位如我一样的“抠图崽”和前端大佬们，在写网页样式的实话，总是免不了写下各种各样的选择器，再给选择的元素写入样式。最基本的元素选择器、class选择器、ID选择器等就不再过多的说了，相信大家都熟的不能再熟了，本文就对一些伪类和属性选择器惊醒一些基本的介绍。

1、子元素选择器

div>P{

　text-align:center;

}

选择父元素为 <div> 元素的所有 <p> 元素（不包括孙子P元素）

2、相邻兄弟选择器

 div+p{

    text-align:center;

 }

“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素（必须有共同的父元素）

3、属性选择器

【attribute】

 a[target]{

     color:red;

 }

选择带有target属性的a元素

【attribute=value】

 a[target="_blank"]{

    color:red;

 }

选取所有targht属性值为_blank的a元素

【attribute~=value】

 p[class~="red"] {

        color: red;

 }

选择 class 属性中包含 red 的p元素（只需要匹配其中一个值就可以）

子串匹配属性选择器

【attribute^=value】

 img[src="head"]{

      width:200px;

 }

选择src属性值以“head”开头的img元素

【attribute$=value】

 a[href$=".pdf"]{

     color:red;

 }

选择href属性值以“.pdf”结尾的a元素

【attribute*=value】

 img[src*="abc"]{

    height:300px;

 }

选择src属性值中包含“abc”的img元素

2、伪类选择器

2.1动态伪类

动态伪类，顾名思义，只有在网页发生交互时，才会发挥作用的伪类，主要包括两种，第一种就是我们常用的超链接中的锚点伪类，如“:link”等

 a:link {color:blue;}/*链接没有被访问时前景色为蓝色*/

 a:visited{color:orange;}/*链接被访问过后前景色为橙色*/

 a:hover{color:red;}/*鼠标悬浮在链接上时前景色为红色*/

 a:active{color:green;}/*鼠标点中激活链接那一下前景色为绿色*/

对于这四个伪类，使用时要特别注意其顺序，必须准守Link--visited--hover--active，不然容易出现不可描述的错误。

另外一种动态伪类称之为用户伪类，其主要在用户发生某些行为后才会体现，如“:hover”，“:active”和“:focus”

:hover 用于用户将鼠标移到该元素上面时的效果
:active 用于用户点击元素那一下发生的效果（只发生在点的一下，鼠标松开后效果就不存在了）
:focus 常用于表单填写，当用户鼠标点击聚焦在某输入框时候的效果

3、CSS3 :nth选择器各种子元素选择

:first-child选择某个元素的第一个子元素；
:last-child选择某个元素的最后一个子元素；
:nth-child()选择某个元素的一个或多个特定的子元素；
:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type()选择指定的元素；
:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
:first-of-type选择一个上级元素下的第一个同类子元素；
:last-of-type选择一个上级元素的最后一个同类子元素；
:only-child选择的元素是它的父元素的唯一一个了元素；
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty选择的元素里面没有任何内容。

巴特西

CSS 高级选择器

最新文章

热门文章