css-选择器

最新推荐文章于 2024-08-09 20:26:21 发布

crystal_iwwish

最新推荐文章于 2024-08-09 20:26:21 发布

阅读量69

点赞数

分类专栏：前端学习之CSS 文章标签： css

本文链接：https://blog.csdn.net/crystal_iwwish/article/details/118276887

版权

前端学习之CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

关于选择器

基础选择器	复合选择器
标签选择器	后代选择器
类选择器	子元素选择器
id选择器	交集选择器
通配符选择器	并集选择器
	伪类选择器

标签选择器

标签名{
属性1：属性值；
....

}
例如：

h3{
   font-family="黑体"
}

类选择器_{差异化选择,一个或多个}

当只选择一种类的时候：
. 类名{
属性1：属性值
}

.red{
     font-family="";
}

<div class="red">类选择器</div>

多类选择器

<span class="more less">多类选择器</span>

注：1.多类选择器中，各个类名之间用空格分割；
2.在一个标签内部只能由一个class；

id选择器

#id名{
属性1=属性值；
}

#ss{
   font-family="黑体"； 
}

<p id="ss">id选择器</p>

通配符选择器_{会降低页面响应速度，不建议随便使用}

*{
属性：属性值；
}

*{/*选择所有的标签*/
   font-family="黑体"；
}

后代选择器_{又称为包含选择器}

例如：

<div class="nav">
    <a href="#">后代选择器</a>
</div>

.nav a{
   font-family="黑体"；
}

子元素选择器_{只能选择作为某元素子元素的元素。}

例如：选择只能作为div元素子元素的strong元素

div > strong{
       color:red;
}

交集选择器

例如：

<head>
	<title>交集选择器</title>
<style>
        p.para1{
            color: red;
        }
    </style>
<head>
<body>

<p>交集选择器</p>
<p>交集选择器</p>
<p class="para1">交集选择器</p>
<p class="para1">交集选择器</p>
<p>交集选择器</p>

</body>

显示如下：
在这里插入图片描述

并集选择器

<title>并集选择器</title>
<style>
        .ht,.para{
            color: red;
        }
    </style>
<head>
<body>

<h1 class="ht">并集选择器</h1>
<p class="para">并集选择器<p>
<p>并集选择器<p>
<p>并集选择器<p>
<p>并集选择器<p>

显示如下：
在这里插入图片描述

兄弟选择器_{可选择紧接在另一元素后的元素，且二者有相同父元素}

例如：如果要增加紧接在 h1 元素后出现的段落的上边距

h1 + p {
       margin-top:50px;
       }

伪类选择器_{向某些选择器添加特殊效果}

分为两种：链接伪类和结构伪类
关于链接伪类：

a:link	未访问时所显示的样式
a:visited	已访问后显示的样式
a:hover	鼠标移动到该位置时的样式
a:active	选定链接的样式(既按下鼠标没有松开时的样式)

注：顺序不要颠倒按照以上顺序