优先级别
和先后没关系
!important在color和;之间,不建议用,会打乱 >内联样式(括号里style=“”)>外联:ID(#ID)> 类(.cls)>元素(h1) >通配符(*)
层级选择器:后代 子 相邻兄弟
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 层级选择器 </title>
<style>
#p1 h1{color: red} *后代选择器
#p1 > h1{color: red} *子选择器
#p1 + h1 {color:purple}*相邻兄弟选择器,下一个兄弟选择器
#p1 ~ h1 {color:purple}*普通兄弟选择器:后面的兄弟都变了
</style>
</head>
<body>
<p id="p1"> *换成div才行 p写起来有问题后面说!!
<h1>jdsjf </h1>
sdjfj
</p>
<h1>jkdf<h1> *不显示,因为不是p后代
</body>
<html>
html body p h1
head meta+title
元素之间的3种关系:
1 父级和子级的关系
2 兄弟之间的关系 title和p不算,得有相同父级
3 祖先和后代的关系
用法根据HTML元素之间的层级关系来使用,语法: 祖先元素 后代元素 {属性名 属性值} div em{color: red;} {}为声明块
分为子选择器和后代选择器,还有相邻兄弟选择器和普通兄弟选择器
难点:关系
疑问:为什么div h1比#p1大
注意:大小写不要错 ,;不要忘了
属性选择器 {属性名称}
用法多而近,作用:在指定范围通过是否具有指定属性筛选实际开发中,属性选择器配合基本选择器使用
注意:p和[name]不能有空格
示例:
p[name] {color:indigo;}
[name] {color:indigo;} 速度会比较慢
常见扩展用法(1-4):
1.[属性名称=属性值] 完全一致
2.[属性名称^=属性值] 属性值以什么开始的
3.[属性名称$=属性值] 属性值以什么结束的
4.[属性名称*=属性值] 属性值包含什么
5.[属性名称~=属性值] 属性值以空格为分隔符,分割后的值至少有一个和限定匹配
6.[属性名称|=属性值] 属性为value或以value-开头 | shift+enter上面那个
组合选择器:包括层级选择器
1.多个并列使用,中间用,分隔 #p,.cls
2.多个并列使用,无分隔符 p[name]