css3的属性选择器

最新推荐文章于 2023-10-18 23:46:29 发布

gqhp

最新推荐文章于 2023-10-18 23:46:29 发布

阅读量223

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/sjpgyy/article/details/106577029

版权

一 css3的属性选择器

使用css3对HTML页面中的元素实现一对一，一对多或者多对一的控制。使用css3选择器可以大幅度提高开发人员的编写或者修改页面样式的时候的工作效率。每一条css样式定义由两部分组成，形式如下：

选择器{样式}

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式“作用于网页中的哪些元素。

css3中的属性选择器（三个）：

1）[att*=val]属性选择器

 如果元素用att表示的属性的值中包含用val指定的字符，那么该元素使用这个样式

2）[att^=val]属性选择器

如果用att表示的属性的属性值的开头字符为用val指定的字符的话，那么该元素使用这个值

3）[att$=val]属性选择器

如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，那么该元素使用这个样式。


<!DOCTYPE html>
</head>
<body>
<h1>CSS3的属性选择器</h1>
<div id="section1a">sectiona</div>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3的属性选择器</title>
     <style>
        [id*=section1]{
            background:green;
        }
        [id*=section2]{
            background:#ff6600;
        }
        [id*=section1-1]{
            background:goldenrod;
        }
        [id*=section]{
            background:#000;
        }
        [id^=s]{
            background:cornflowerblue;
        }
        [id^=b]{
            background:hotpink;
        }
        [id$=a]{
            background:green;
        }
        [id$=\-1]{
            background:saddlebrown;
        }
        [id$=_2]{
            background:red;
        }
  </style>
<div id="section1-1">section1-1</div>
<div id="section1-1-1c">section1-1-1c</div>
<div id="section1-1-2d">section1-1-2d</div>
<div id="section1-2e">section1-2e</div>
<div id="section1-2-1">section1-2-1</div>
<div id="bection2">section2</div>
<div id="section2-1">section2-1</div>
<div id="section2-2">section2-2</div>
</body>
</head>
</html

gqhp

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3的属性选择器

css3的属性选择器使用css3对HTML页面中的元素实现一对一，一对多或者多对一的控制。使用css3选择器可以大幅度提高开发人员的编写或者修改页面样式的时候的工作效率。每一条css样式定义由两部分组成，形式如下：选择器{样式}在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式“作用于网页中的哪些元素。css3中的属性选择器（三个）：1）[att*=val]属性选择器如果元素用att表示的属性的值中包含用val指定的字符，那么该元素使用这个样式2）[
复制链接

扫一扫