HTML中CSS引用: 选择器的使用

转载自品略图书馆 http://www.pinlue.com/article/2019/11/1022/359781842128.html

 

一、元素选择器

1、书写格式：标记名{/*生命块*/}

2、所有与该标记匹配的元素，都将应用声明块中的规则

二、类选择器

1、书写格式：.类名{/*声明块*/}

类名为 class的值

2、所有class属性为指定类名的元素，都将应用声明块中的规则

eg:

.color_blue{

color: skyblue;

}

.size{

font-size: 50px;

}

一个class标签可以写多个类名，放在class的值中，分隔符为空格

三、ID选择器

1、书写格式：#id值{/*声明块*/}

2、id选择器只会选择一个元素,属性id为指定值的元素，将应用声明块中的规则

3、同一个html文档中，不同的id值不可重复。 即 元素中的id值必须唯一

四、通配符选择器

1、书写格式：*{ }

2、指页面内所有标签都适用的样式

3、范围太广，不适用

五、属性选择器

1、书写格式：input[type="text"]{ }

【扩展】

1、选种以xxx开头的元素

书写格式 元素名[属性名^="属性名开头"]

input[type^="t"]{}

2、选种以xxx结尾的元素

书写格式 元素名[属性名$=属性值结尾的内容]

input[type$="d"]

3、选中包含XXX的元素

书写格式 元素名[属性名*=属性值包含的内容]

input[type*="i"]

六、并集选择器/组合选择器

1、书写格式：元素A "，" 元素B "，" 元素C

2、适用于多个不同标签，应用相同的样式

3、声明冲突需要计算层叠机制时，需将每一项分开单独计算

七、伪类选择器

1、在html中不需要添加class属性，直接在CSS中书写

【分类】

1、动态伪类选择器

将链接标签设置样式，书写格式：标签：link{ }

（1）link和visited必须放在最前面（无先后顺序）

（2）link和visited只能用于标签，属于静态伪类选择器

（3）link和visited后面是focus

锁定，将自身的样式变化赋予指定的标签

例：input：focus span{corlor：deeppink}，鼠标选种input，则span标签的内容变成deeppink

（4）focus后面是hover

（5）hover后面是active

通常情况下，我们会用到1245

 

 

{记忆方法：网络通用——爱恨原则：love hate}

l v h a

2、结构伪类选择器

书写格式：元素：nth-child（n）{}

eg：section>p:first-child{}

解释：选种section下的第一个子元素，如果为p元素，则进行样式变化；若不是，则不变

（1）要将奇数和偶数项分开添加样式

元素：nth-child（2n）

选偶数项元素

even

元素：nth-child（2n 1）

选种奇数项元素

odd

（2）只选中前m个同样的元素

元素：nth-child（-n m）

中间不能插入其他元素

（3）选种A标签下的B元素中的第n个

A>B:nth-of-type(n){}

（4）选种A标签下的B元素中的倒数第n个

A>B:nth-last-of-type(n){}

3、否定伪类选择器

选种除了第n个元素的其他同类元素

元素：not（：nth-child(3)){}

七、伪元素选择器

CSS创建的元素，都是选种元素的子元素

分类

元素：：before{}

选种元素的第一个子元素

元素：：after{}

选种元素的最后一个子元素

元素：：first-line{}

选种元素的第一行

元素：：first-letter{}

选种元素的第一个字