css3

来源：互联网发布：淘宝美工工资待遇知乎编辑：程序博客网时间：2024/06/07 05:00

一、属性选择器

这里写图片描述

html:

<body>  <div id="box1">示例1</div>  <div id="box2">示例2</div>  <div id="box3">示例2</div>  <div id="box4">示例2</div></body>

css:

<style>  [id = box1] { /*选择id="box1"的标签 设置样式*/    background-color: pink;  }</style>

二、伪元素选择器

1. first-line伪元素选择器用于为某个元素中的第一行文字使用样式。

这里写图片描述

html：

<p>我是一个段落中的第一行<br>我是第二行。</p>

css：

<style>      p::first-line {  /*first-line伪元素选择器将第一行文字设为红色*/    color: red;  }</style>

2. first-letter伪元素选择器用于为某个元素中的文字首字母或第一个字（中文或日文等汉字）使用样式。

这里写图片描述

html：

<p>这是一段中文文字。</p><p>This is an englist text.</p>

css：

<style>      p::first-letter {  /*first-letter选择器设置这两段文字的开头字母或文字的颜色为红色*/    color: red;  }</style>

3.before伪元素选择器用于在某个元素之前插入一些内容

这里写图片描述

html:

<ul>  <li>列表项目1</li>  <li>列表项目2</li>  <li>列表项目3</li></ul>

css:

<style>        ul {list-style: none;}/*去掉列表默认的小圆点 */    li::before {      content: '@@'  /*before伪元素选择器在每个列表项目的文字的开头插入“@@”符号*/    }</style>

4.after伪元素选择器用于在某个元素之后插入一些内容

这里写图片描述

html:

<ul>  <li>列表项目1</li>  <li>列表项目2</li>  <li>列表项目3</li></ul>

css:

<style>        ul {list-style: none;}/*去掉列表默认的小圆点 */    li::after {      content: "(仅用于测试，请勿用于商业用途)";      font-size: 16px;      color: red;    }</style>

三、结构性伪类选择器

1.root选择器将样式绑定到页面的根元素中

这里写图片描述

html：

<body>  <h1>我是标题</h1>  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我是一个段落，我是一个段落，我是一个段落，我是一个段落，我是一个段落,我是一个段落，我是一个段落，我是一个段落.</p></body>

css：

<style>    :root {      background-color: yellow;/*root选择器来指定整个网页的背景颜色为黄色*/    }    body {      background-color: pink;/*将网页中body元素的背景设为绿色*/    }</style>

解析：
如果只使用body元素来设置背景颜色，那么整个页面背景都是绿色；

2.not选择器：如果想对某个结构元素使用样式，但想排除这个结构元素下面的子结构元素，让他不使用这个样式时，可以使用not选择器

这里写图片描述

html：

<body>  <h1>我是标题</h1>  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我是一个段落，我是一个段落，我是一个段落，我是一个段落，我是一个段落,我是一个段落，我是一个段落，我是一个段落.</p></body>

css：

<style>    body :not(h1) {/*body后面有一个空格，如果没有空格效果不显示。在body中，除了h1标签之外，其他所有标签设置背景颜色*/      background-color: pink;    }</style>

3.empty选择器：来指定当元素内容为空白时使用的样式

这里写图片描述

html：

<body>  <table border="1" cellpading="0" cellspacing="0">    <tr>      <td>单元格A</td>      <td>单元格B</td>      <td>单元格C</td>    </tr>    <tr>      <td>单元格D</td>      <td>单元格E</td>      <td></td>    </tr>  </table></body>

css：

<style>    :empty {      background-color: pink;/*当表格中某个单元格内容为空白时，该单元格背景颜色为pink*/    }</style>

4.target选择器：对页面中某个target元素（该元素的id被当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并跳转到target元素后起作用

点击超链接“示例文字2”，相对应的锚点id的背景颜色会设置为pink

这里写图片描述

html：

<body>    <p id="menu">      <a href="#txt1">示例文字1</a> |      <a href="#txt2">示例文字2</a> |      <a href="#txt3">示例文字3</a> |      <a href="#txt4">示例文字4</a> |    </p>    <div id="txt1">      <h2>我是示例文字1</h2>      <p>...此处略去...</p>    </div>    <div id="txt2">      <h2>我是示例文字2</h2>      <p>...此处略去...</p>    </div>    <div id="txt3">      <h2>我是示例文字3</h2>      <p>...此处略去...</p>    </div>    <div id="txt4">      <h2>我是示例文字4</h2>      <p>...此处略去...</p>    </div></body>

css：

<style>    :target {  /*当点击某个链接时，对应的target锚点的id就会设置背景颜色*/      background-color: pink;    }</style>

解析：

超链接a的href=”#id”分别对应下面的id值。点击哪个超链接，对应的id的背景颜色就会根据css样式target来设置为pink

0 0