CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言。CSS(层叠样式表)提供了多种选择器,用于选择要应用样式的 HTML 元素。
选择器的大致结构如下:
选择器{
属性:值;
属性2:值;
}
注意:写代码时不要乱加空格!!!!!!!!!
一、基本选择器
1、元素选择器:
用元素名称做选择(*表示全部元素)
*{
color:red;
}
div{
color:red;
}
...
2、属性选择器
选择div[id]有id属性的div元素
选择div[id=xx] 有id属性,且id属性值为xx的div元素
选择div[id*=xx] 有id属性,且id属性值包含xx的div元素
选择div[id^=xx] 有id属性,且id属性值以xx开头的div元素
选择div[id$=xx]有id属性,且id属性值以xx结尾的div元素
div[id$=xx]{
color:purple;
background:greenyellow;
}
3、id选择器
通过元素的唯一标识符(ID)选择 HTML 元素。
ID 选择器以 # 开头,后面跟着 ID 名称。
#xx{
color:purple;
background:greenyellow;
}
4、class选择器(类选择器)
类选择器以 . 开头,后面跟着类别名称。
.text{
background:yellow;
}
特殊:组合选择器:组合选择器由两个或多个简单选择器组合而成,它们描述了元素之间的关系。
5、包含选择器(也叫后代选择器)(强调包含关系)
div p{
background:yellow;
}
选择div元素内所有p元素
6、子选择器(强调直接的父子)
通过指定元素的直接子元素关系选择 HTML 元素。子元素选择器使用 >
符号分隔父元素和子元素。例如,ul>li选择器将选择所有<ul>元素的直接子元素中的<li>元素。
ul>li{
color:red;
}
注意:后代选择器与子选择器比较:子选择器仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。
7、兄弟选择器
选择某一个指定元素的后面的所有兄弟结点。
h1~p{
color:red;
}
h1后的p元素变红色
8、选择器组合
p,
div,
span{
color:red;
}
二、伪元素选择器
选择元素的特定部分修改样式。
1、首字母(::first-letter) 只能用于块级元素
::first-letter{
color:red;
}
2、首行(::first-line) 只能用于块级元素
::first-line{
color:red;
}
3、前面插入(::before)
div::before{
content:"hello";
color:red;
}
div前插入红色字体的hello
4、后面插入(::after)
同理....
三、伪类选择器
1、结构性伪类选择器
p:nth-child(){
}
括号里可以是数字n n从1开始
可以是英文单词 odd奇数,even偶数
括号里可以是表达式5n+2 n从1开始
找第一个: nth-child(1) = first-child
找最后一个: last-child =nth-last-child(1)
倒着数: nth-last-child()
只认数字,如果类型刚好符合(例子中为p),则被选中 ;若类型不为p则不执行
p:nth-of-type(){
}
括号里可以是数字n n从1开始
可以是英文单词 odd奇数,even偶数
括号里可以是表达式5n+2 n从1开始
找第一个 first-of-type = nth-of-type(1)
找最后一个 last-of-type = nth-last-of-type(1)
倒着数: nth-last-of-type()
既认数字也认类型,找同类型下的第n个元素
2、UI状态伪类元素选择器
:hover 鼠标悬停
:focus 焦点状态
:checked 选中状态
3、其他伪类选择器
:not() 否定伪类选择器
div:not(.text){
color:red
}
div元素中除了text类,其他的元素颜色变红
四、选择器优先级
选择器的优先级规则
1、选择器写的越长(越精确),优先级越高
2、优先级高低 id选择器>class选择器>元素选择器
3、同级别长度下,css代码按照顺序执行,后边的效果会把前边的覆盖
4、注意:以上规则适用大部分场景,特殊场景不适用需要自行测试!!!