前端学习 -- Css -- 属性选择器

属性选择器：根据元素的属性选择指定元素

语法：[属性名] 选取含有指定属性的元素

[属性名="属性值"]：选取属性值等于指定值的元素
[属性名^="属性值"]：选取属性值以指定内容开头的元素
[属性名$="属性值"]：选取属性值以指定内容结尾的元素
[属性名*="属性值"]：选取属性值中包含指定内容的元素

demo:(注：这么尴尬的诗句肯定不是我写的)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /*[属性名="属性值"]：选取属性值等于指定值的元素*/
            h2[title="abcde"]{
                color: red;
            }
            /*[属性名^="属性值"]：选取属性值以指定内容开头的元素*/
            h3[title^="o"]{
                color: green;
            }
            /*[属性名$="属性值"]：选取属性值以指定内容结尾的元素*/
            h4[title$="c"]{
                color: blue;
            }
            /*[属性名*="属性值"]：选取属性值中包含指定内容的元素*/
            h1[title*="df"]{
                color: blue;
            }
        </style>
    </head>
    <body>
        <!--
            作者：[email protected]
            时间：2017-03-18
            描述：title是当鼠标移上去，悬浮在上面的内容
        -->
       <h1 title="dfc">致女儿书</h1>
       <h2 title="abcde">煲汤比写诗重要 </h2>
       <h3 title="opq">自己的手艺比男人重要 </h3>
       <h4 title="cde">胸和腰和屁股比脸蛋重要 </h4>
       <h5>内心强大到混蛋 </h5>
       <h6>比什么都重要 </h6>
       <br />
       <br />
        <h1 title="cde">致女儿书</h1>
       <h2 title="opq">煲汤比写诗重要 </h2>
       <h2 title="abcde">自己的手艺比男人重要 </h2>
       <h4 title="abc">胸和腰和屁股比脸蛋重要 </h4>
       <h5>内心强大到混蛋 </h5>
       <h6>比什么都重要 </h6>
       <br />
       <br />
       <h1 title="cde">致女儿书</h1>
       <h1 title="dfdf">致女儿书</h1>
    </body>
</html>

效果图：

时间： 2024-10-11 05:43:58

前端学习 -- Css -- 属性选择器的相关文章

CSS学习_属性选择器

CSS选择器参考 [attribute]--选取带有指定属性的元素: [attribute=value]--选取带有指定属性和值的元素: [attribute~=value]--选取属性值中包含指定词汇的元素: [attribute|=value]--选取带有以指定值开头的属性值的元素,该值必须是整个单词: [attribute^=value]--匹配属性值以指定值开头的每个的元素: [attribute$=value]--匹配属性值以指定值结尾的每个的元素: [attribute*=value

IE7浏览器下CSS属性选择器二三事

一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货色,研究的多半是两个浏览器共性的东西,比方说haslayout之类的. 但是,最近1~2年,至少我个人所从事的桌面PC项目都不需要管IE6浏览器(0.3%)了,但是,还是要关心IE7浏览器(3%+)的.虽然,我们有丰富的处理IE6浏览器的经验,但是,当我们不要管IE6浏览器的时候,我们前端技术的选型

CSS属性选择器

属性选择器 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="./css/属性选择器.css&qu

css 属性选择器笔记

1.基本选择器: eg: *{margin:0;padding:0} p{color:black} .content{background:red;} #intro{padding-left:2em;} 2.多元素组合选择器 div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } h2 + p { color:#f00; } 三.CSS

CSS属性选择器温故-4

1.属性选择器就是通过元素属性来找到元素 2.属性选择器语法 CSS3遵循了惯用的编码规则,通配符的使用提高了样式表的书写效率,也使CSS3的属性选择器更符合编码习惯 3.浏览器兼容性 CSS选择器总结:CSS选择器和jQuery的选择器非常相似,学好CSS选择器会让我们学习jQuery事半功倍

前端学习——css(初级)

1.Css盒模型(box model) web开发中,html的每个元素都是盒子,盒子可以装内容(content).可以有填充物(padding).有外壳(border) 和外保护层(margin) .下图为控制台中的盒子详解:浏览器的控制台是我们了解一个元素最好的一个工具,下图可以清晰的看出一个盒子所拥有的属性. 元素的实际宽高上图可清晰的看出元素实际的宽=border-left+padding-left+元素内容宽+padding-right+border-right 元素实际的高=b

CSS 属性选择器(八)

一.属性选择器属性选择使用中括号进行标识,中括号内包含属性名,属性值或者属性表达式如h1[title],h1[title="Logon"], 二.属性选择器分类 2.1.匹配属性名 [class]{color:red} 作用于任何带有class属性的元素,不管理class的值是什么,也可以是其它元素的所有合法属性如: img[alt]{border:none}; 上面这个会作用于所有带有alt属性的img元素 a[href][title]{font-weight:bold};作用于

CSS 属性选择器详解

CSS 2 引入了属性选择器. 属性选择器可以根据元素的属性及属性值来选择元素. 简单属性选择如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器. 例子 1 如果您希望把包含标题(title)的所有元素变为红色,可以写作: *[title] {color:red;}

第45篇 CSS属性选择器

1,内置函数复习 1.1 reduce #reduce 从可迭代对象里面不断的取值累加 from functools import reduce li = [1,2,3,4,5,6] ret = reduce(lambda x,y:x+y,li) print(ret) res = reduce(lambda x,y:x+y,range(1,101)) print(res) 1.2 sorted 1.2.1 按照年龄进行排序 li = [ {'name':'gold','age':'40'}, {