css3学习笔记（一）选择器

txmmy

已于 2023-09-26 10:19:58 修改

阅读量47

点赞数

文章标签： css

于 2023-09-22 14:32:13 首次发布

本文链接：https://blog.csdn.net/txmmy/article/details/133170076

版权

部分出处：https://www.cnblogs.com/wangshen31/p/7911657.html

文章目录

1. 选择器

官方文档

中文文档

1.1 类选择器

写法
.类名或 [class~=类名] （优先级不等价）
示例

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All <li> elements with class="spacious" */
li.spacious {
  margin: 2em;
}

/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

在这里插入图片描述

1.2 ID选择器

写法
#id 或 [id=id] （优先级不等价）

1.4 属性选择器

参考文档

1.5 后代(嵌套)选择器

参考文档

1.6 通配选择器

1.3 伪类选择器

<html>
    <head>
        <style type="text/css">
        q:lang(smile){
            quotes:"o(*￣▽￣*)ブ""~"//这里定义了将smile转换的符号
        }
        </style>
    </head>
    <body>
        好吧，展示一个笑脸
        <p>博君一笑<q lang="smile">祝你愉快</q></p>
    </body>
</html>
复制代码

在这里插入图片描述

1.4 外部样式

导入外部样式表（导入样式要放在样式规则前面定义）

<style>
 @import url("css/style.css")
 	body {
		background: red;
	}
</style>

注意，class选择器可以被用于多个对象被设定成同种css样式的情况。
<h2 class="style1">
<h3 class="style1">是可以的

Id选择器则只能用于一个对象
<h2 id="style1">
<h3 id="style2"> 是不可以的

给选择器命名的时候，不能使用数字开头，必须以字母或者下划线开头）
3.1 id派生选择器

#text p{
Color:blue;
}
/* 表明样式表只将作用于text对象中所有p标签下的内容*/
<p id="text">….</p>

HTML选择器

<html>
    <head>
        <title>HTML选择器的使用</title>
        <style type="text/css">
        h1{
            color:#555555;
            font-size:2.3em;
            font-family:微软雅黑;
        }    
        </style>
    </head>
    <body>
        <h1>HTML选择器的使用<h1>
    </body>
</html>

派生选择器

<html>
    <head>
        <title>派生选择器的使用</title>
        <style type="text/css">
        h1 h2{
            color:red;
            font-size:1em;
            font-family:黑体;
        }    
        </style>
    </head>
    <body>
        <h1>HTML选择器的使用<h1>
        <h2>HTML选择器的使用</h2>
        <h1><h2>HTML选择器的使用</h2></h1>  
        <h1>其他文本内容<h2>HTML选择器的使用</h2>其他文本内容</h1>   <!--对“选择器的使用”起作用-->
 </body> </html>

2.优先级

参考链接

!important>内联样式>ID选择器>类选择器=属性选择器([type=“text”]{…})=伪类选择器>标签选择器>通用选择器(*)

<div id=''father">
	<div class="aa"> 1111</div>
	<div class="bb">111</div>
</div>
#father div{color:red;}
.aa{color:blue;}
.bb{color:blue !important;}