CSS选择器

一、CSS基本选择器

CSS基本选择器包括了四类:标签选择器、类选择器、id选择器、通配选择器
针对同一个标签,通过这几种方式定义的样式的优先级分别是:
      通配选择器<标签选择器<类选择器<id选择器

二、组合选择器

1、包含选择器

/*选择div的所有后代中的span元素*/
div span{
    font-size:12px;
}

第一个选择符名表示:包含选择符名称
第二个选择符名表示:被包含选择符名称

2、子选择器

/*选择div的所有孩子中的span元素(父子关系)*/
div>span{
    font-size:12px;
}

第一个选择符名表示:父级选择符名称
第二个选择符名表示:子级选择符名称

3、相邻选择器

/*选择div的相邻弟弟p元素(div之后紧接着是p元素,并且是同一级)*/
div+p{
    font-size:12px;
}

第一个选择符名表示:“兄”选择符名称
第二个选择符名表示:“弟”选择符名称
其结构是第一个选择器指定前面相邻元素,后面的选择器指定相邻元素

4、兄弟选择器

/*选择div标签后面的所有同级的p元素*/
div~p{
    font-size:12px;
}

第一个选择符名表示:“兄”选择符名称
第二个选择符名表示:“弟”选择符名称
其基本结构是第一个选择器指定同级前置元素,后面的选择器指定其后同级所有匹配元素。兄弟选择器和相邻选择器的区别是:相邻选择器只能选择前置元素后相邻的一个匹配元素,兄弟选择器能够选择前置元素后同级的所有匹配元素。

5、分组选择器

/*选择所有的div、p、h1元素*/
div,p,h1{
    font-size:12px;
}

其基本结构是选择出用逗号分隔的所有匹配元素。

三、属性选择器

1、只指定属性名

/*形式:E[attr][attr]...:*/
.nav a[id]{
    font-size:12px;       /*选择class为nav的元素的所有子元素中,具有id属性的a元素*/
}

.nav a[id][title]{
    font-size:12px;       /*选择class为nav的元素的所有子元素中,具有id属性和title属性的a元素*/
}

2、指定属性名,并指定属性值

/*形式:E[attr="value"]...:*/
.nav a[id="one"]{
    font-size:12px;       /*选择class为nav的元素的所有子元素中,id属性值为one的a元素*/
}

.nav a[class="nav first"][title]{
    font-size:12px;       /*选择class为nav的元素的所有子元素中,具有title属性,并且class属性值为nav first的a元素*/
}

注意:属性值必须完全匹配

3、指定属性名,并具有该属性值
与上面唯一的不同就是属性值不一定要完全匹配,属性值是一个词列表(类似于class一样可以有多个),只要词列表中有一个值为value就可以。

/*形式:E[attr~="value"]...:*/
.nav a[class="nav first"][title]{
    font-size:12px;       /*选择class为nav的元素的所有子元素中,具有title属性,并且class属性值为nav或first或nav first的a元素*/
}

4、指定属性名,并属性值是以value开头的

/*形式:E[attr^="value"]...:*/
.nav a[title^="https://"]{
    font-size:12px;     /*选择class为nav的元素的所有子元素中,具有title属性,并且title属性值以https://开头的a元素*/
}

5、指定属性名,并且属性值是以value结束的

/*形式:E[attr$="value"]...:*/
.nav a[href$="png"]{
    font-size:12px;     /*选择class为nav的元素的所有子元素中,具有href属性,并且href属性值以png结尾的a元素*/
}

6、指定属性名,并且属性值中包含了value

/*形式:E[attr*="value"]...:*/
.nav a[title*="mine"]{
    font-size:12px;     /*选择class为nav的元素的所有子元素中,具有title属性,并且title属性值包含了mine的a元素*/
}

7、指定属性名,并且属性值是value或者以value-开头的值

/*形式:E[attr|="value"]...:*/
.nav img[src|="img"]{
    width:200px;     /*选择class为nav的元素的所有子元素中,具有src属性,并且src属性值为img或以img-开头的a元素*/
}

四、伪类选择器

/*伪类选择器的形式:E:pseudo-class*/
a:hover{
    color:"red"
}

E表示:元素
pseudo-class表示:伪类名称

伪类选择器的分类
1、动态伪类
锚点伪类:
   :link
   :visited
行为伪类:
   :hover
   :active
   :focus

访问一个链接的顺序是:link-->visited-->hover-->active

2、结构伪类

:first-child:选择某个元素的第一个子元素
:last-child:选择某个元素的最后一个子元素
:nth-child(n):选择某个元素的第n个子元素
:nth-last-child(n):从后往前数,选择某个元素的第n个子元素
:nth-of-type():选择指定的元素,e.g: div:nth-of-type("p")
:nth-last-of-type():从后往前数,选择指定的元素
:first-of-type():选择一个上级元素下的第一个同类子元素
:last-of-type():选择一个上级元素下的最后一个同类子元素
:only-child:选择的元素是它的父元素的唯一一个子元素
:only-of-type:选择一个元素是它的上级元素的唯一一个相同类型的子元素
:empty:选择的元素里面没有任何内容

3、否定伪类
:not():过滤掉特定元素 e.g: input:not([type="submit"]){}

4、UI状态伪类

:enabled:被用来指定当元素处于可用状态时的样式
:disabled:被用来指定当元素处于不可用状态时的样式
:read-only:被用来指定当元素处于只读状态时的样式
:read-write:被用来指定当元素处于非只读状态时的样式
:cehcke:被用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式
:required:元素具有required属性

5、target伪类
:target:匹配文档(页面)的URI中某个标志符的目标元素
clipboard.png


以上为伪类,下面的是伪元素:

clipboard.png

clipboard.png

伪类:用于向某些选择器添加特殊的效果
伪元素:用于向某些选择器设置特殊效果
上面的两个概念看了之后肯定会一脸懵逼,这不还是一样的吗?下面介绍下两者的区别:
1、伪类主要是为了给某些元素添加一些特殊效果,如a标签的link、visited伪类等;而伪元素则是创建了一个虚拟容器,这个容器不包含任何DOM元素,但是可以包含内容,并设置其样式。
2、可以同时使用多个伪类,而只能同时使用一个伪元素

阅读 615

推荐阅读
目录