[第五季]14.属性选择器和伪类伪元素

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

①创建百度和腾讯文本链接,设置a标记为无下划线,字体大小为100px.
②设置鼠标放到链接上,文字变粗体.
③创建一个input,设置放到文本框上,背景颜色变成蓝色.
④设置p标签在夫容器中第一次出现时背景变成蓝色.
⑤设置div标签里lang为en的字为粗体.

5.自测代码

2.课堂笔记

1.
(1)说明一下下面的内容
例如，假设希望将指向 Web 服务器上某个指定文档的超链接变成红色

，可以这样写：
a[href="http://www.w3school.com.cn/about_us.asp"] {color: 

red;}

例子 2
与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择

一个文档。
a[href="http://www.w3school.com.cn/"][title="W3School"] 

{color: red;}


[attribute]         用于选取带有指定属性的元素。
[attribute=value]   用于选取带有指定属性和值的元素。

[attribute~=value] 用于选取属性值中包含指定词汇的元素。

p[title~="张"]

[attribute|=value]  用于选取带有以指定值开头的属性值的元素

，该值必须是整个单词。

p[title|="Test"] Test it(必须累似与此)

[attribute^=value]  匹配属性值以指定值开头的每个元素。

p[title^="Test"] Testit 或者是 Test it(不要求单词,只要以Test开

始的就可以)

[attribute$=value] 匹配属性值以指定值结尾的每个元素。

[attribute*=value]  匹配属性值中包含指定值的每个元素。

2.伪类选择器和伪元素选择器

根据元素的特殊状态来选取元素（伪类）
根据元素中特别的内容（伪元素）

伪类和伪元素的表示形式也使用“:”（英文冒号）与其它选择器相区

分

(1)各个状态
:link

伪类将应用于未被访问过的链接，与:visited互斥。

:hover

伪类将应用于有鼠标指针悬停于其上的元素。

:active

伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。

:visited

伪类将应用于已经被访问过的链接，与:link互斥。

需要注意的是在CSS的定义中，同一个元素的:hover必须位

于:link、:visited之后才能生效，:active必须位于:hover之后才能生

效。


顺序问题: :link、:visited、:hover、:active


1)创建连接
<a href="http://www.baidu.com title="百度网站">百度网站</a>
<a href="http://www.qq.com" title="腾讯">腾讯</a>
2)设置a标记样式为无下划线
a
{
    text-decoration:none;
    font-size:100px;
}
3)当鼠标鼠标放到上面去,文字编程粗体
:link=没有放过是什么样的
:visited=访问过后
:hover=鼠标放在上面
:active=按下去的时候是什么样子的
伪类只要用在a标签的

还有其他的都了解一下就好了
:focus

伪类将应用于拥有键盘输入焦点的元素。

:first-child

伪类将应用于元素在页面(或者在父容器)中第一次出现的时候。

:lang

伪类将应用于元素带有指定lang的情况。

(2)当光标放在文本框上,背景编程blue颜色的
姓名:<input type="text"><br />
学号:<input type="text"><br />


css
input[type="text"]:focus
{
    background-color:yellow;
}


3.child
first-child在父容器中第一次出现的时候
(1)第一次出现的p标记行会出现黄色
<p>hello</p>

p:first-child
{
    background-color:red;
}

4.lang类似于打一个标记
(1)来一个div
(2)div属性lang="en"
<div lang="en">英文</div>
<div lang="cn">中文</div>

div:lang(en)
{
    font-weight:bold;
}

3.课程效果图

1.代码

a
{
    text-decoration:none;
    font-size:100px;
}

a:hover
{
    font-weight:bold;
}

input[type="text"]:focus
{
    background-color:yellow;
}

p:first-child
{
    background-color:red;
}

div:lang(en)
{
    font-weight:bold;
}