简单选择器
元素选择器
元素选择器根据元素名称来选择HTML元素。
1 | p { |
id选择器
id选择器使用HTML元素的id来选择元素。
元素的id在页面中必须是唯一的。
格式:#id
1 | #para1 { |
CSS类选择器
类选择器选择有特定class属性的HTML元素。
格式:点(.) + 类名
1 | .center { |
CSS通用选择器
通用选择器(*)会选择页面上的所有HTML元素。
1 | * { |
CSS分组选择器
同时选中多个元素,设置相同样式。
1 | h1, h2, p { |
组合器选择器
CSS选择器可以包含多个简单选择器。简单选择器之间可以包含组合器。
CSS中有四种组合器:
- 后代选择器(空格)
- 子选择器(>)
- 相邻兄弟选择器(+)
- 通用兄弟选择器(~)
后代选择器
后代选择器匹配属于指定元素后代的所有元素。
下面指定属于div元素内的所有p元素:
1 | div p { |
子选择器
子选择器匹配属于指定元素中的直接子元素。
下面匹配属于div子元素的p元素:
1 | div > p { |
相邻兄弟选择器
相邻兄弟选择器匹配指定元素的相邻同级元素。
同级元素:具有相同的父类。
下面匹配紧随div元素后的所有p元素。
1 | div + p { |
通用兄弟选择器
通用兄弟选择器匹配指定元素同级的所有指定元素。
1 | div ~ p { |
伪类选择器
伪类选择器用于定义元素的特殊状态。
语法
1 | selector:pseudo-class { |
锚伪类
超链接以不同的形式显示:
1 | /* 未访问的链接 */ |
注意:hover必须在link和visited之后,active必须在hover之后。
属性选择器
选择带有特定属性的HTML元素。
[attribute]选择器
[attribute]选择器用于选择带有特定属性的HTML元素。
例如,下列选择带target属性的a标签:
1 | a[target] { |
[attribute = “value”]选择器
[attibute = “value”]用于选择带有指定属性和值的HTML标签。
例如,选择target=”_blank”的HTML标签:
1 | a[target="_blank"] { |
[attibute ~= “value”]选择器
[attribute ~= “value”]选择属性值包含指定词的HTML元素。
例如,选择title属性值带有flower的元素。
1 | [title~="flower"] { |
[attribute |= “value”]选择器
[attribute ^= “value”]选择指定属性以指定值开头的元素。
下例选取 class 属性以 “top” 开头的所有元素:
1 | [class|="top"] { |
值必须是完整单词。
[attribute ^= “value”]选择器
[attribute ^= “value”]选择指定属性以指定值开头的元素。
下例选取 class 属性以 “top” 开头的所有元素:
1 | [class^="top"] { |
值不一定是完整单词。
[attribute $= “value”]选择器
[attribute $= “value”]选择指定属性以指定值结尾的元素。
例如,选择class属性的值以”test”结果的元素。
1 | [class$="test"] { |
[attribute *= “value”]选择器
[attribute *= “value”]选择属性包含指定单词的HTML元素。
例如,选择title属性值带有te的元素。
1 | [class*="te"] { |
设置表单样式
若需为不带class和id的表单设置样式,可以如下使用:
1 | input[type="text"] { |