前端——css选择器

时间：2020-05-12 19:20:08 收藏：0 阅读：57

CSS样式

css的三种引入方式

<!--1、行内css（一般不使用）-->
<h1 style="color: green">老板好 要上课吗?</h1>

<!--2、内部css-->
<style>
    h1 {
        color: red;
    }
</style>

<!--3、外部css(最正规方式 解耦合)-->
<link rel="stylesheet" href="mycss.css">

CSS选择器

基本选择器

id选择器

#d1 { /*找到id为d1的标签，将其文本颜色变成绿色*/
    color: green;
}

类选择器

.d1 { /*找到class为d1的标签，将其文本颜色变成黄色*/
    color: yellow;
}

元素选择器

span { /*将所有的span标签找到，并将其文本颜色变成粉色*/
    color: pink;
}

通用选择器

* { /*将所有标签找到，并将其文本颜色变成黑色*/
    color: black;
}

组合选择器

/*
 在前端 我们将标签的嵌套用亲戚关系来表述层级
	<div>
        <p>儿子1</p>
        <p>儿子2
            <span>孙子1</span>
        </p>
        <span>儿子3</span>
        <span>儿子4</span>
  	</div>
	<span>毗邻</span>
  div里面的p span都是div的后代
  p是div的儿子
  p里面的span是p的儿子 是div的孙子
  div是p的父亲
*/

后代选择器

div p { /*找到div下的所有p标签，将其颜色变成红色*/
    color: red;
}

儿子选择器

div>p { /*找到div下一级中的所有p标签，且使其文本颜色变为绿色*/
    color: green;
}

毗邻选择器

div+span { /*将与div同一级别的且紧挨着div的span标签的文本颜色变为蓝色*/
    color: blue;
}

弟弟选择器

/*弟弟选择器*/
div~span {  /*将与div同级别的且在div下面的所有span标签的文本颜色变为红色*/
	color: red;
}

属性选择器

/*
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
*/
<style>
    [username] { /*将所有含有属性名是username的标签背景色改为红色*/
		background-color: pink;
    }

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

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

<body>
    <input type="text" username>
    <input type="text" username="jason">
    <input type="text" username="kevin">
    <p username="tank">水箱老师</p>
    <div username="egon">矮子老师</div>
    <span username="jason">jason老师 </span>
</body>

原文：https://www.cnblogs.com/guanxiying/p/12877699.html