web开发笔记-css介绍(2)

简介

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

内容

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

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

eg1.png

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

-css:
 [title=one] {
            color: lightskyblue;
        }
-html:
    
title属性是one
    
title属性是two

eg2.png

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

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

-html:
    
title的属性有Nick.(One Nick)
    
title的属性有Nick.(Nick One)
    
title的属性没有Nick.(Hello One)

eg3.png

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

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

eg4.png

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

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

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:
    link
    hover
    active
    visited

5.png

6.png

2 . before、 after
P:before** 在每个

元素的内容之前插入内容;
P:after **在每个

元素的内容之后插入内容。

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

eg7.png

结束