ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

3、CSS选择器

2021-05-10 21:04:47  阅读:17  来源: 互联网

标签:span color 标签 red div 选择器 CSS


目录

一、CSS

层贴样式表:就是给HTML标签添加样式的,让它变的更加的好看

1、注释

# 注释
/*单行注释*/

/*
多行注释1
多行注释2
多行注释3
*/

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...


# css的语法结构
选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

2、引用方式

1.style标签内部直接书写
<style>
    h1  {
        color: burlywood;
    }
</style>

2.link标签引入外部css文件(最正规的方式 解耦合)
<link rel="stylesheet" href="mycss.css">

3.行内式(一般不用)

二、CSS选择器

1、基本选择器

(1).id选择器

<style>

#d1{
color:greenyellow;
}

</style>

/*找到id是d1的标签,将文本颜色变成绿黄色*/

(2).类选择器

<style>

.c1{
color:red;
}

</style>
/*找到class值里面包含c1的标签,将文本颜色变成红色*/

(3).元素/标签选择器

<style>

span{
color:green;
}

</style>
/*找到所有的span标签,将文本颜色变成绿色*/

(4).通用选择器

<style>

*{
color:green;
}

</style>
/*把所有的标签变成绿色,基本用不上,了解即可*/

2、组合选择器

/*在前端 我们将标签的嵌套用亲戚关系来表述层级*/

<div>div
	<p>div p</p>
	<p>div p
		<span>div p span</span>
	</p>
	<span>span</span>
	<span>span</span>
</div>

/*div里面的p span都是div的后代
  p是div的儿子
  p里面的span是p的儿子 是div的孙子
  div是p的父亲*/

(1).后代选择器

div span {
	color: red;
	}
/*div包里所有的标签 改为红色*/

(2).儿子选择器

div>span {
	color: red;
}
/*div次一级别的个 改为红色*/

(3).毗邻选择器

div+span {
	color: red;
}
/*同级别紧挨着的下面的第一个 改为红色*/

(4).弟弟选择器

div~span {
	color: red;
}
/*同级别下面所有的span 改为红色*/

3、属性选择器

/*
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
*/

/*属性选择器是以[]作为标志的*/

/*将所有含有属性名是username的标签背景色改为红色*/
[username] {
	background-color: red;
}

/*找到所有属性名是username并且属性值是jason的标签*/
[username='jason'] { 	
    background-color: orange;
}

/*找到所有属性名是username并且属性值是jason的input标签*/
input[username='jason'] {
	background-color: wheat;
}

4、分组和嵌套

<style>
/*分组,同时为div,p,span的文本都换成红色*/
    div,p,span {
    color:red;
    }

/*嵌套,为id为d1的div内部下class为c2的文本换成红色*/
	#d1 .c2{
    color: red;
	}

</style

/*下面是body的内容*/
<body>
    <div id="d1">div
    <p class="c2">p</p>
    <span id="d3">span</span>
    <span id="d4">span</span>
    </div>
</body>

5、伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    

    <style>
        body {  /*网页背景颜色*/
            background-color: black;
        }
        a:link {  /*访问之前的状态*/
            color: red;
        }
        a:hover {  /*需要记住*/
            color: aqua;  /*鼠标悬浮态*/
        }
        a:active {
            color: black;  /*鼠标点击不松开的状态  激活态*/
        }
        a:visited {
            color: darkgray;  /*访问之后的状态*/
        }
        p {
            color: darkgray;
            font-size: 48px;
        }
        p:hover {
            color: white;
        }

        input:focus {  /*input框获取焦点(鼠标点了input框)*/
            background-color: red;
        }
    </style>
</head>
<body>
<a href="https://www.jd.com/">京东商城</a>
<p>点我并无卵用</p>
<input type="text">
</body>
</html>

6、伪元素选择器

/*可以把第一个变得很大*/
p:first-letter {
    font-size:48px;
    color:orange;
	}

/*在文本开头,用css添加内容,因为是css添加,所以无法选中*/
p:before {
    content: '无坚不摧';
    color: blue;
	}

/*在文本末尾,用css添加内容*/
p:after {
    content: '安如磐石';
    color: orange;
	}

/*before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题*/

7、选择器优先级

"""
id选择器
类选择器
标签选择器
行内式
"""
1.选择器相同 书写顺序不同
就近原则:谁离标签更近就听谁的

2.选择器不同 ...
行内 > id选择器  > 类选择器 > 标签选择器
精确度越高越有效

标签:span,color,标签,red,div,选择器,CSS
来源: https://www.cnblogs.com/poco/p/14752721.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有