- CSS 选择符(也称:选择器)
- 元素选择器
- 关系选择器
- 属性选择器
- 伪类选择器
- 伪对象选择器
- 元素选择器
- 通配符 :*{ }———用处:初始化,如内、外边距设置为0
- 类选择符 : .类名称{ }
- ID选择符 : #类名称{ }
- 类型选择符 (标签选择符) :标签{ }
- 关系选择器
- 子元素选择符 :父亲 > 儿子,⚠️不包括其孙子
- 兄弟选择符 :你自己~你的兄弟,⚠️就是同级别的标签,效果是:⚠️1、自己不起作用;2、它对向上的元素没有效果;
- 相邻选择符 :E +F,⚠️同级别的相邻的元素。语法:元素+元素。选择紧贴在E元素后的F元素
- 包含选择符 :E F ,⚠️就是选择它所有的子元素,包括孙子及孙子的孙子.语法:元素E和元素F用空格隔开。
例:
div >p{ color: red; } p~p{ color:red; } p~h3{ color:red; } p+p{ color:blue; } ol li{ color: green; }
- 属性选择器
-
-
- 当前元素[属性]{ }。 例: <style>
a[href]{
color: red; 属性选择器的写法
}
</style>
</head>
<body>
<a href="#"> hahha </a> -- 变色
<a> eieieeiei </a> ----- 不变色 - 当前元素[属性=“属性值”]{ }。例:<style>
a[href="www.baidu.com"]{
font-size: 50px;
color: green;
}
</style>
<a href="www.baidu.com"> 百度一下</a>
<a href="www.baidu2.com"> 百度一下2</a>
<a href="www.baidu3.com"> 百度一下3</a>
<a href="www.baidu4.com"> 百度一下4</a>
<a href="www.baidu4.com"> 百度一下5</a>
- 当前元素[属性]{ }。 例: <style>
-
- 伪类选择器
- 定义:它允许给html标签的某种状态设置样式。
1)元素link :设置超链接a在未被访问前的样式;
2)元素visited :设置超链接a在其链接地址已被访问过时的样式;(避免二次访问)
3)元素hover :设置元素在其鼠标悬停时的样式;
4)元素active :设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。鼠标点下并未释放时的状态。
例:
<head> <meta charset="UTF-8"> <title>伪类选择符</title> <style> *{ margin: 0px; padding: 0px; } ul li a{ font-size: 50px; } ul li a:link{ color:red ; } ul li a:visited{ color:blue; } ul li a:hover{ color:green ; } ul li a:active{ color:purple; } </style> </head> <body> <ul> <li> <a href="#">伪类选择符,,,</a> </li> </ul> </body>
- 注意⚠️:
1)a:hover 必须位于a:link 和a:visited之后,a:active必须位于a:hover之后;
2)可靠的顺序是:l(link)ov(visited)eh(hover)a(active)te,可以借助love和hate两个单词来记忆。
- 伪对象(伪元素)选择器
- 元素:before{ }:设置在对象前发生的内容。用来和content 属性一起使用,并且必须定义content属性。
- 元素:after { }:设置在对象后发生的内容。用来和content 属性一起使用,并且必须定义content属性。
- 总结:选择器的优先级
!important > 内联 > ID > 类 > 标签|伪类|属性选择器 > 伪对象 > 继承 > 通配符。⚠️注意: !important要写在属性值的后面,分号的前面。例:p{
color :red ! important;
}
优先级是有数值的:!important ~无穷大;内联~1000;ID~100;类~10,标签~1.数值越大,优先级越高。
例:<head> <meta charset="UTF-8"> <title>选择器的优先级</title> <style> span{ /*1*/ color: red; } p span{ /*1+1=2*/ color: orange; } p .c1{ /*1+10=11*/ color:yellow; } p #d1{ /*1+100=101*/ color: green; } /*至此,内容的颜色为 green, 要想内容的颜色为red,可以加!important*/ span{ color: red !important; } </style> </head> <body> <p> <span class="c1" id="d1">选择器的优先级</span> </p> </body>