首页 > 博客列表 > CSS选择器

博主信息

博文 32

粉丝 0

访问量 29786

专题推荐

更多>

css 的基本语法

任何元素如果想引入到html文档中，必须要使用一个适当的标签，css也不例外

通过style 标签引入的css规则，仅适用于当前的页面（html文档）
css：层叠样式表，用来设置页面中的元素的样式，布局

    h1 {
            color:violet;
            border: 1px solid #000;
        }

h1: 选择器
{…}: 声明块，由一个或多个由分号隔开的样式声明构成
h1 + {…} 选择器 + 声明块 = 规则
声明由属性和值组成

使用CSS的三种方式

内部样式
仅对当前文档的元素有效，使用style标签
在页面style标签内直接写css
引入外部样式表/公共样式表/共享样式表
- 在style标签里使用 @import url(…);
  这种情况使用的不多，一般用在CSS的模块化编程
- 使用link标签，更多的情况使用。
  在使用公共样式表后，某个元素不想使用公共的样式，可以设置自定义样式。通过元素的style属性来设置
  
  适用于所有引入了这个css样式表的html文档，使用link。
元素的style属性设置样式
通过style属性给指定元素自定义/定制样式

行内样式：适用于当前页面中的指定元素，使用元素的style属性

<style> 
   /* 导入外部 */
   @import url(css/style.css);
   /* 等效 */
   @import "css/footer.css";
</style> 
/*使用link标签*/
<link rel="stylesheet" href="css/style.css">

<h1 style="color:teal">css真的非常好玩</h1>

样式表的模块化

对于一个网站来说，许多页面的页眉和页脚是相同的，可以考虑将他们的样式剥离出来，实现模块化编程

将公共样式部分分离，并创建一些独立的样式表来保存它。
使用@import 指令将这些独立的公共样式表引入到指定的CSS文档或标签中

选择器

选择器1：简单选择器

标签选择器

标签选择器，返回一组
属性选择器（class,id）
类选择器：返回一组(简化为 .)
id 选择器：理论上返回一个。由开发者自行保证，浏览器不检查唯一性.（简化为 #）

选择器2：上下文选择器

后代选择器: 选择所有层级 (空格：所有层级)
```
ul li {
        background-color:violet;
    }
```

子元素选择器：仅父子层级选中(> :父子级)

body > ul > li {
        background-color: teal;
    }

同级相邻选择器：仅选中与之相邻的第一个兄弟元素(+ ：相邻的兄弟)
```
.start + li {
        background-color: lightgreen;
    }
```
同级所有选择器：选中与之相邻的后面所有的元素(~ ：所有相邻兄弟)
```
.start ~ li {
        background-color: blue;
    }
```

伪类选择器：结构伪类，重点难点

语法

:nth-of-type(an+b)
an + b : an起点，b是偏移量
n = (0, 1, 2, 3, 4…)
注意n从0开始 ,:冒号要紧挨着前面的选择器，中间不能有空格

实例：

<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>
    <ul>
        <li>我是一个li</li>
    </ul>
</body>

有以上HTML

匹配第3个li

ul li:nth-of-type(0n+3) {
            background-color: violet;
        } 
/* 0乘以任何数都为0，通常直接写偏移量 */    
ul li:nth-of-type(3) {
            background-color: violet;
        }

选择所有元素

ul li:nth-of-type(1n) {
            background-color: yellow;
        } 
        /* 如果只是为了全选，这样做没有意义了，还不如使用标签选择器，一旦带上偏移量就完全不同了。 */
        /* 从第三个子元素开始，选中下面所有的元素 */
 ul li:nth-of-type(1n+3) {
            background-color:violet;
        } 
        /* 1乘以任何数都等于任何数，所以可以优化为 */
 ul li:nth-of-type(n+3) {
            background-color: violet;
        }

选中最后的3个元素

        ul li:nth-of-type(n+8) {
            background-color: violet;
        }

反向选中

 还可以通过反向选中，不用关注元素的个数
 语法： :nth-last-of-type(an+b) 
 始终选中后三个

ul li:nth-last-of-type(-n+3){
            background-color: violet;
        } 
/*选中倒数第三个 */
        ul li:nth-last-of-type(3){
            background-color: violet;
        }

选择所有索引为偶数的子元素

ul li:nth-of-type(2n) {
            background-color: violet;
        } 
 /* 关键字 */
ul li:nth-of-type(even) {
            background-color: violet;
        }

选择所有索引为奇数的子元素 2n-1 ,2n+1 一样，因为n是0开始

ul li:nth-of-type(2n+1){
            background-color: yellow;
        } 
/* 关键字 */
ul li:nth-of-type(odd){
            background-color: yellowgreen;
        }

一些特殊情况，快捷方式，语法糖

        /* 选择第一个子元素 */
         ul li:first-of-type{
            background-color: violet;
        } 
        /* 选择最后一个子元素 */
        ul li:last-of-type{
            background-color: violet;
        } 
        /* :nth-of-type(an+b)最核心的选择器，其他相关选择器都是他的语法糖，马甲，特殊应用场景 */
        /* 我想选中第二个ul中的li */
        ul:last-of-type li:first-of-type{
            background-color: violet;
        } 
        /* 还有更优雅的方式选中 */
        /* 只想匹配父元素的唯一子元素 */
        ul li:only-of-type{
            background-color: yellow;
        }

批改老师：

天蓬老师

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

HTML他是啥

2020-12-09 16:09:43