CSS选择器学习笔记
目录
CSS选择器上
通用选择器
- 选择所有元素，使用 *
*{ margin:0px; padding:0px; }类型选择器
- 1.使用元素类型
- 2.根据类型选择元素
- 3.使用场景：
- 1）想改变某一个元素的默认样式
- 2）统一文档某个元素的显示效果时
- 4.建议：
- 对于div、span等通用元素，不建议使用类型选择器。因为，他们使用广泛，会相互干扰。
类选择器
- 1.根据元素的class属性选择元素
- 2.使用符号 .
- 3.具有相同样式的元素统一为一类。
id选择器
- 1.使用id属性选择元素
- 2.使用符号 #
- 3.使用场景:
- 1)用来构建整体框架的元素应该使用id选择器
- 2)对于模块的外围结构元素最好使用id选择器,内部元素可以定义类(class)选择器.因为,外部元素唯一,内部元素可以重复出现.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0px; padding: 0px; } body{ width:960px; margin: 0px auto; } #header{ width: 960px; height: 120px; border: 1px solid; } #content{ width: 960px; height: 900px; background-color: green; } #left{ width: 800px; height: 900px; background-color: red; float: left; } #sidbar{ float: right; width: 160px; height: 900px; background-color: blue; } #footer{ width: 960px; height: 120px; background-color: grey; } </style> </head> <body> <header id="header"></header> <div id="content"> <div id="left"></div> <div id="sidbar"></div> </div> <footer id="footer"></footer> </body> </html>属性选择器
- 1.根据属性选择元素
- 2.使用符号[]
分组选择器
- 1.为多个并集元素选择相同的样式
- 2.使用符号,
包含选择器
- 1.选择某个元素包含的后代元素
- 2.使用符号空格
子元素选择器
- 1.选择某个元素的子元素(直接后代,必须是儿子孙子不行)
- 2.使用 >
伪元素选择器:first-line
- 选择首行
伪元素选择器:first-letter
- 选择首字母
伪元素选择器 :before和:after选择器
- 选择内容前后（必须和content属性一起使用）
CSS选择器下
根元素选择器(:root)
:root{ border: 1px solid red; } /* html{ border: 1px solid red; } */使用子元素选择器(:xx-child)
:first-child{ border: 1px solid green;} :last-child{ border: 1px solid red;} :only-child{ border: 1px solid blue;} :only-of-type{ border: 1px solid orange;}索引选择器（nth-child）
:nth-child(1){ border: 1px solid orange; } :nth-last-child(1){ border: 1px solid green; }启用(禁用)某个元素:enabled、disabled
checked
valid、invalid
in-range、out-of-range
required、optional
:link、:visited、:hover
:focus