CSS选择器

Posted 2020-08-05

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

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