2022-03-09 CSS学习笔记-7种选择器及优先级_<text style="color:red">-优快云博客

7种选择器及优先级

内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

1内联样式

即直接写在标签内的

<text style="color:red;">测试<text>

2 id选择器、类选择器

id选择器样式，以#开头：

#container{
	text-align:center;
}

class选择器，以点开头：

.container{
	text-align:center;
}

3伪类选择器

伪类用于定义元素的特殊状态。

例如，它可以用于：

设置鼠标悬停在元素上时的样式
对于访问过/未访问过的链接进行样式设置以进行区分
设置元素获得焦点时的样式，即点击输入框则输入框会有样式改变

语法：

选择器名称:状态{
	属性:值;
}

举例：

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

4属性选择器

可以对有某个属性值的元素进行控制，也可以根据这个属性值进行样式控制。
简单语法：

元素名[属性1][属性2][属性3]{
	样式内容;
}

当元素名为*时表示含有属性的全部元素。

属性的举例，例如，元素可以指定标题，则属性为tittle，属性值可以是任意字符串，如tittle="标题1"。
若想对所有含有tittle 的元素进行控制，则

*[tittle]{
	color:red;
}

*表示所有元素
或者对所有含有tittle 的a元素进行控制，则

a[tittle]{
	color:red;
}

根据具体属性值进行选择的语法，这种情况，属性值必须完全匹配：

元素名[属性1="属性值1"][属性2="属性2"]{
	样式内容;
}

若希望属性值部分匹配，使用~=：

元素名[属性1~="属性值1"][属性2~="属性2"]{
	样式内容;
}

子串匹配属性选择器：
[abc^=“def”] 选择 abc 属性值以 “def” 开头的所有元素
[abc$=“def”] 选择 abc 属性值以 “def” 结尾的所有元素
[abc*=“def”] 选择 abc 属性值中包含子串 “def” 的所有元素
特定属性选择类型

特定属性选择器：

*[lang|="en"] {color: red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

5.标签选择器

即元素选择器，将定义某一元素的所有样式，语法：

元素名{
	样式内容;
}

6.伪元素选择器

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

·设置元素的首字母、首行的样式
·在元素的内容之前或之后插入内容

语法：

元素名::位置{
	样式内容;
}

位置可以是：
::first-line 伪元素用于向文本的首行添加特殊样式。（只能用于块级元素）
以下属性适用于 ::first-line 伪元素：

字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

::first-letter 伪元素用于向文本的首字母添加特殊样式。（只能用于块级元素）
下面的属性适用于 ::first-letter 伪元素：

字体属性
颜色属性
背景属性
外边距属性
内边距属性
边框属性
text-decoration
vertical-align（仅当 "float" 为 "none"）
text-transform
line-height
float
clear

伪元素和类选择器混用语法：

元素名.类名::位置{
	样式内容;
}

如

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

将p元素的class为intro的首字母设置为以下样式
插入内容
::before伪元素可用于在元素内容之前插入一些内容。
下面的例子在每个<h1>元素的内容之前插入一幅图像：

h1::before {
  content: url(smiley.gif);
}

::after 伪元素可用于在元素内容之后插入一些内容。
对于用户选择的内容进行样式调整：
::selection 伪元素匹配用户选择的元素部分。

以下 CSS 属性可以应用于 ::selection：

color
background
cursor
outline

下例使所选文本在黄色背景上显示为红色：

::selection {
  color: red; 
  background: yellow;
}