1215css基础

CSS引入方式

1、外部引入
使用link标签引入
使用@import导入

<link rel="stylesheet" href="style.css">;
@import url(css/style.css) ;

2、内部样式
书写在页面style标签中

<style>
</style>

3、行内样式
书写在元素style属性中的样式

<h1 style="color:red">css</h1>

简单选择器

1、标签选择器

返回的是一组标签

<style>
    li{
    color:red;
    }
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

2、类选择器 .
返回的是一组类

<style>
    .on{
    color:red;
    }
</style>
<ul>
<li class="on">1</li>
<li>2</li>
<li class="on">3</li>
</ul>

3、ID选择器 #
理论上返回的是一个元素,浏览器不检查id的唯一性

<style>
    #on{
    color:blue;
    }
</style>
<ul>
<li class="on" id="on">1</li>
<li>2</li>
<li class="on">3</li>
</ul>

上下文选择器

因为html是一个结构化文档：每一个元素在文档中由确切的位置，所以根据元素的上下文来选择是没问题的。
1、后代选择器 空格
选择所有层级 ；

 <style>
        ul li {
            background-color: skyblue;
        }
    </style>
     <ul>
        <li></li>
        <li></li>
        <li></li>
        <li>
            <ul>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li></li>
    </ul>

效果图

2、子代选择器：仅父子层级 >

 ul>li{
 color:red;
 }

3、同级相邻选择器：仅选中与之相邻的第一个兄弟元素 +

 <style>
        .start + li{
            background-color: #0f0;
        }
    </style>
     <ul>
        <li></li>
        <li></li>
        <li class="start"></li>
        <li>
            <ul>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li></li>
    </ul>

效果图

4、同级所有选择器：选中与之相邻的后面所有兄弟元素 ~

<style>
        .start ~ li{
            background-color: #0ff;
        }
    </style>

伪类选择器：结构伪类

nth-of-type

1、匹配任意位置的元素：nth-of-type(an+b);
an+b:an表示起点 b表示偏移量，n=（0，1，2，3…）；
通常写偏移量就可以

<style>
        ul li:nth-of-type(0n+3){
            background-color: rgb(255, 242, 255);
        }
    </style>

2、全选：1n
3、反向获取：nth-last-of-type(an+b);
选择最后三个

<style>
        ul li:nth-last-of-type(3){
            background-color: rgb(255, 242, 255);
        }
    </style>

4、选择偶数：nth-of-type(2n)|nth-of-type(even);
5、选择奇数：nth-of-type(2n+1/2n-1)|nth-of-type(odd);
6、选择第一个子元素:nth-of-type(1) 语法糖：first-of-type;
7、选择最后一个子元素:last-of-type;
8、如果只想匹配父元素中的唯一子元素：only-of-type