首页 > 博客列表 > # 关于CSS的引入方式及选择器概述

博主信息

博文 13

粉丝 0

访问量 13239

专题推荐

更多>

关于CSS的引入方式及选择器概述

1、CSS的引入方式

1.1 内部样式

说明：仅对当前文档的元素有效，使用style标签
示范代码

<head>
<style>
h1{
color:red;
font_size:small;
}
</style>
</head>
<body>
<h1>php中文网</h1>
</body>

1.2 外部样式

说明：适用于所以引入了这个CSS样式表的html文档，使用link标签
示范代码

<head>
<link type="stylesheet" href="css/style.css">
</style>
</head>
<body>
<h1>php中文网</h1>
</body>

style.css中代码为：
h1{
color:red;
font_size:small;
}

1.3 行内样式

说明：仅适用于当前页面中指定的元素，使用style属性
示范代码

<body>
<h1 style="color:red;" >php中文网</h1>
</body>

小结：为了简化html文档页面结构，提高css文件代码复用性，尽量将公共样式或者共享样式写成单独的外部样式表文件（也称样式表的模块化），通过<link>标签引用

2、CSS的选择器

2.1 简单选择器

2.1 标签选择器

1. 标签选择器, 返回一组对象
 li {
     background-color: violet;
 }

2.2 属性选择器

/*类选择器: 返回一组 */
 li[class="on"] {
    background-color: violet;
}
/*class选择器可简化为*/
.on {
     background-color: violet;
    }
/*id选择器: 返回一个 */
li[id="foo"] {
     background-color: violet;
}
/* 因为浏览器不检查id的唯一性,必须由开发者自行保证 */
/* id选择器使用 # 简化 */
#foo {
    background-color: violet;
}

2.2上下文选择器

2.2.1 后代选择器

说明：选择ul里包含的所有li对象（所有层级）

ul li {
    background-color: lightblue;
}

2.2.2 父子选择器

说明：选择ul里包含的子级li对象

ul>li {
    background-color: lightblue;
}

2.2.3 同级相邻选择器

说明：仅选中与之相邻（后面）的第一个兄弟元素

/*先定位class=start的对象的位置，然后选择后面第一个同级的li对象*/
.start+li {
    background-color: lightgreen;
}
<body>
<ul>
    <li>item1</li>
    <li class="start">item2</li>
    <li>item3</li>
    <li>item4
        <ul>
            <li>item4-1</li>
            <li>item4-2</li>
            <li>item4-3</li>
        </ul>
    </li>
    <li>item5</li>
</ul>
</body>

2.2.4 同级所有选择器

说明：仅选中与之相邻（后面）的第一个兄弟元素

/*先定位class=start的对象的位置，然后选择同级所有li对象*/
.start~li {
    background-color: lightgreen;
}
<body>
<ul>
    <li>item1</li>
    <li class="start">item2</li>
    <li>item3</li>
    <li>item4
        <ul>
            <li>item4-1</li>
            <li>item4-2</li>
            <li>item4-3</li>
        </ul>
    </li>
    <li>item5</li>
</ul>
</body>

2.3 伪类选择器

说明：与结构相关，选择器的重点难点中所在，
关键词：nth-of-type(an+b):

an是起点，n=（0、1、2、3、4。。。）
b是偏移量，用于表示目标对象与an的距离

公共代码

<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ul>
</body>

2.3.1 匹配任意位置的对象：第3个li对象

ul li:nth-of-type(0n+3) {
 background-color: violet;
}
/* 0乘以任何数都等于0,故如果能够明确是第几个，通常直接写偏移量就可以*/
ul li:nth-of-type(3) {
 background-color: violet;
}

2.3.2 匹配任意位置的对象：选择所有li对象，或者选择从第三个（包含）后面所有的li对象

ul li:nth-of-type(1n) {
background-color: violet;
}
/* 如果只是为了全选,这样做没意义,还不如标签选择器来得直接,但是一旦带上偏移量就完全不同了 */
/*选择第3个及后面的所有li对象*/
ul li:nth-of-type(1n+3) {
background-color: violet;
}
/* 1乘以任何数都等于自己,所以省去1 */
ul li:nth-of-type(n+3) {
background-color: violet;
}

2.3.3 反向获取任意位置的对象：关键字为nth-last-of-type(an+b)

ul li:nth-last-of-type(-n+3) {
background-color: violet;
}
/* 我只选择倒数第3个,直接命中 */
/* ul li:nth-last-of-type(3) {
background-color: violet;
}

2.3.4 选择索引为偶数的子对象：2、4、6、8

/*偶数为2n，奇数则为2n-1或者2n+1*/
ul li:nth-of-type(2n) {
background-color: violet;
}

2.3.5 选择第一个（倒数）子对象：

/* 正向：:nth-of-type(1) 的语法糖 :first-of-type */
ul li:first-of-type {
background-color: violet;
}
/*反向第一个：:nth-last-of-type(1)的语法糖：last-of-type*/
ul li:last-of-type {
background-color: violet;
}

2.3.6 选择独生子对象：

ul li:only-of-type {
background-color: violet;
}

2.3.6 选择嵌套的对象：

/*选择最后一个ul的第一个li对象*/
ul:last-of-type li:first-of-type {
background-color: violet;
}

伪类选择器小结 :nth-of-type(an+b)这是最核心的一个选择器,其它的相关选择器都是它的语法糖

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

php-229911-1208

2020-12-09 19:03:51