当前位置：首页 > news >正文

CSS：语法、样式表、选择器

news 2025/7/22 1:15:34

一、语法

二、创建

外部样式表

内部样式表

内联样式

三、选择器

ID选择器

类选择器

伪类选择器

:hover

a:link

a:active

a:visited

属性选择器

伪元素选择器

::first-letter

::first-line

::selection

::placeholder

::before 和::after

通配选择器

标签选择器

参考资料：

一、语法

由选择器和多条声明构成，一条声明由属性和值构成。

二、创建

外部样式表

使用link元素链接外部样式表，外部样式表是一个以.css结尾的文件。

<head><link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

使用style元素将CSS语言括起来，定义在头文件上。

<head>
<style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

使用元素内部使用style属性编写CSS样式表，定义在元素上。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

注意：内联样式 > 内部样式表 > 外部样式表 > 浏览器样式表

三、选择器

ID选择器

以#开头，后面跟着ID名称，因为ID在HTML里具有唯一性，具体效果针对单一ID名称相同元素。例如：针对以下元素。

HTML代码
<p id="para1">这是一个段落。</p>

CSS代码
#para1
{text-align:center;color:red;
}

类选择器

以.开头，后面跟着类名称，类名称不具有唯一性，对一类的元素进行同样的CSS渲染，如果要特指类内的某一元素标签，则空格后跟元素标签。

HTML代码

<div class="content-class"></div>

CSS代码


.content-class {color: blue;
}
/*匹配类*/.content-class div{color: blue;
}
/*匹配content-class类中的div标签*/

伪类选择器

伪类是用于指定所选元素的特殊状态。不同的元素有着不同的伪类。伪类由冒号后跟着伪类名称组成（例如，:hover）。函数式伪类还包含一对括号来定义参数。附上了伪类的元素被定义为锚元素（例如，button:hover 中的 button）。它与一些用户交互有关，某些并不是直接的显现。以下是常见元素的伪类使用。

<any>:hover

鼠标悬浮在元素上，可用于所有元素

a:hover{background-color:yellow;
}
button:hover{background-color:yellow；
}

a:link

设置了未访问过的页面链接样式，可用于a元素

a:link
{background-color:yellow;
}

a:active

设置点击链接后按下的样式，短暂时刻，可用于a元素

注意：为了产生预期的效果，在CSS定义中，:active必须位于:hover之后！

a:active
{background-color:yellow;
}

a:visited

设置访问过的页面链接的样式，可用于a元素

a:visited
{background-color:yellow;
}

属性选择器

CSS 属性选择器匹配那些具有特定属性或属性值的元素。

/* 存在 title 属性的 <a> 元素 */
a[title] {color: purple;
}/* 存在 href 属性并且属性值匹配"https://example.org"的 <a> 元素 */
a[href="https://example.org"]
{color: green;
}

伪元素选择器

伪元素选择器用于处理那些不是由HTML标签直接表示的内容，比如首行文字、首字母或者生成的内容等等。

注意：一个基础选择器只能附加搭配一个伪元素

选择器，它与伪类选择器的区别是有两个冒号:: 。

常见伪元素选择器

::first-letter

选中块级元素第一行的第一个字母，也就是说块级元素第一行为文字可使用。

div::first-letter {font-size: 30px;color: orange;
}

::first-line

选中块级元素第一行，也就是说块级元素第一行为文字可使用。

div::first-line {font-size: 20px;color: red;
}

::selection

使用鼠标或其他选择设备选中的部分进行样式渲染。

/* 选中的文字颜色会变为红色，背景色为天蓝色 */
div::selection {color: red;background-color: skyblue;
}

::placeholder

它作用于<input>或<textarea>元素中的占位文本。

/* 文本字体为橙色，切背景为天蓝色 */
input::placeholder {color: orange;background-color: skyblue;
}

::before 和::after

before会在选中元素之前添加一个伪元素，而after会在选中元素之后，添加一个伪元素。通过 content属性来为一个元素添加修饰性的内容。

注意： ::before 和::after必须要包含content属性

HTML代码

 <div class="item"><div></div>
</div>

CSS代码：&指向父元素也就是包裹它的元素本身，它也叫父占位符。

.item div{position: relative;border: 1px solid #03A9F3;&::before,&::after {content: "";position: absolute;width: 20px;height: 20px;transition: .3s ease-in-out;}&::before {top: -5px;left: -5px;border-top: 1px solid var(--borderColor);border-left: 1px solid var(--borderColor);}&::after {right: -5px;bottom: -5px;border-bottom: 1px solid var(--borderColor);border-right: 1px solid var(--borderColor);}&:hover::before,&:hover::after {width: calc(100% + 9px);height: calc(100% + 9px);}
}