Html学习之八(CSS选择器的使用--属性选择器)

一、前缀属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择器的使用(前缀)</title>
        <style type="text/css">
            p[id^=one]{
                font-family: "微软雅黑";
                font-size: 16px;
                color: red;
                text-indent: 2em;
            }
        </style>
    </head>
    <body>
        <p id="one">
            为了看日出,我常常早起。那时天还没有大亮,周围非常清静,船上只有机器的响声。
        </p>
        <p id="two">
            天空还是一片浅蓝,颜色很浅。转眼间天边出现了一道红霞,慢慢地在扩大它的范围,加强它的亮光。我知道太阳要从天边升起来了,便转眼地望着那里。
        </p>
        <p id="one1">
            果然过了一会儿,在那个地方出现了太阳的小半边脸,红是真红,却没有亮光。这个太阳好象负着重荷似地一步一步、慢慢地努力上升,了最后,终于冲破了云霞,完全跳出了海面,颜色红得非常可爱。一刹那间,这个深红的圆东西,忽然发出了夺目的亮光,射得人眼睛发,它旁边的云片也突然有了光彩。
        </p>
        <p id="two1">
            有时太阳走进了云堆中,它的光线却从云里射下来,直射到水面上。这时候要分辨出哪里是水,哪里是天,倒也不容易,因为我就只看见片灿烂的亮光。
        </p>
    </body>
</html>

结果:

二、后缀属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择器的使用(后缀)</title>
        <style type="text/css">
            p[id$=main]{
                font-family: "微软雅黑";
                font-size: 16px;
                color: red;
            }
        </style>
    </head>
    <body>
        <p id="old1">
            盼望着,盼望着,东风来了,春天的脚步近了。
        </p>
        <p id="old2">
            小草偷偷地从土里钻出来,嫩嫩的,绿绿的。园子里,田野里,瞧去,一大片一大片满是的。坐着,躺着,打两个滚,踢几脚球,赛几趟,捉几回迷藏。风轻悄悄的,草绵软软的。
        </p>
        <p id="oldmain">
            桃树、杏树、梨树,你不让我,我不让你,都开满了花赶趟儿。红的像火,粉的像霞,白的像雪。花里带着甜味,闭了眼,树上仿佛已经是桃儿、杏儿、梨儿!花下成千成百的蜜蜂嗡嗡地闹着……
        </p>
        <p id="newmain">
            “吹面不寒杨柳风”,不错的,像母亲的手抚摸着你。风里带来些新翻的泥土的气息,混着青草味,还有各种花的香,都在微微润湿的空气酝酿。鸟儿将窠巢安在繁花嫩叶当中,高兴起来了……
        </p>
    </body>
</html>

结果:

三、包含属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择器的使用(包含)</title>
        <style type="text/css">
            p[id*=demo]{
                font-family: "微软雅黑";
                font-size: 16px;
                color: red;
            }
        </style>
    </head>
    <body>
        <p id="demo1">
             我们消受得秦淮河上的灯影,当四月犹皎的仲夏之夜。
        </p>
        <p id="main1">
             在茶店里吃了一盘豆腐干丝,两个烧饼之后,以至歪的脚步踅上夫子庙前停泊着的画访,就懒洋洋到躺到藤椅上去了。好郁蒸的江南,傍也还是热的。"快开船罢!"桨声响了。
        </p>
        <p id="newdemo">
             小的灯舫初次在河中荡漾;于我,情景是颇朦胧,滋味是怪羞涩的。我要错认它作七里的山塘;可是,河房里明窗洞启,映着玲珑入画的栏干,顿然省得身在何处了……
        </p>
        <p id="olddemo">
             又早是夕阳西下,河上妆成一抹胭脂的薄媚。是被青溪的姊妹们所薰染的吗?还是匀得她们脸上的残脂呢?寂寂的河水,随双桨打它,终没言语。密匝匝的绣恨逐老去的年华,已都如蜜饧似的融在流波的心窝里、连呜咽也将嫌它多事,更哪里论到哀嘶……
        </p>
    </body>
</html>

结果:

原文地址:https://www.cnblogs.com/lsm-boke/p/10629510.html

时间: 2024-10-06 05:38:33

Html学习之八(CSS选择器的使用--属性选择器)的相关文章

css备忘:id选择器的权重&gt;class选择器的权重=属性选择器的权重&gt;元素选择器

最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测试文字显示黄色,标签选择器的结果被属性选择器覆盖了,起作用的是属性选择器 结论:id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器(id选择器和class选择器可以自行验证), 一般相等权重的按位置覆盖,不同权重的选择器,位置变了也不会覆盖 原文地址:https://www.c

css笔记04:属性选择器

1.属性选择器: 带有 title 属性的所有元素设置样式: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <style type="text/css"> 5

css不常用的属性选择器 当然会有他的用武之地

属性选择器可以 使用的情况是上面 这几种[attr] 只有这个属性的标签被选取[attr=value] 属性等于固定值的属性 完全等于[attr~=value] 属性约等于值 即空格分隔开的部分能选取到 空格分隔开的~[attr|=value] 是指属性值中用-连接的部分标签能选取到 包含用-连接的[attr^=value] 是指属性以什么部分开头的标签能选取到 以什么开头的属性值 [attr$=value] 是指属性以什么部分结尾的标签能选取到 以什么结尾的属性值[attr*=value] 是

jQuery选择器,筛选器,属性选择器

jQuery jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互,能够极大地简化JavaScript编程.它的宗旨就是:“Write less, do more.“ jQuery的优势 一款轻量级的JS框架.jQuery核心js文件才几十kb,不会影响页面加载速度. 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻

前端学习 -- Html&amp;Css -- 条件Hack 和属性Hack

条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keywords> if条件共包含6种选择方式:是否.大于.大于或等于.小于.小于或等于.非指定版本 是否: 指定是否IE或IE某个版本.关键字:空 大于: 选择大于指定版本的IE版本.关键字:gt(greater than) 大于或等于: 选择大于或等于指定版本的IE版本.关键字:gte(greater th

【html】学习记录-CSS的column相关属性

column相关属性: column-count:定义内容以多列形式显示 column-gap:定义每列之间的间距 示例: <section class="fourcolumn"> 人类或其他任何活着的个体,在生命之初不是放弃,不是自我唾弃,也不是对自己的存在进行诅咒.那些都是需要一个腐败和堕落的过程的,这一腐败的速度因人而异.有些人刚碰到压力便放弃了:有些人出卖和背叛了自己的意识:有些人不知不觉地慢慢熄火了,却从不知道自己何时已经失去了这种意识.然后,长者们蜂拥而上,百折

【html】学习记录-CSS的media queries属性

使用media queries属性可以根据浏览器的宽度自动选择激活需要的CSS定义:         其基本格式如下: @media screen and (min-width: 600px){ /* 即当屏幕宽度大于等于600px时触发此CSS定义 */ ... } @media screen and (max-width: 599px){ /* 即当屏幕宽度小于等于599px时触发此CSS定义 */ ... } 示例: <div class="container"> &

CSS基础学习-14 CSS visibility与overflow属性

原文地址:https://www.cnblogs.com/songsongblue/p/11047873.html

深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选择器和条件属性选择器三种.本文将详细该部分内容 简单属性选择器 [attribute] [attribute]选择器选择拥有该属性的元素,返回集合元素 //选择拥有title属性的所有元素 $('[title]') //选择拥有title属性的所有span元素 $('span[title]') //