前端css选择器
从零开始的前端生活--css基础
选择器
选择器是用来选择对应的html元素。
类选择器 以" . "为开头的选择器,很多元素可以共用同一个类选择器
ID选择器 以" # "为开头的选择器。一般指向唯一元素
属性选择器 含有[] 的选择器
<span class="item one">1</span> <span class="item">2</span> <span class="item three">3</span> <span class="item">4</span> <span class="item">5</span> span[class="item"] { // 属性选择器,选择类名为item,当然不仅仅是class,只要是属性都可以,例如input的type color: red; //当class的值等于item时,字体设置为红色 }
[ attr ] 选中包含某个属性的元素
[ attr = value ] 选中属性值等于某个值的元素
[ attr ~= value ] 选中某些元素的属性值attr 含有value 这词汇
[ attr ^= value ] 选中属性值以 value 开头的元素
[ attr $= value ] 选中属性值以value结尾的元素
[ attr *= vlalue ] 选中属性值包含value的元素
[ attr |= value] 选中以指定值开头的元素,该值为完整的单词
伪类选择器
一般是前有:的选择器
:active 选中被激活的元素 :focus 选中聚焦的元素 :hover 选中鼠标悬浮在上面的元素 :link 向未被访问的连接添加样式 :visited 向已被访问的连接添加样式 :first-child 向元素的第一个子元素添加样式 :lang 向带有lang属性的元素添加样式 :empty 选中里面无内容的元素 <input type="text"> <input type="text"> input:focus { // 选择 聚焦的 表单 color: red; }
注:empty是选中无内容的元素,如<div></div>这种,不会被他的伪元素内容所左右。
伪元素选择器
:: first-line | 向文本的首行添加样式 |
---|---|
:: first-letter | 向文本的第一个字母添加样式 |
:: before | 在元素的前面添加内容 |
:: after | 在元素后面添加内容 |
.after::after { content: "";// after 和 before 要有content width: 10px; height: 10px; background-color: red; display: block; }
关系选择器
- 后代选择器 空格连接 比如:div p 就是选择div里面的p标签- 相邻后代选择器(子类选择器) 仅仅选择合乎规则的儿子元素,孙子和重孙就没有选择了(与后代选择器区别)> 连接 - 兄弟选择器 选择当前元素==后面==的所有的合乎规则的兄弟元素 ~ 连接- 相邻兄弟选择器 选择当前元素相邻的那个合乎规则的兄弟元素 用 + 连接
赞 (0)