HTML中CSS选择器的运用浅谈

今天药忘吃喽~ 2024-03-30 14:37 43阅读 0赞

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1]

一、元素[选择器][Link 2]

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

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

二、类选择器

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

类名为 class的值

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

eg:

<p class="color\_blue size"> .color\_blue\{

color: skyblue;

.size\{

font-size: 50px;

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

三、[ID选择器][ID]

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

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

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

四、通配符选择器

1、书写格式：\*\{ \}

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

3、范围太广，不适用

五、[属性选择器][Link 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、动态伪类选择器

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

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

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

（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\{\} [微点阅读][Link 4] [https://www.weidianyuedu.com][Link 1]

解释：选种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\{\}

选种元素的第一个字

[Link 1]: https://www.weidianyuedu.com/
[Link 2]: https://so.csdn.net/so/search?q=%E9%80%89%E6%8B%A9%E5%99%A8&spm=1001.2101.3001.7020
[ID]: https://so.csdn.net/so/search?q=ID%E9%80%89%E6%8B%A9%E5%99%A8&spm=1001.2101.3001.7020
[Link 3]: https://so.csdn.net/so/search?q=%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8&spm=1001.2101.3001.7020
[Link 4]: https://m.weidianyuedu.com/