实用指南：【CSS】CSS选择器+文本样式

CSS选择器与文本样式详解

一、CSS引入方式

1. 行内样式

直接在HTML标签中使用style属性定义样式

html

这是一个段落

2. 内部样式

在HTML文档的<head>中使用<style>标签定义样式

html

3. 外部样式

通过<link>标签引入外部CSS文件

html

二、基础选择器

1. 类型选择器（标签/元素选择器）

通过HTML元素名称选择元素

css

p {
  color: #333;
}

div {
  margin: 10px;
}

2. 类选择器

通过class属性选择元素，可以复用

css

.text-red {
  color: red;
}

.box {
  border: 1px solid #ccc;
}

3. ID选择器

通过id属性选择元素，具有唯一性

css

#header {
  background-color: #f5f5f5;
}

#main-content {
  width: 80%;
}

4. 通配符选择器

选择所有元素

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

三、关系选择器（组合选择器）

1. 后代选择器

选择元素内部的所有后代元素

css

.container p {
  line-height: 1.6;
}

2. 子代选择器

仅选择直接子元素

css

.menu > li {
  display: inline-block;
}

3. 邻接兄弟选择器

选择紧接在另一个元素后的兄弟元素

css

h1 + p {
  margin-top: 0;
}

4. 通用兄弟选择器

选择指定元素后的所有兄弟元素

css

h2 ~ p {
  color: #666;
}

四、分组选择器（并集选择器）

将相同样式应用于多个选择器

css

h1,
h2, 
h3 {
  font-family: "Microsoft YaHei", sans-serif;
  color: #222;
}

五、伪类选择器

1. 状态伪类

css

/* 链接伪类 */
a:link { color: blue; }      /* 未访问链接 */
a:visited { color: purple; } /* 已访问链接 */
a:hover { color: red; }      /* 鼠标悬停 */
a:active { color: orange; }  /* 激活状态 */

/* 行为伪类 */
button:hover {
  background-color: #e0e0e0;
}

input:focus {
  border-color: #007bff;
  outline: none;
}

2. 结构伪类

css

/* 基础结构伪类 */
li:first-child {
  font-weight: bold;
}

li:last-child {
  border-bottom: none;
}

/* 隔行变色效果 */
tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tr:nth-child(even) {
  background-color: #fff;
}

/* 使用公式 */
li:nth-child(2n) { /* 偶数项 */
  background-color: #f0f0f0;
}

li:nth-child(2n+1) { /* 奇数项 */
  background-color: #fff;
}

li:nth-child(-n+3) { /* 前三项 */ 
  background-color: #fff; 
}

3. 表单伪类

css

input:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

input:checked {
  accent-color: #007bff;
}

4.其他伪类

