简介

今天是web开发笔记-css介绍(1)后续介绍.

内容

• 属性选择器
  1. [attribute], 匹配所有指定属性.

-css:
  [title] {
            color: red;
        }
-html:
    <div>你好,我是p标签</div>
    <div title="title"> 你好,我是带有title属性div标签</div>
    <p>你好,我是p标签</p>
    <p title="title"> 你好,我是带有title属性p标签</p>

eg1.png

2. [title=one], 匹配所有title属性等于“one”的标签元素。

-css:
 [title=one] {
            color: lightskyblue;
        }
-html:
    <div title="Nick">title属性是one</div>
    <div title="Hello">title属性是two</div>

eg2.png

3.[title~=Nick], 设置所有title属性具有多个空格分隔的值、其中一个值等于“Nick”的标签元素。

-css:
 [title~=Nick] {
            color: red;
        }

-html:
    <div title="One Nick">title的属性有Nick.(One Nick)</div>
    <div title="Nick One">title的属性有Nick.(Nick One)</div>
    <div title="Hello One">title的属性没有Nick.(Hello One)</div>

eg3.png

4.[title^=Nick],设置所有title属性具有多个连字号分隔的值、其中设置属性值以指定值开头的每个标签元素。

-css:
 [title^=Nick] {
            color: red;
        }
-html:
   
![Uploading eg4_777608.png . . .]
 <div title="One Nick">title的属性以One开头.(One Nick)</div>
    <div title="Nick One">title的属性有以Nick开头.(Nick One)</div>

eg4.png

5.[title=Nick]*, 设置属性值中包含指定值的每个元素.

-css:
 [title*=Nick] {
            color: red;
        }
-html:
    <div title="OneNick">title的属性是OneNick</div>
    <div title="Nick">title的属性是Nick</div>
    <div title="One">title的属性是One</div>

DFB7692F-1D53-4B88-AE28-DB8CAB45E776.png

• 伪类选择器：

1. **link、hover、active、visited **
   a:link（未访问的链接状态）,用于定义了常规的链接状态。
   a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
   a:active（在链接上按下鼠标时的状态）。
   a:visited（已访问过的链接状态）,可以看出已经访问过的链接。

-css:
 a:hover {
            color: red;
        }
        
        a:link {
            color: deepskyblue;
        }
        
        a:active {
            color: lightcoral;
        }

-html:
    <a href="">link</a>
    <a href="">hover</a>
    <a href="">active</a>
    <a href="">visited</a>

5.png

6.png

-css:
p::after {
            content: "我是after";
            display: block;
            color: paleturquoise;
        }
 p::before {
            content: "我是before";
            display: block;
            color: springgreen;
        }
-html:
 <p>我是p标签</p>

eg7.png

结束