网站开发分包,wordpress 默认链接 媒体文件夹,wordpress插件 网站,用网站还是阿里巴巴做soho前言 基础选择器
以下是几种常见的基础选择器。
标签选择器#xff1a;通过HTML标签名称选择元素。
例如#xff1a;
p {color: red;
}
上述样式规则将选择所有p标签 #xff0c;并将其文字颜色设置为红色。 类选择器#xff1a;通过类名选择元素。使用类选择…前言 基础选择器
以下是几种常见的基础选择器。
标签选择器通过HTML标签名称选择元素。
例如
p {color: red;
}
上述样式规则将选择所有p标签 并将其文字颜色设置为红色。 类选择器通过类名选择元素。使用类选择器时需要在类名前加上英文句点.。
例如
p classmyp这是p标签。/p
.myp {font: size 16px;
}
上述样式规则将选择所有具有classmyp属性的元素。并将它们的字体大小设置为16像素。 ID选择器通过元素的唯一ID选择元素。使用ID选择器时在CSS中需要在ID名称前加上井号#。
例如
div idmydiv这是一个div元素。/div#mydiv {background-color: blue;
}
上述样式规则将选择具有idmydiv 的元素并将它们的背景颜色设置为蓝色。 复合选择器
复合选择器是由多个基础选择器通过不同的方式组合而成的用于更精确地选择目标元素。
后代选择器
后代选择器用于选择某个元素的后代元素。父子选择器之间用空格隔开。
语法
父选择器 子选择器 {/* 样式规则 */
}
示例
选择div元素内部所有的p元素。
div p {/* 样式规则 */
}
后代选择器支持多级嵌套即可以选择更深层次的后代元素。例如
选择div元素内部的ul元素再选择其中的li元素最后选择li元素内部的a元素。
div ul li a {/* 样式规则 */
} 通过合理运用后代选择器你可以针对特定的HTML结构来选择需要应用样式的元素实现更精确的样式控制。 子代选择器
子代选择器用于选择某个元素的直接子元素。父子选择器之间用 符号隔开。
语法
父选择器 子选择器 {/* 样式规则 */
}
示例
选择div元素下直接的所有p元素。
div p {/* 样式规则 */
}
相比于后代选择器子代选择器的作用范围更加精确只选择直接子元素不包括孙子元素及以下元素。 并集选择器
并集选择器用于同时选择多个不同类型的元素或相同类型的元素。选择器之间用 , 隔开。
语法
选择器1, 选择器2, 选择器3 {/* 样式规则 */
}
示例
同时选择h1和h2元素。
h1, h2 {/* 样式规则 */
}
通过合理运用并集选择器你可以灵活地选择多个元素并对它们进行统一的样式设置实现样式的复用和统一管理。 伪类选择器-超链接
在CSS中可以使用伪类选择器为超链接元素a标签应用不同的样式。以下是几个常用的超链接伪类选择器
选择器作用:link匹配未访问的连接状态:visited匹配已访问的链接状态:hover匹配鼠标悬停在链接上的状态:active匹配被激活点击的状态
示例
a:link {color: blue;
}a:visited {color: purple;
}a:hover {text-decoration: underline;
}a:active {color: red;
}
上述代码中:link 选择器设置未访问的链接为蓝色:visited 选择器设置已访问的链接为紫色:hover 选择器在鼠标悬停时添加下划线:active 选择器在被点击时将链接颜色设为红色。
需要注意的是在设置超链接的颜色时应该按照 :link、:visited、:hover、:active 的顺序进行设置以确保样式生效。 结构伪类选择器
结构伪类选择器是CSS中一种用于选择元素在其位置上的特殊状态或结构关系的选择器。它们依赖于元素在文档中的位置、层次结构或其他结构性属性来进行选择。
以下是几个常用的结构伪类选择器
选择器说明:first-child选取父元素下的第一个子元素:last-child选取父元素下的最后一个子元素:nth-child(n)选取父元素下的第n个子元素可以使用数字、关键字如even表示偶数odd表示奇数或公式形式如2n1进行指定。:nth-last-child(n)与 :nth-child(n) 类似但从末尾开始计数。:only-child 选取父元素中唯一一个子元素。 伪元素选择器 示例
测试HTML代码
ullili-1/lilili-2/lilili-3/lilili-4/lilili-5/lilili-6/lilili-7/lilili-8/lilili-9/lilili-10/li
/ul 预览 1.选取第一个li标签并设置背景颜色
li:first-child {background-color: green;
}
预览
2.选取前5个li标签并设置背景颜色
li:nth-child(-n5) {background-color: green;
} 预览 需要注意的是结构伪类选择器只会考虑该元素在其父元素的直接子元素中的位置而不会考虑更深层次的关系。 伪元素选择器
伪元素选择器用于选择元素的特定部分而不是整个元素本身。它们以双冒号 :: 开头。
以下是常用的伪元素选择器
选择器说明::before在目标元素的内容前面插入一个虚拟元素并可以通过CSS设置其样式。::after在目标元素的内容后面插入一个虚拟元素并可以通过CSS设置其样式。::first-letter选取目标元素的第一个字母或汉字并可以通过CSS设置其样式。::first-line选取目标元素的第一行文本并可以通过CSS设置其样式。::selection选取用户选择的文本部分并可以通过CSS设置选择文本的样式。
伪元素选择器可以为页面增加一些装饰或样式效果例如下图的侧导航的小箭头 示例
在按钮文本前面插入一个图标。
HTML代码
button classicon-buttonClick Me/button
CSS代码
.icon-button::before {content: \f054; /* 使用Unicode或CSS content值指定图表内容 */font-family: font awesome; /* 使用自定义字体或图标库 */margin-right: 5px; /* 调整图标与文本间距离 */
}
预览
