十大国外室内设计网站,车网站模板预览,wordpress全平台解决方案,wordpress 侧边栏主题文章目录 基本选择器标记选择器类别选择器ID选择器测试基本选择器 复合选择器交集选择器并集选择器后代选择器全选选择器测试复合选择器 基本选择器
准备几个HTML标签用来测试
!DOCTYPE html
html langzh-CNheadmeta charsetU… 文章目录 基本选择器标记选择器类别选择器ID选择器测试基本选择器 复合选择器交集选择器并集选择器后代选择器全选选择器测试复合选择器 基本选择器
准备几个HTML标签用来测试
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title基本选择器/title/headbodyspan测试1/spanspan classtest2测试2/spanspan idtest3 classtest2测试3/spanspan idtest3 classtest2 stylebackground-color: crimson测试4/span/body
/html
标记选择器
使用标签名作为选择元素的依据一般极少单独使用非常容易引起误操作因为精确分辨相同标签元素
tagName{xxx:xxx
}类别选择器
根据.class属性值精确选取元素class全文不唯一可以随意使用
.className{xxx:xxx
}ID选择器
使用#id值来拿取元素注意id全文唯一不能出现重复
#idName{xxx:xxx
}测试基本选择器
stylespan{background-color: darkcyan;}.test2{background-color: coral;}#test3{background-color: cornflowerblue;}
/style运行效果 CSS层叠特性 当多种基本选择器出现冲突时浏览器渲染的优先级情况 ID选择器类别选择器标记选择器 注意以上优先级与顺序无关 如果存在行内式则一切以行内式为准
复合选择器
准备几个HTML标签用来测试
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title复合选择器/title/headbodylabel测试1/labelspan classtest2测试2/spanlabel classtest2测试3/labelh2我是二级标题/h2h5 idtitle5五级标题/h5div我是层/divp classpra我是一个段落/pdiv idoutter济南的span idinner春天/span就要开始了/div/body
/html
交集选择器
由一个标签后面紧跟.类别或者#id则必须同时满足两个条件才可以成功选取
tagName.className{xxx:xxx
}
tagName#idName{xxx:xxx
}并集选择器
由多个基本或者复合选择器用逗号隔开只要满足其中任意一个就可以成功选取
sel1,sel2,sel3,selN{xxx:xxx
}后代选择器
根据左祖先右后代的继承原则可以精确拿取具有层级关系的子元素 没有个数限制
sel1 sel2 sel3 selN{xxx:xxx
}继承特性 在css中没有任何冲突的前提下子标签会完全继承父标签的所有css渲染设置 存在冲突则以子标签为准
全选选择器
拿取整个页面中所有元素
*{xxx:xxx
}测试复合选择器
stylelabel.test2{/* 文本倾斜 */font-style: italic;}span.test2,label.test2,h2,#title5,div,p.pra{background-color: greenyellow;}div#outter span#inner{background-color: blueviolet;}*{/* 加粗 */font-weight: bolder;}
/style运行效果
