CSS3选择器

最新推荐文章于 2022-11-27 17:33:21 发布

七月_M

最新推荐文章于 2022-11-27 17:33:21 发布

阅读量170

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/began2009/article/details/108427465

版权

CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

选择器

每一条CSS样式声明（定义）由两部分组成：

选择器{
    样式;
}

body{
    font-size:12px;
    color:red;	
}

选择器指明了{}中的样式的作用对象，即样式作用于网页中的哪些元素。

标签选择器

即html代码中的标签。

如：为h1标签设置样式。

h1{
    font-weight:normal;
    color:red;
}

类选择器

最常用的选择器。

语法：

.类选器名称{css样式代码;}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<!-- 类选择器使用 -->
<style type="text/css">
.stress{
    color:red;
}

</style>
</head>
<body>
    <h1>勇气</h1>
    <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩
</body>
</html>

ID选择器

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>认识html标签</title>
    <!-- id选择器使用-->
    <style type="text/css">
    #stress {
        color: red;
    }
    </style>
</head>

<body>
    <h1>勇气</h1>
    <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩</p>
   
</body>

</html>

类和ID选择器的区别

1. 在一个HTML文档中，ID选择器只能使用一次，而类选择器可以多次

<p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>

2. 可以使用类选择器此列表方法为一个元素同时设置多个样式，而id选择器不可以

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

子选择器

即大于符号（>），用于选择指定标签元素的第一代子元素（直接后代）。

如：为class名为food下的子元素li设置样式。

.food>li{border:1px solid red;}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
</style>
</head>
<body>
<h1>食物</h1>
<ul class="food">
    <li>水果
        <ul>
        	<li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
    	<ul>
        	<li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>
</body>
</html>

后代选择器

包含选择器，即加入空格，用于选择指定标签下的所有后辈元素。

.first  span{color:red;}

通用选择器

使用一个*指定，作用是匹配html中所有标签元素。

* {color:red;}

伪类选择器

允许给html不存在的标签（标签的某种状态）设置样式。

比如给一个标签元素的鼠标滑过的状态来设置字体颜色：

/* 给a标签的鼠标滑过的状态设置字体颜色变红 */
a:hover{color:red;}

分组选择器

为html中多个标签元素设置同一个样式时使用（,）

/* 为h1和span标签设置同一个样式*/
h1,span{color:red;}

样式的继承

css的某些样式是具有继承性的，即样式不仅应用于某个特定html标签元素，而且应用于其后代。

如给p标签设置颜色样式，这个颜色设置同时也会应用于span标签中的文本。

p{color:red;}

<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

还有一些样式不具有继承性，如border:1px solid red;

选择器的优先级

内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

权值计算

浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

选择器最高级!important

p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

这时 p 段落中的文本会显示的red红色。

样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

七月_M

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3选择器

选择器每一条CSS样式声明（定义）由两部分组成：选择器{ 样式;}body{ font-size:12px; color:red; }选择器指明了{}中的样式的作用对象，即样式作用于网页中的哪些元素。标签选择器即html代码中的标签。如：为h1标签设置样式。h1{ font-weight:normal; color:red;}类选择器最常用的选择器。语法：.类选器名称{css样式代码;}<!D
复制链接

扫一扫

专栏目录