:target	选择当前活动的锚点目标元素	section:target { background-color: #fffacd; }
:lang()	选择指定语言的元素	p:lang(en) { font-family: 'Arial'; }
:not()	选择不匹配指定选择器的元素	li:not(.special) { color: #666; }
:empty	选择没有子元素的元素	div:empty { display: none; }
:root	选择文档的根元素	:root { --primary-color: #3498db; }

六、伪元素选择器

css

/* 选择特定部分 */
p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 2em;
  float: left;
}

input::placeholder {
  color: #999;
}

/* 创建内容 */
.button::before {
  content: "★ ";
  color: gold;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  background: #333;
  color: white;
  padding: 5px;
  border-radius: 3px;
}

伪元素名称	描述	应用元素类型	示例
::before	在元素内容前插入内容	大多数元素	p::before { content: "引言: "; }
::after	在元素内容后插入内容	大多数元素	p::after { content: " 结束"; }
::first-letter	选择元素的第一个字母	块级元素	p::first-letter { font-size: 2em; }
::first-line	选择元素的第一行文本	块级元素	p::first-line { font-weight: bold; }
::selection	选择用户选中文本的部分	大多数元素	::selection { background-color: #3498db; }
::placeholder	设置输入框的占位符文本样式	input, textarea	input::placeholder { color: #999; }
::marker	选择列表项的标记	list-item元素	li::marker { color: #3498db; }
::backdrop	选择全屏元素后面的背景	全屏元素（如dialog）	::backdrop { background-color: rgba(0,0,0,0.5); }
::file-selector-button	选择文件上传输入框的按钮	input[type="file"]	input::file-selector-button { background: #3498db; }
::-webkit-scrollbar	自定义滚动条样式（WebKit）	可滚动元素	::-webkit-scrollbar { width: 10px; }

七、属性选择器

css

/* 基础属性选择器 */
input[type="text"] {
  border: 1px solid #ccc;
}

a[target="_blank"] {
  color: orange;
}

/* 属性值匹配 */
img[alt~="logo"] {
  border: 2px solid blue;
}

/* 属性值开头匹配 */
a[href^="https"] {
  color: green;
}

/* 属性值结尾匹配 */
a[href$=".pdf"] {
  background: url(pdf-icon.png) no-repeat right center;
}

/* 属性值包含匹配 */
a[href*="example"] {
  font-weight: bold;
}

选择器	语法	描述	示例	匹配元素
存在属性选择器	`[attr]`	选择具有指定属性的元素	`[title]`	`<p title="提示">`
精确属性值选择器	`[attr=value]`	选择属性值等于指定值的元素	`[type="submit"]`	`<input type="submit">`
包含单词属性值选择器	`[attr~=value]`	选择属性值包含指定单词的元素	`[class~="button"]`	`<div class="primary button">`
连字符分隔属性值选择器	`[attr\|=value]`	选择属性值以指定值开头且后面跟着连字符或没有后续字符的元素	`[lang\|="en"]`	`<p lang="en-US">`
前缀匹配属性值选择器	`[attr^=value]`	选择属性值以指定字符串开头的元素	`[href^="https://"]`	`<a href="https://example.com">`
后缀匹配属性值选择器	`[attr$=value]`	选择属性值以指定字符串结尾的元素	`[src$=".pdf"]`	`<a href="document.pdf">`
子字符串匹配属性值选择器	`[attr*=value]`	选择属性值包含指定子字符串的元素	`[data-id*="user"]`	`<div data-id="user123">`
不区分大小写的属性选择器	`[attr*=value i]`	选择属性值包含指定子字符串的元素，不区分大小写	`[title*="example" i]`	`<p title="EXAMPLE">`

八、CSS文本样式

1. 字体样式

css

.text-example {
  /* 字体颜色 */
  color: #333;
  
  /* 字体族 */
  font-family: "Helvetica Neue", Arial, sans-serif;
  
  /* 字体大小 */
  font-size: 16px;
  
  /* 字体样式 */
  font-style: italic;
  
  /* 字体粗细 */
  font-weight: bold;
  
  /* 文本装饰 */
  text-decoration: underline;
}

2. 文本布局

css

.layout-example {
  /* 文本对齐 */
  text-align: center;
  
  /* 首行缩进 */
  text-indent: 2em;
  
  /* 字母间距 */
  letter-spacing: 1px;
  
  /* 行高 */
  line-height: 1.6;
}

3. font简写

css

.paragraph {
  /* 顺序：font-style font-weight font-size/line-height font-family */
  font: italic bold 16px/1.5 "Microsoft YaHei", sans-serif;
}

九、CSS继承性

可继承的属性

字体相关：font-family, font-size, font-style, font-weight
文本相关：color, text-align, text-indent, line-height, letter-spacing
列表相关：list-style-type, list-style-position
其他：visibility, cursor

不可继承的属性

盒模型相关：margin, padding, border, width, height
定位相关：position, top, left, z-index
背景相关：background, background-color
显示相关：display, float, clear

实际应用示例

html




  
  CSS选择器示例
  


  
    这是一个介绍段落...
    
      首页
      产品
      关于我们
      联系我们

这些CSS选择器和文本样式属性构成了网页样式设计的基础，熟练掌握它们对于前端开发至关重要。

posted on 2025-11-23 17:39 ljbguanli 阅读(37) 评论(0) 收藏举报