当前位置：首页 > article >正文

前端零基础学习Day-Six

article 2024/11/8 10:02:45

CSS选择器

标签选择器

以HTML标签作为选择器：

<style type="text/css">
p,h1,h2,h3,h4{font-size:30px;}
p{
    color:blue;
    font-family:"隶书";}
h1{color:red;}
</style>

通过标签选择器设置样式，那使用该标签的内容都引用该样式

类选择

为html标签添加class属性(class的值区分大小写)：

<h1 class="red">内容1</h1>
<p class="red">内容2</p>

通过类选择器来为具有此class属性的元素设置CSS样式：

<style type="text/css">
    .red{color:red;}
</style>

只要通过class属性引用类选择器设置的样式，那该标签引用相应样式

可对不同类型元素的同一个名称的类选择器设置不同的样式规则：

p.red{font-size:50px;}
h1.red{font-size:20px;}

同一个元素可以设置多个类，之间有空格隔开：

<p class="red fsize">内容</p>

ID选择器

为HTML标签添加ID属性(id的值区分大小写)：

<p id="p1">内容1</p>

通过id选择器来为具有此ID的元素设置CSS规则：

#p1{color:red;}

同一个html文件下面，每一个id是唯一的

全局选择器

所有标签设置样式：

*{
    color:blue;
    ......
}

群组选择器

集体统一设置样式：

p,h1,h2,h3,h4{font-size:30px;}
p.special,#three,h5{font-size:50px;}

后代选择器

<p><em>CSS</em>层叠样式</p>
<p><em>CSS</em>层叠样式</p>

使用后代选择器设置，之间用空格隔开：

p em{font-size:40px;}
p a em{......}/*p标签中a标签中的em标签*/
#p1 em{......}/*id为p1的标签中的em标签*/

<h1 class="special"><em>CSS</em>是什么</h1>
/*为了只给这个h1标签下的em设置样式，可以加上class属性*/
h1.special em{color:orange;}

nth-child()选择器

匹配属于其父元素的第N个子元素，不论元素的类型；其中n可以是数字、关键词或公式
n为odd和even时可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是1，即元素的下标是从1开始的
注意：IE不支持nth-child()选择器
写法: .class:nth-child(2){}

伪类

伪类选择器定义特殊状态下的样式
无法用标签、id、class及其他属性实现

链接伪类

4种状态：激活状态（点鼠标未松开的状态）、已访问状态、未访问状态、鼠标悬停状态

伪类	说明
:link	未访问的链接
:visited	已访问的链接
:hover	鼠标悬停状态
:active	激活的链接

<style type="text/css">
    a:link{color:black;}
    a:visited{color:gray;}
    a:hover{color:green;}
    a:active{color:orange;}
</style>

链接伪类的顺序：:link>:visited>:hover>:active

说明：

1.a:hover必须置于a:link和a:visited之后才有效

2.a:active必须置于a:hover之后才有效

3.伪类名称对大小写不敏感

hover和active这两个伪类可以用于其他元素上面：

        p:hover{color:red;}
        p:active{font-size: 50px;color:blue;}

hover和active兼容：
- IE6及更早版本，支持<a>元素的4种状态
- IE6浏览器不支持其他元素的:hover和:active
多个a标签可以设置class属性来设置不同样式

        a.one:link{color:black;}
        a.one:visited{color:gray;}
        a.one:hover{color:green;}
        a.one:active{color:orange;}
        a.two:link{color:black;}
        a.two:visited{color:gray;}
        a.two:hover{color:green;}
        a.two:active{color:orange;}

        p a:link{color:black;}
        p a:visited{color:gray;}
        p a:hover{color:green;}
        p a:active{color:orange;}
        div a:link{color:black;}
        div a:visited{color:gray;}
        div a:hover{color:green;}
        div a:active{color:orange;}