初识CSS-样式选择符的种类与特点

选择符,是根据元素特征来定位。因此,元素标签与属性,以及位置都可以当做选择符来使用。

选择符种类很多,常用的有以下八种:

1,标签选择符

用标签名称表示,用来描述网页元素类型的,通常与其他选择符组合使用,返回一组元素

p{text-align: center;}

2,id选择符:

用#号表示,用来选择网页中用id属性声明的元素,只返回一个元素

#abc{color:red;}

3,类选择符:

用.来表示,用来选择使用了class属性声明的元素,通常返回一组相关元素

.abc{background-color:blue;}

4,属性选择符:

除了class和id和style以外的属性,都可以使用

属性放在一对方括号中,可同时指定多个属性

还可以对属性值进行正则查询

[title="abc"]{font-size:20px;}

5,群组选择符:

可以设置多个元素公用样式,用逗号分隔每个选择符

h1,h2,h3,h4{font-weight:lighter;}

6,后代选择符:

根据元素之间隶属关系来选择,多个选择符之间,用空格分隔

section h1{color:red;}

将section元素下面所有的h1元素文本设置为红色

7,子代选择符:

子代选择符,只选择当前元素直接子元素,用>号表示

子代选择符,非常的复杂,里面应用了大量的伪类元素,是我们学习的重点

div>h1{color:green;}

将div元素下面子集h1元素文本设置为绿色

8,伪类选择符:

伪类主要应用在特别标签上,表示当前元素的状态

例如a标签的四种状态:未访问,已访问,鼠标悬停,点击中等

a:visited{color:gray;}

将访问过的连接文本颜色设置为灰色

9,伪元素选择符:

伪元素选择符主要有:first-letter和first-line

first-letter:设置段落首行的首字母样式;

first-line:设置段落首行文本的样子

10,通用和同辈选择符:

通用选择符星号*,同辈选择符加号+

通用选择符:*{font-size:12px;}设置网页中文本均为12像素;

同辈选择符:p + a{color:pink;}设置p和相邻a标签文本为粉色

猜你喜欢

转载自blog.csdn.net/qq_34987137/article/details/83513508