HTML中CSS引用——选择器的使用 一、素选择器 1、书写格式：标记名{/*生命块*/} 2、所有与该标记匹配的素，都将应用声明块中的规则 二、类选择器 1、书写格式：.类名{/*声明块*/} 类名为 class的值 2、所有class属性为指定类名的素，都将应用声明块中的规则 eg: 
<p class=”color_blue size”> .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、动态伪类选择器 将链接标签<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{} 解释：选种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{} 选种素的第一个字
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/57729.html
