css 有几种选择器及特点

CSS（Cascading Style Sheets，层叠样式表）是一种用于网页排版的语言。在CSS中，选择器是用来选择要应用样式的HTML元素的一种模式。选择器可以根据元素的标签名、类别、属性、关系等进行选择。下面介绍几种常见的CSS选择器，及其特点。 1. 标签选择器 标签选择器是最基本、最普通的CSS选择器。它使用HTML元素的标签名来选择元素。 ``` p { font-size: 16px; } ``` 上述代码中，p选择器用来选择所有的p元素，并将其字体大小设置为16像素。 2. 类选择器 类选择器用来选择HTML元素的class属性值，用“.”符号来表示。 ``` .blue { color: blue; } ``` 上述代码中，.blue选择器用来选择所有class为“blue”的元素，并将它们的字体颜色设置为蓝色。 3. ID选择器 ID选择器用来选择HTML元素的id属性值，用“#”符号来表示。 ``` #title { font-size: 24px; } ``` 上述代码中，#title选择器用来选择id为“title”的元素，并将其字体大小设置为24像素。 4. 属性选择器 属性选择器用来根据HTML元素的属性来选择元素。属性选择器有以下三种类型： - [attribute]: 选择有指定属性的元素。 - [attribute=value]: 选择属性值等于指定值的元素。 - [attribute~=value]: 选择属性值中包含指定单词的元素。 ``` a[href] { /* 选择所有有href属性的链接 */ color: red; } input[type="text"] { /* 选择所有type属性值为"text"的输入框 */ width: 200px; } ul[role~="menu"] li { /* 选择role属性值包含单词"menu"的ul元素下的所有li元素 */ list-style: none; } ``` 属性选择器可以根据元素的属性值来设置样式，这样可以很灵活地选择元素。 5. 后代选择器 后代选择器用于选择某一元素的后代元素。它是通过在多个选择器之间添加空格来定义的。 ``` div p { /* 选择所有在div元素内的p元素 */ font-size: 14px; } ``` 上述代码中，选择器div p用来选择所有在div元素中的p元素，并将它们的字体大小设置为14像素。 6. 相邻兄弟选择器 相邻兄弟选择器用于选择某个元素之后紧接着的一个元素。它是通过在两个选择器之间添加“+”符号来定义的。 ``` h1 + p { /* 选择紧接着在h1元素之后的p元素 */ display: none; } ``` 上述代码中，选择器h1 + p用来选择在h1元素之后紧接着的p元素，并将其隐藏。 以上是常见的一些CSS选择器。掌握了这些基础知识，就能够更好地运用CSS来对网页进行排版。