CSS选择器Selector
目录
一、DOM
二、类选择器
类选择器示例代码
类选择器Class Selector
*指定多个class
多个class选择器，后定义的优先级高
三、标签类型选择器
标签类型示例代码：
统一设定某种标签的样式
标签与类结合使用
四、ID选择器
元素的ID
ID选择器
ID选择器示例代码：
五、伪类选择器
伪类选择器示例代码：
六、子选择器
子选择器示例代码：
一、DOM
DOM, Document Object Model
文档对象模型
在HTML页面里，浏览器根据
和里面的所有标签，建立一个树状结构 下的每个节点，称为元素Element例如：
元素的通用属性：
元素都有一些属性，例如
| id | 给改元素设置一个全局唯一的ID |
| name | 给改元素设置一个名字 |
| class | 设置样式类名 |
| style | 设置临时样式 |
| ...... | ....................... |
注：不要把显示的内容放在以外
二、类选择器
类选择器示例代码
信息统计
类选择器Class Selector
示例：
.my-button
{
}
用于指定 所有class="my-button"的元素的样式。
*指定多个class
一个元素可以指定多个class
规则：
-定义多个样式
-指定样式时，以空格分开
*优先级问题
当多个样式出现冲突时：
例如：
.my-button{}
.my-button-default{}
其中，.my-button-default{}的优先级更高，因为他是后出现的，
验证：打开谷歌开发者工具来验证：
1.2.3.4四部即可看出
多个class选择器，后定义的优先级高
三、标签类型选择器
标签类型示例代码：
信息统计
统一设定某种标签的样式
例如：
button{
}
标签与类结合使用
button.my-default{
}
标签类型为
四、ID选择器
元素的ID
每个元素都可以设计一个id属性
例如：
由于ID应该是在页面内唯一的，为了避免重复，一般应该命名较长一些
例如：editor-ok-button editor-cancel-button
ID选择器
ID Selector，ID选择器
指定某个元素的ID的元素的样式
注：
1、ID应该是在页面内唯一的，即通过一个id可以唯一定位一个元素
2、ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
优先级
在Chrome里观察Type Selector和ID Selector的优先级顺序....ID Selector
优先级顺序：
| 内联样式 | 1000 | |
| ID选择器 | 100 | |
| 类选择器 | 10 | |
| 标签类型 | 1 | ...... |
ID选择器示例代码：
添加信息
五、伪类选择器
伪类选择器Pseudo-Class-Selector
即：为元素的每一种状态定义一个样式
| xxx | 普通状态显示 |
| xxx:hover | 鼠标移上去的状态显示 |
| xxx:active | 鼠标按下去的状态显示 |
| xxx:focus | 焦点状态下的状态显示 |
其中，xxx可以是ID/class/Type Selector
例如：
.my-button：focus{}
img：disabled{}
#ok:hover{}
伪类选择器示例代码：
立即重启服务器
六、子选择器
子选择器 Descendant Selector
可以设定父元素下子元素的样式
子选择器示例代码：
#login-panel label{}
在 id="login-panel"元素下所有
.xxx.yyy.zzz{}
在class="xxx"下的子元素class="yyy"下的class="zzz"
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！