css3 - 属性选择器、伪元素选择器、结构性伪类选择器

一、属性选择器

这里写图片描述

html:


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

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>列表项目1li>
  <li>列表项目2li>
  <li>列表项目3li>
ul>

css:

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

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

这里写图片描述

html:

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

css:

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

三、结构性伪类选择器

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

css3 - 属性选择器、伪元素选择器、结构性伪类选择器_第1张图片

html:

<body>
  <h1>我是标题h1>
  <p>     我是一个段落,我是一个段落,我是一个段落,我是一个段落,我是一个段落,我是一个段落,我是一个段落,我是一个段落.p>
body>

css:

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

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

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

css3 - 属性选择器、伪元素选择器、结构性伪类选择器_第2张图片

html:

<body>
  <h1>我是标题h1>
  <p>     我是一个段落,我是一个段落,我是一个段落,我是一个段落,我是一个段落,我是一个段落,我是一个段落,我是一个段落.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>单元格Atd>
      <td>单元格Btd>
      <td>单元格Ctd>
    tr>
    <tr>
      <td>单元格Dtd>
      <td>单元格Etd>
      <td>td>
    tr>
  table>
body>

css:

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

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

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

css3 - 属性选择器、伪元素选择器、结构性伪类选择器_第3张图片

html:


    

"menu"> "#txt1">示例文字1 | "#txt2">示例文字2 | "#txt3">示例文字3 | "#txt4">示例文字4 |

"txt1">

我是示例文字1

...此处略去...

"txt2">

我是示例文字2

...此处略去...

"txt3">

我是示例文字3

...此处略去...

"txt4">

我是示例文字4

...此处略去...

css:

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

解析:

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

你可能感兴趣的:(css3)