html/css-css选择器-2~5

优先级别

和先后没关系

!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]

html/css-css选择器-2~5

猜你喜欢