精华内容
下载资源
问答
  • css属性选择器
    千次阅读
    2020-12-20 12:57:48

    属性选择器(Attribute Selectors),或许你不应该对属性选择器感到生疏,从本质上说,id跟类选择器其实就是属性选择器,只不过是选择了id或者类的值(value)而已。

    属性选择器的格式是元素后跟中括号,中括号内带属性,或者属性表达式(不知道描述是否正确,自创的词),比如h1[title], h1[title="Logo"]等,你可以从我下面的论述中看到4种具体形式。

    注意 属性选择器 ie6 不支持

    1、简易属性选择器

    只顾其名不顾其值,这是简易属性选择器的特点。

    h1[class] {color: silver;}将会作用于任何带class的h1元素,不管class的值是什么。所以

    Hello

    Serenity

    Fooling

    的h1都会受到这条规则的影响。

    当然,这个“属性”不仅仅是class或者id,可以是该元素所有合法属性,比如img的alt,这样img[alt]{css declarations here;}将会作用于任何带有alt属性的img元素。那么a[href][title] {font-weight: bold;}呢?聪明的你一定已经知道,这会作用于同时带href和title属性的a元素,比如

    2、精确属性值选择器

    id和类本质上就是精确属性值选择器,没错,h1#logo等于h1[id="logo"]。如前所述,我们不要局限于id或者class,我们可以使用任何属性!例如a[href="http://www.mb5u.com/"][title="W3C Home"] {font-size: 200%;}将会作用于

    3、部分属性值选择器

    如其名,只要属性值部分匹配(这里的部分,实际上要匹配整个单词)就会作用于该元素。让我们来看个例子:

    When handling plutonium, care must be taken to avoid the formation of a critical mass.

    p[class~="warning"] {font-weight: bold;} 和p[class~="urgent"] {font-weight: bold;}中任何一条都可以让这个p的字体变粗。

    该选择器十分有用,比如你要样式化插图,其title中都含字符串”Figure”,如 title= "Figure 5:xxx说明",则你可以使用img[title~="Figure"] 。

    需要注重的是,如我第一句就强调的,你需要匹配的是整个单词,img[title~="Figure"] 不会匹配title= "Figure5:xxx说明"。

    另外,我做了个小小的测试,你把例子中的“Figure”改成“插图”,把img[title~="Figure"] 改成img[title~="插图"] ,在Firefox中依然可以匹配,不管编码(encoding)是GB2312还是UTF-8。看来CSS对中文的支持还不赖。

    4、非凡属性选择器

    有点怪,这个选择器。它是这样工作的,嗯,举个例子比描述更轻易。

    *[lang|="en"] {color: white;},这条规则(rule)将会选择属性lang的值en或者en-打头的元素。就是说,它可以匹配

    Hello!

    Greetings!

    G'day!
    而不匹配

    Bonjour!

    Jrooana!

    更多相关内容
  • CSS 属性 选择器

    2021-01-19 21:18:34
    DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器属性选择器 下面的例子是把包含标题(title)的所有元素变为蓝色: 实例 [title] { color:blue; }   属性和值选择器 下面的实例改变了标题title=’...
  • CSS属性选择器详解

    千次阅读 2022-01-28 18:45:59
    大家好,给大家分享一下CSS属性选择器 写十个标签: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> ...

    大家好,给大家分享一下CSS的属性选择器

    写十个标签:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <p class="demo">
        <a href="">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
        <a href="">9</a>
        <a href="">10</a>
        
    
    
    </body>
    </html>
     
    

    看结果:

    在这里插入图片描述

    加属性:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <p class="demo">
        <a href="http://www.baidu.com"class="item first" id="first">1</a>
        <a href=""class="links item active" target="_blank"title="test">2</a>
        <a href="images/java关键字.png"class="links item ">3</a>
        <a href="images/java关键字.png">4</a>
        <a href="images/java关键字.png">5</a>
        <a href="images/java关键字.png">6</a>
        <a href="images/java关键字.png">7</a>
        <a href="images/java关键字.png">8</a>
        <a href="images/java关键字.png">9</a>
        <a href="images/java关键字.png">10</a>
    
    
    </body>
    </html>
    

    在这里插入图片描述
    1 里面写了个到百度的超链接:

    在这里插入图片描述

    写css代码:
    (属性选择器)

    <style>
            .demo a{
                float:left ;
                display: block;
                height: 50px;
                width: 50px;
                border-radius: 10px;
                background: green;
                text-align: center;
                color: aqua;
                text-decoration: none;
                margin-right: 5px;
                font: bold 20px/50px Arial;
            }
        </style>
    

    整体代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .demo a{
             /*调节属性参数*/
                float:left ;   /*浮动:想做*/
                display: block; /*变成方块元素*/
                height: 50px; /*高度调节*/
                width: 50px;     /*调节宽度*/
                border-radius: 10px;    /*圆角边框*/
                background: green;    /*背景颜色*/
                text-align: center;     /*文字居中对齐*/
                color: aqua;      /*文字颜色*/
                text-decoration: none; /*去掉下划线*/
                margin-right: 5px;   /*元素向右进行偏移*/
                font: bold 20px/50px Arial; /*字体大小和行高*/
            }
        </style>
    </head>
    <body>
    <p class="demo">
        <a href="http://www.baidu.com"class="item first" id="first">1</a>
        <a href=""class="links item active" target="_blank"title="test">2</a>
        <a href="images/java关键字.png"class="links item ">3</a>
        <a href="images/java关键字.png">4</a>
        <a href="images/java关键字.png">5</a>
        <a href="images/java关键字.png">6</a>
        <a href="images/java关键字.png">7</a>
        <a href="images/java关键字.png">8</a>
        <a href="images/java关键字.png">9</a>
        <a href="images/java关键字.png">10</a>
    
    
    </body>
    </html>
    

    结果:

    在这里插入图片描述

    a[id]{
                background: yellow;
                /*存在id属性的元素   a[][]    */
    
    
    
    

    在这里插入图片描述

    下一个:

      a[id=first]{
            background: brown;
    
            /* id=first的元素设定   */
            }
    

    显示效果:

    在这里插入图片描述

     a[href^=http]{
               
                background: burlywood;
                 /*    选中herf中以http开头的元素*/
            }
    

    显示效果:

    在这里插入图片描述

     a[href$=png]{
                background: deeppink;
            }
    

    效果

    在这里插入图片描述

    完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .demo a{
                float:left ;
                display: block;
                height: 50px;
                width: 50px;
                border-radius: 10px;
                background: green;
                text-align: center;
                color: aqua;
                text-decoration: none;
                margin-right: 5px;
                font: bold 20px/50px Arial;
            /*    属性名:属性名=属性值(正则)*/
            /*    = 绝对等于*/
            /*    *=包含这个字符*/
             /* ^=以这个开头   */
            /* $= 以这个结尾   */
            /*存在id属性的元素   a[][]    */
    
            /*}*/
            /*a[id]{*/
            /*    background: yellow;*/
            /*    !*存在id属性的元素   a[][]    *!*/
    
            /*}*/
            /*a[id=first]{*/
            /*background: brown;*/
    
            /*!* id=first的元素设定   *!*/
            /*}*/
    
    
            }
            a[href$=png]{
                background: deeppink;
            }
            /*    选中herf中以http开头的元素*/
           /*a[class="links item first"]{*/
           /*    background: red;*/
           /*}*/
    
            /*a[href^=http]{*/
            /*    background: burlywood;*/
            /*!*    选中herf中以http开头的元素*!*/
            /*}*/
    
        </style>
    </head>
    <body>
    <p class="demo">
        <a href="http://www.baidu.com"class=" links item first" id="first">1</a>
        <a href=""class="links item active" target="_blank"title="test">2</a>
        <a href="images/java关键字.png"class="links item ">3</a>
        <a href="images/java关键字.png">4</a>
        <a href="images/java关键字.png">5</a>
        <a href="images/java关键字.png">6</a>
        <a href="images/java关键字.png">7</a>
        <a href="images/java关键字.png">8</a>
        <a href="images/java关键字.png">9</a>
        <a href="images/java关键字.png">10</a>
    
    
    </body>
    </html>
    

    属性选择器是很常用的(标签定位某一个属性)

    选择器是前端当中很重要的部分

    好了,有关css属性选择器就到这里了,谢谢大家

    展开全文
  • CSS属性选择器

    千次阅读 2021-01-12 14:24:21
    CSS选择器主要分为五大类:元素选择器,关系选择器,属性选择器,伪类选择器和伪元素选择器。平时用的最多的是元素选择器和关系选择器,而本文主要讲讲用得比较少的属性选择器。首先亮出本文通用的例子:张三...

    CSS选择器主要分为五大类:元素选择器,关系选择器,属性选择器,伪类选择器和伪元素选择器。平时用的最多的是元素选择器和关系选择器,而本文主要讲讲用得比较少的属性选择器。

    首先亮出本文通用的例子:

    张三(zhangsan)

    刘三姐(liusanjie)

    张明(zhang-ming)

    黎三(lisan)

    李三(sandy lisan)

    无名氏

    接下来分别举例讲讲七大属性选择器。

    一、E[att],筛选具有att属性的元素

    css代码:

    p[name]{ color: #f00;}

    显示结果:

    p[name]

    可以看出,只要具有name属性的元素都会被筛选出来,而不具有name属性的“无名氏”颜色没有变化。

    二、E[att='val'],筛选att属性值为val的元素

    css代码:

    p[name='lisan']{ color: #f00;}

    显示结果:

    p[name='lisan']

    可以看出,只要name属性值为“lisan”的元素都会被筛选出来,而name属性为“sandy lisan”的元素并不会被筛选。

    三、E[att~='val'],属性值为用空格分隔的字词列表,其中一个等于val的元素(包含只有一个值且该值等于val的情况)

    css代码:

    p[name~=lisan]{ color: #f00;}

    显示结果:

    p[name~=lisan]

    可以看出,除了可以筛选出name属性值为“lisan”的元素,name属性值为“sandy lisan”的元素同样也会被筛选出来。

    四、E[att^='val'],筛选att属性值以val开头的元素

    css代码:

    p[name^=zhang]{ color: #f00;}

    显示结果:

    p[name^=zhang]

    可以看出,只要是name属性值以“zhang”开头的元素都会被筛选出来。

    五、E[att$='val'],筛选att属性值以val结尾的元素

    css代码:

    p[name$=san]{ color: #f00;}

    显示结果:

    p[name$=san]

    可以看出,只要是name属性值以“san”结尾的元素都会被筛选出来。

    六、E[att*='val'],筛选att属性值中包含val的元素

    css代码:

    p[name*=san]{ color: #f00;}

    显示结果:

    p[name*=san]

    可以看出,只要是name属性值中包含“san”的元素都会被筛选出来。

    七、E[att|='val'],筛选att属性值以val开头并且其后紧跟着 “-” 的元素

    css代码:

    p[name|=zhang]{ color: #f00;}

    显示结果:

    image.png

    可以看出,只要是name属性值以“zhang”开头并且其后紧跟着 “-” 的元素都会被筛选出来,所以只有“张明”颜色变红,而“张三”颜色不变。

    兼容性:以上七个属性选择器均兼容主流浏览器,IE兼容到IE7,可以放心使用。

    如果你喜欢或者经常使用微信的话,可以关注微信公众号:前端微站(qianduanwz),更多前端干货将第一时间推送给你哦~~

    扫描或长按关注前端微站

    展开全文
  • CSS属性选择器非常神奇,它们可以帮你避免添加数不胜数的类名,从另一方面来指出你代码里的一些问题。但是大家不用慌,虽然属性选择器复杂且强大,但是很易于学习和使用。在这篇文章,我们将讨论它们是如何运行起来...
  • CSS属性选择器详解.pdf

    2022-02-28 15:57:12
    CSS属性选择器详解.pdf
  • web开发——CSS属性选择器.docx
  • CSS属性选择器.pdf

    2022-07-10 12:21:09
    CSS属性选择器.pdf 学习资料 复习资料 教学资源
  • css属性选择器详解.doc

    2020-09-12 11:47:50
    PAGE / NUMPAGES CSS 属性选择器详解 Previous Page Next Page资料个人收集整理勿做商业用途 CSS 2 引入了属性选择器 属性选择器可以根据元素的属性及属性值来选择元素 简单属性选择 如果希望选择有某个属性的元素而...
  • 理解css属性选择器
  • CSS属性选择器 选择以什么开头的类名

     

     

    展开全文
  • 使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值。 从上一节展示的CSS3选择器的图表中,我们可以知道,CSS3的属性选择器主要包括以下几种: E[attr]:只...
  • css系列教程1—选择器全解css属性选择器包括[]是否有某属性,=属性是否等于,~=属性不等于,^=属性值以指定字符串开头,$=属性值以指定字符串结尾,*=属性值等于指定字符串,|=属性值以指定字符串为前缀。...
  • CSS中的属性选择器

    千次阅读 2021-08-09 22:39:56
    CSS3中共有7种属性选择器,具体说明如下: 1.E[attr]:只使用了属性名,并没有确定任何属性值。 2.E[attr="value"]:指定了属性名,并指定了该属性的属性值。 3.E[attr~="value"]:指定了属性名,并指定了该属性...
  • css属性选择器

    千次阅读 2018-12-22 14:01:35
    css属性选择器 对带有指定属性的 HTML 元素设置样式。 可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。 实例: **1.**下面是包含指定值的target属性的元素样式的例子 a[target]{ background...
  • css 常用选择器

    千次阅读 2021-08-04 04:40:25
    在HTML(标准通用标记语言下的一个应用)中,根元素永远是HTMLcss关系选择器:E F{} 选择所有被E元素包含的F元素。选择符将会命中所有符合条件的后代,包括儿子,孙子,孙子的孙子… E>F{} 选择E元素里面的子元素F...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 273,883
精华内容 109,553
关键字:

css属性选择器

友情链接: DTHSIOR.zip