码迷,mamicode.com
首页 > Web开发 > 详细

CSS选择器

时间:2016-09-01 00:31:53      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:css

CSS语法

CSS语言的基本单位是样式声明:propertyName:value;

CSS语言的使用方式

1、把CSS样式声明作为HTML标签的style属性值

2、使用CSS选择器


如果不使用元素style属性值,CSS要想控制元素的样式,就先要定位,找到想要控制的元素。

CSS使用选择器语法来定位元素,选择器有多种类型,并且选择器之间可以通过多种形式组合在一起,CSS选择器灵活、准确,而且强大。


1、语法格式

选择器可以书写在HTML的<style>标签内

<style type="text/css">

    选择器1{样式声明列表}

    选择器2{样式声明列表}

</style>


2、选择器类型



2.1、标签选择器

2.2、Id选择器

2.3、类选择器

2.4、属性选择器

通过元素的属性进行定位

[attr]选择有attr属性的标签

[attr=val]选择以attr属性值为val的标签

[attr^=val]选择以attr属性值为val开头的标签

[attr$=val]选择以attr属性值以val结尾的标签

[attr*=val]选择以attr属性值中包含val的标签

2.5、伪类选择器

用来定位处在特定状态下的元素

:link没有被点击过的超链接

:visited 被点击过的超链接

:hover 鼠标经过的超链接

:focus 获得焦点的标签

:first-child 第一个子标签

:last-child 最后一个子标签

:empty 没有内容的标签

:enabled 可以操作的标签

:disabled 不可操作的标签

:checked 处于选择状态下的标签

2.6、复合选择器

选择器可以进行多种形式的组合

selector1空格selector2

在1选中的元素中,使用2筛选其后代元素(2不要使用伪类选择器)

selector1>selector2

在1选中的元素中,使用2筛选其子元素

selector1~selector2

在1选中的元素中,使用2筛选其后续兄弟元素

selector1+selector2

在1选中的元素中,使用2筛选其后续紧邻的兄弟元素

selector1,selector2

各个选择器的并集

selector1(没有空格)selector2

各个选择器的交集(复合后可识别才可以这样使用)





CSS选择器

标签:css

原文地址:http://lsieun.blog.51cto.com/9210464/1844915

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!