[第五季]13.后代选择器和属性选择器

最新推荐文章于 2022-01-11 14:25:53 发布

原创最新推荐文章于 2022-01-11 14:25:53 发布 · 325 阅读

0 ·

CC 4.0 BY-SA版权

007 HTML&CSS 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了CSS中后代选择器及属性选择器的应用实例，包括如何通过特定属性选择元素并改变样式，展示了不同标签和属性组合的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

哦,我懂你意思了.
1.多行标签的规定
①h1两行字:白日依山尽
②h1里面在em一行字:黄河入海流.
③样式里面规定有h1和em的,颜色编程红色.
2.div里有a类的(这个有点特殊难以理解)
也是和第一一样空格并列
3.标签里面的属性规定
这个方括号并列,没有先后顺序

5.自测代码

哦,我懂你意思了.
1.多行标签的规定
①h1两行字:白日依山尽
②h1里面在em一行字:黄河入海流.
③样式里面规定有h1和em的,颜色编程红色.

<p><h1>白日依山尽<em>黄河入海流</em></h1></p>


有图有真相
2.div里有a类的(这个有点特殊难以理解)
也是和第一一样空格并列

<div>
<p><h1 class="a">白日依山尽<em>黄河入海流</em></h1></p>
<p><h1>白日依山尽<em>黄河入海流</em></h1></p>
</div>

div .a em
{
    color:red;
    font-size:100px;
}

有图有真相

3.标签里面的属性规定
这个方括号并列,没有先后顺序
最后一个不弄了,类似的.

这里写图片描述

2.课堂笔记

1.后代选择器
类(.),ID（#），标签选择器
(1)如果h1里面有em标签,就把字体颜色改成红色.
h1 em  {color:red;}
(2)再去做样式表
<body>
<h1>第一行</h1>
<h1>第二行<em>这是测试文字</em></h1>
</body>

CSS文件
h1 em
{
    color:red;
}
(3)这个例子没做测试
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
(4)div里面 是a类的元素的 背景变成蓝色
div .a {background:blue;}

<div>
<h1>第二行<em>这是测试文字</em></h1>
<br><div>这是测试文字</div></br>
<p class="a">你好!</p>
<div class="b">你好!</div>
<div class="a">你好!</div>
</div>

同时设置div
div .a
{
    background-color:blue;
}
2.属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。


例子 1
如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}

*=通配符.

(1)设置带title的所有文字都变成红色
<body>
<p title="你好">第一段文字</p>
<p>第二段文字</p>
</body>

*[title]
{
    color:red;
}
(2)和例子1是一样的

例子 2
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}

(3)还可以根据多个属性进行选择

例子 3
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置

为红色，可以这样写：
a[href][title] {color:red;}


<br/> = <br></br> = 自封闭标签



首先设置这个
<body>
<a href="http://www.baidu.com" title="百度百度">百度百度

</a><br />
<a href="http://www.qq.com"[]>腾讯</a><br />
</body>

在设置css

a[href][title]
{
    color:blue;
}


到这里就基本明白写法的意思了,并且标签是不讲究顺序了

3.课程效果图

这里写图片描述

1.代码

h1 em
{
    color:red;
}

div .a
{
    background-color:blue;
}


*[title]
{
    color:red;
}

a[href][title]
{
    color:blue;
}