跟着大牛学PHP--CSS样式和选择器

发布于：2022-07-08 14:36:54  栏目：技术文档

一.CSS样式表和选择器

1.插入样式表的方法

• 外部样式
• 内部样式
• 内联样式

外部样式表

通过使用<link>标签调用外部样式表，一般加在HTML文档头部（head）.

<link rel="stylesheet" href="test.css">

通过<link>标签关联外部样式表（test.css）

内部样式表

使用<style>标签在HTML文档内部定义内部样式表。

<style>
  he {color: blue;}
  hr {background-color: black;}
</style>

内联样式

又称“行内样式”，即在相关标签内使用style属性来定义样式

<p style="color:blue"></p>

style属性仅在P标签内应用

优先级

一般情况下：内联样式>内部样式>外部样式>浏览器默认样式自定义样式>浏览器默认样式>继承样式

2.CSS常用选择器

标签选择器

h1 {
    color: black;
    background: red;
}

属性选择器

一般属性使用方法:
h2[title='name'] {
    color: aquamarine;
}
class属性使用方法（使用符号.）:
h2.name2 {
    color: aquamarine;
}
id属性使用方法（使用符号#）：
h2#name1 {
    color: aquamarine;
}

群组选择器

h2#name1,h2.name2 {
    color: aquamarine;
}

通配选择器(全选所有父级下面子级的所有标签 例如： body)

body * {
    background-color: aqua;
}

3.上下文选择器

）" class="reference-link">子元素选择器（使用符号>）

<ul class="list">
<li class="item">itme1</li>
<li class="item">itme2</li>
<li class="item">itme3</li>
</ul>
使用方法如下：
.list>.item {
    background-color: aqua;
}

后代元素选择器（使用空格符号）

<ul class="list">
<li class="item">itme1</li>
<li class="item">itme2</li>
<ul>
<li class="item">itme2-1</li>
<li class="item">itme2-2</li>
</ul>
<li class="item">itme3</li>
使用方法如下（所有元素生效）:
.list .itme {
    background-color: aqua;
}

相邻兄弟选择器

<ul class="list">
<li class="item">itme1</li>
<li class="item two">itme2</li>
<li class="item">itme3</li>
</ul>
使用方法如下（使用+符号，并带上通配*符号）：
.list>.item.two + * {
    background-color: aqua;
}

所有兄弟选择器

<ul class="list">
<li class="item">itme1</li>
<li class="item two">itme2</li>
<li class="item">itme3</li>
<li class="item">itme4</li>
<li class="item">itme5</li>
</ul>
使用方法如下（使用~符号，并带上通配*符号）：
.list>.item.two ~ * {
    background-color: aqua;
}

相关推荐