1215-css三种引入方式|示例演练选择器

css三种引入方式|示例演练选择器

1. 实例演示css规则的三种引入到html文档中的方式;
2. 实例演示标签选择器，class选择器,id选择器,上下文选择器， 结构伪类选择器，重点是结构伪类选择器

1. 实例演示css规则的三种引入到html文档中的方式

1.1 内部样式

<style>
    .inner-style{color: gray;}
</style>

<p class="inner-style">仅对当前元素有效，style标签</p>

1.2 外部样式

<!-- link 标签引入外部样式 -->
<link rel="stylesheet" href="css/style.css">

/* style.css 内容 */
.link-css{background-color: #ddd;}
.import-css{border-left: 5px grey solid;}

<p class="link-css">link标签引入外部css</p>

/* @import 引入外部样式 */
<style>
    @import url(css/style.css);
</style>

<p class="import-css">@import引入外部css</p>

1.3 行内样式

<p style="text-decoration: underline;">行内样式, style属性</p>

2. 实例演示标签选择器，class选择器,id选择器,上下文选择器， 结构伪类选择器，重点是结构伪类选择器

2.1 标签选择器

<style>
    p{text-decoration: underline;}
</style>
<p>tag selector</p>

2.2 class选择器

<style>
    .paragraph{border: 1px red solid;}
</style>
<p class="paragraph">class selector</p>

2.3 id选择器

<style>
    #paragraph{background-color: lightgreen;}
</style>
<p id="paragraph">id selector</p>

2.4 上下文选择器

<!-- 示例 -->
<ul class="list">
    <li class="first">item1</li>
    <li class="second">item2</li>
    <li>item3
        <ul>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </li>
    <li>item6</li>
</ul>
<ul>
    <li>item7</li>
</ul>

2.4.1 后代选择器

ul li{background-color: lightgray;}

2.4.2 子元素选择器

ul > li{background-color: lightgray;}

2.4.3 同级相邻选择器

ul > li.first + li{background-color: lightgray;}

2.4.4 同级所有选择器

ul > li.second ~ li{background-color: lightgray;}

2.5 结构伪类选择器

/* .list 列表第二个子元素 */
.list > li:nth-of-type(2){background-color: lightgray;}
/* .list 第三个子元素至结束 */
.list > li:nth-of-type(n+3){background-color: lightgray;}
/* .list 奇数行 */
.list > li:nth-of-type(2n+1){background-color: lightgray;}
/* .list 偶数行 */
.list > li:nth-of-type(2n){background-color: lightgray;}
/* .list 偶数行 */
.list > li:nth-of-type(even){background-color: lightgray;}
/* .list 奇数行 */
.list > li:nth-of-type(odd){background-color: lightgray;}
/* .list 倒数第二个子元素 */
.list > li:nth-last-of-type(2){background-color: lightgreen;}
/* .list 倒数两个子元素 */
.list > li:nth-last-of-type(-n+2){background-color: lightgreen;}
/* .list 列表第一个 */
.list > li:first-of-type{background-color: lightgray;}
/* .list 列表最后一个 */
.list > li:last-of-type{background-color: lightgray;}
/* ul 列表只有一个子元素的 */
ul > li:only-of-type{background-color: lightgray;}