CSS基本使用，基本选择器，组合选择器

最新推荐文章于 2023-02-16 09:40:27 发布

水寅569

最新推荐文章于 2023-02-16 09:40:27 发布

阅读量284

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/lzslzslzs857857/article/details/122800600

版权

1.CSS的基本使用

1.1.CSS的定义：

选择器名{

属性名：属性值；

属性名：属性值;

......

}

注意点：

1.声明需要使用{}括起来,每个声明以分号“;”结尾

2.一行建议一个声明

3如果样式的属性值由多个单词组成，则用引号引起来

1.2.CSS的注释

/*注释内容*/

1.3.CSS的三种使用方式：

1.行内样式：直接写在标签上，在标签上通过style属性定义的样式.

2.内部样式：定义在style标签中的样式，style标签一般设置在head中

3.外部样式：定义在外部的CSS文件中通过link标签引入

注意：当有多重样式时，越精准越优先（就近原则）

2.CSS选择器

2.1.基本选择器

2.1.1.通用选择器

选择所有

* {

属性名:属性值；

...

}

* {

    color:orange;

}

2.1.2.元素选择器

选择指定标签

元素名/标签名{

属性名:属性值；

...

}

p {

        color:red;

        font-size:20px;

}

2.1.3.ID选择器

选择设置过指定id属性值的元素 #

#id属性值{

属性名:属性值；

...

}

#p1{
    font-weight: bold;
}
/*相应标签中要有“id="p1"”*/

2.1.4.类选择器

选择设置过指定claass属性值的元素<font color="red"></font>

.class属性值{

属性名:属性值；

...

}

.hidden{
    display:none;
}
/*相应标签中要有“class="hidden"”*/

2.1.5.分组选择器

当几个元素样式属性一样时，可以共同调用同一个声明，元素之间用逗号分割

选择器1,选择器2,选择器3...{

属性名:属性值；

...

}

h2 , #pre1{
    color: orange;
    font-style: italic;
}

CSS样式的优先级，是根据选择器的精确度/权重来决定的，常见的权重如下，权重越大，优先级越高

元素选择器：1

类选择器：10

id选择器：100

内联选择器：1000

2.2.组合选择器

2.2.1.后代选择器（派生选择器）：选择指定元素的所有指定后代元素，以空格隔开

选择器指定元素{

属性名：属性值

......

}

<style>
    .food{
        border: 1px  solid red;
    }
</style>
<!--获取class属性值时food的元素的所有对应的li列表项-->
<body>
        <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>

2.2.2.子元素选择器:选择指定元素的第一代子元素，以大于号>隔开

选择器 > 指定元素{

属性名：属性值

......

}

2.2.3.相邻兄弟选择器：选择指定元素的下一个指定元素（只会找一个），两者有相同的父元素以加号+隔开

选择器 + 指定元素{

属性名：属性值

......

}

<style>
    #myid + div{
		background-color: #808080;
	}
</style>
<body>
    <div>相邻兄弟选择器1</div>
	<div id="myid">相邻兄弟选择器2</div>
	<div>相邻兄弟选择器3</div>
	<div>相邻兄弟选择器4</div>
</body>

<style>
    #myid + div{
		background-color: #808080;
	}
</style>
<body>
    <div>相邻兄弟选择器1</div>
	<div id="myid">相邻兄弟选择器2</div>
    <p>GVHBJNMK</p>
	<div>相邻兄弟选择器3</div>
	<div>相邻兄弟选择器4</div>
</body>
<!--则没有哪一行被选中-->

2.2.4.普通兄弟选择器：选择指定元素后面的的所有指定元素（只会找一个），两者有相同的父元素以波浪号~隔开

选择器 ~ 指定元素{

属性名：属性值

......

}