css引入方法，选择器的使用和结构伪类选择器的使用

css引用方法

行内引用
```
<p style="color:brown">
这是红色
</p>
```

内部样式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>css内部样式</title>
 <style>
     h1 {
         color: violet;
     }
 </style>
</head>
<body>
 <h1>php中文网</h1>
</body>
</html>

外部链接css文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>css内部样式</title>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
 <h1>php中文网</h1>
</body>
</html>

标签选择器

<style>
 h1{
 color:#FFF;
 }
</style>

属性选择器

<style>
 .a{
 color:#fff;
 }
</style>
<body>
 <h2 clss="a"></h2>
</body>

id选择器

<style>
 #a{
 color:#fff;
 }
</style>
<body>
 <h2 id="a"></h2>
</body>

上下文选择器

第一种,用空格隔开，选中其下面的标签

<style>
 ul li{
 color:#fff;
 }
</style>
<body>
<ul>
 <li>选中这个标签</li>
</ul>
</body>

第二种，用大于号隔开，按层级来选中标签

<style>
 body>ul>li{
 color:#fff;
 }
</style>
<body>
<ul>
 <li>选中这个标签</li>
</ul>
</body>

第三种，用加号隔开，来选中与之相邻的第一个标签

<style>
 .on+li{
 color:#fff;
 }
</style>
<body>
<ul>
 <li>标签</li>
 <li class="on">个标签</li>
 <li>选中这个标签</li>
</ul>
</body>

第四种，用~隔开，来选中与之相邻下的所有标签

<style>
 .on~li{
 color:#fff;
 }
</style>
<body>
<ul>
 <li>标签</li>
 <li class="on">个标签</li>
 <li>选中这个标签</li>
 <li>选中这个标签</li>
 <li>选中这个标签</li>
</ul>
</body>

结构伪类选择器

语法:”:nth-of-type(an+b)”,其中an是起点，b是偏移量，n是从零开始计算的，

<style>
 ul li:nth-of-type(0n + 3) {
     background-color: blueviolet;
 }
/*因为0x任何事等于0，所有直接 */
 ul li:nth-of-type(3) {
     background-color: blueviolet;
 }
/* 全选,1n+0可以简写把0删掉*/
 ul li:nth-of-type(1n) {
     background-color: brown;
 }
/* 从第三个开始往下全选1n + 3，因为1x任何数都等于本身，所以1可以不写 */
 ul li:nth-of-type(n + 3) {
     background-color: chartreuse;
 }
/* 反向选择nth-last-last-of-type ,a得写成负数*/
 ul li:nth-last-of-type(-n + 3) {
     background-color: chocolate;
 }
/* 选择所有为偶数的 */
/* 这样写其运算方式2x0=0,2x1=2,2x2=4..... */
 ul li:nth-of-type(2n) {
     background-color: #070500;
 } */
/* 奇数，让偶数本身每次计算减去或者加上1就行了*/
 ul li:nth-of-type(2n-1) {
     background-color: #fff;
 } 
/* 简写：even代表偶数行，直接写就行*/
 ul li:nth-of-type(even) {
     background-color: #fff;
 }
/* odd代表奇数行 */
 ul li:nth-of-type(odd) {
     background-color: #000;
 }
/* 选中第一个元素:first-of-type */
 ul li:first-of-type {
     background-color: #505050;
 }
/* 选中最后一个元素:last-of-type */
 ul li:last-of-type {
     background-color: #505050;
 }
/* 选中里面只有一个子标签的标签 */
 ul li:only-of-type {
     background-color: aquamarine;
 }
 </style>
 <body>
     <ul>
     <li>abcd1</li>
     <li>abcd2</li>
     <li>abcd3</li>
     <li>abcd4</li>
     <li>abcd5</li>
     <li>abcd6</li>
     <li>abcd7</li>
     <li>abcd8</li>
     <li>abcd9</li>
     <li>abcd10</li>
 </ul>
 <ul>
   <li>我是一个li</li>
 </ul>
</body>

css引用方法

标签选择器

属性选择器

id选择器

上下文选择器

结构伪类选择器

相关文章