前端项目开发-09_CSS常见选择器.pdf

CSS常见选择器

王红元coderwhy

目录

1属性选择器

content

2后代选择器

3兄弟选择器

4选择器组

5伪类选择器

6伪元素

coderwhyCSS选择器（selector）

◼开发中经常需要找到特定的网页元素进行设置样式

思考：如何找到特定的那个元素？

◼什么是CSS选择器

按照一定的规则选出符合条件的元素，为之添加CSS样式

◼选择器的种类繁多，大概可以这么归类

通用选择器（universalselector）

元素选择器（typeselectors）

类选择器（classselectors）

id选择器（idselectors）

属性选择器（attributeselectors）

组合（combinators）

伪类（pseudo-classes）

伪元素（pseudo-elements）

coderwhy通用选择器

◼通用选择器（universalselector）

所有的元素都会被选中;

◼一般用来给所有元素作一些通用性的设置

比如内边距、外边距;

比如重置一些内容;

◼效率比较低，尽量不要使用;

coderwhy简单选择器

◼简单选择器是开发中用的最多的选择器:

元素选择器（typeselectors）,使用元素的名称;

类选择器（classselectors）,使用.类名;

id选择器（idselectors）,使用#id;

coderwhyid注意事项

◼一个HTML文档里面的id值是唯一的，不能重复

id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识

最好不要用标签名作为id值

◼中划线又叫连字符（hyphen）

coderwhy属性选择器(attributeselectors)

◼拥有某一个属性[att]

◼属性等于某个值[att=val]

◼其他了解的(不用记)

[attr*=val]:属性值包含某一个值val;

[attr^=val]:属性值以val开头;

[attr$=val]:属性值以val结尾;

[attr|=val]:属性值等于val或者以val开头后面紧跟连接符-;

[attr~=val]:属性值包含val,如果有其他值必须以空格和val分割;

coderwhy后代选择器（descendantcombinator）

◼后代选择器一:所有的后代(直接/间接的后代)

选择器之间以空格分割

◼后代选择器二:直接子代选择器(必须是直接自带)

选择器之间以分割;

coderwhy兄弟选择器(siblingcombinator)

◼兄弟选择器一:相邻兄弟选择器

使用符号+连接

◼兄弟选择器二:普遍兄弟选择器~

使用符号~连接

coderwhy选择器组–交集选择器

◼交集选择器:需要同时符合两个选择器条件(两个选择器紧密连接)

在开发中通常为了精准的选择某一个元素;

◼并集选择器:符合一个选择器条件即可(两个选择器以,号分割)

在开发中通常为了给多个元素设置相同的样式;

coderwhy认识伪类

◼什么是伪