1215（css引入、简单选择器、上下文选择器、伪类选择器） - 前端学习

首页 > 博客列表 > 1215（css引入、简单选择器、上下文选择器、伪类选择器）

博主信息

博文 29

粉丝 0

访问量 25178

专题推荐

更多>

1.css引入

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

引入方法：
1.外部样式：适用于所有文档。使用：使用link标签，或者@import url();
2.内部样式：仅适用当前文档。使用：使用style标签在文档内编写。
3.行内样式：只对当前行起效。使用：在当前标签内用style属性直接编写。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>css的基本语法</title>
    <!-- 内部样式 -->
    <style>
        h1 {
            color: violet;
            border: 1px solid #000;
        }
    </style>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="">
</head>
<body>
    <!-- 行内样式 -->
    <h1 style="color: #000;">php.cn</h1>
</body>
</html>

2.简单选择器

标签选择器
根据元素标签名称进行匹配，返回一组。比如：
h1 {…}
类选择器
根据元素class属性进行匹配，返回一组。比如：
li[class:”on”] {…} 。可简化class为“ . ”比如：li.on
id选择器
根据元素id属性进行匹配,返回一个。比如：
li[id:”foo”]。可简化id为#，比如：#foo

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选择器1: 简单选择器</title>
    <style>
        /* 1. 标签选择器, 返回一组 */
        li {
            background-color: violet;
        }
        /* 2. 类选择器: 返回一组 */
         .on {
            background-color: violet;
        } 
        /* 3. id选择器: 返回一个 */
        #foo {
            background-color: violet;
        }
    </style>
</head>
<body>
    <ul>
        <li id="foo">item1</li>
        <li class="on">item2</li>
        <li id="foo">item3</li>
        <li class="on">item4</li>
        <li class="on">item5</li>
    </ul>
</body>
</html>

3.上下文选择器

后代选择器：选择标签下所有此元素。
使用：空格。
子元素选择器：只选择所有子元素，不管其他级别元素。
使用： >
同级相邻选择器：仅选中与之相邻的第一个兄弟元素。
使用：+

同级所有选择器：选择与之相邻后面的所有兄弟元素。
使用：~

<head>
  <meta charset="UTF-8">
  <title>上下文选择器</title>
  <style>
      ul li {
          background-color: lightblue;
      }
      body>ul>li {
          background-color: teal;
      }
      .start+li {
          background-color: lightgreen;
      }
      .start~li {
          background-color: yellow;
      }
  </style>
</head>
<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>

4.伪类选择器

匹配任意位置的元素：（:nth-of-type(an+b)）
an+b: an起点,b是偏移量, n = (0,1,2,3…)
匹配单个元素：匹配第三个li，（0n+3）可简化为（3），直接写偏移量就好。
```
 ul li:nth-of-type(0n+3) {
      background-color: violet;
      }
```
匹配所有元素：:nth-of-type(1n)
```
  ul li:nth-of-type(1n) {
      background-color: violet;
  } 
```
匹配某位元素后面所有元素：:nth-of-type(1n+某位)
```
  ul li:nth-of-type(n+3) {
      background-color: violet;
  } 
```

反向获取任意位置的元素：（：nth-last-of-type(an+b)）

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

选择所有为偶数的子元素：（:nth-of-type(2n)）或:nth-of-type(even)
选择所有为奇数的子元素：（:nth-of-type(2n-1)）或:nth-of-type(2n+1)或:nth-of-type(odd)
选取第一个元素的快捷方式：（：first-of-type）
-选取最后一个元素的快捷方式：（:last-of-type）
匹配父元素唯一子元素：（：only-of-type）

批改老师：

天蓬老师

批改状态：合格

老师批语：作业标题中不要写日期

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

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

0条评论

作者最新博文

01-03上课操作

2019-12-21 23:01:15