快捷输入方式:
html 中选择器:
一、基础选择器
1、通配符选择器:*{} 改变了全部样式
2、元素选择器:元素 {}
3、组合选择器 / 并集选择器:元素 1,元素 2,类,伪类,元素. 类 {}
4、类选择器
html:
CSS: .F46{}
特点
1、在 css 中必须要以点号(英文)开始
2、在 html 中包含字母、数字、连字符(-)、下划线(__)
3、在 html 点号后面必须是字母开始的
4、在 html 中区分大小写
5、在 html 中一个类选择器可以应用到多个标签
示例:
html:
css: .F45{}
这种情况针对精确设置,例如:在 div>ul>li 中
5、ID 选择器
html:
css: #F46{}
二、层次选择器
1、后代选择器
格式:祖先 后代选择器 {}
- html:
css:
- <div>
- <p>
- <em></em>
- </p>
- </div>
- div p em {}
2、子级选择器
格式:父级元素 > 子级元素 {}
css:
- html:
- <div>
- <p>
- <em></em>
- </p>
- </div>
3、兄弟选择器 格式:兄弟元素 A + 兄弟元素 B{}
- div > p > em {}
css:
- <div>
- <p>
- <em></em>
- <i></i>
- </p>
- </div>
- em + i {}
4、通用选择器
格式:兄弟元素 A~ 兄弟元素 B{}
选择匹配的 B 元素,即 A 元素后面的所有 B 元素
html:
- <div>
- <p>
- <em></em>
- <span></span>
- <i></i>
- </p>
- </div>
css:
- em~i {}
三、伪类选择器
1、动态伪类选择器
(1)、动态
元素:link
元素:visited
(2)、静态
元素:hover
元素:active
元素:focus
2、触发焦点(tab)键时的样式
注:a 标签用的最多
获取一张图片在什么样的位置显示
4、结构类选择器
- 格式(针对一个div下有多个相同元素)
- 要修改的元素:first-child{}(改变第一个元素)
- 要修改的元素:last-child{}(改变最后一个元素)
- 要修改的元素:nth-child(n){}(n要改变的那个元素在第几个)
- 要修改的元素:nth-last-child(n){}(修改倒数第几个元素)
- 要修改的元素:nth-child(odd){}(修改元素位置在奇数位时:
- odd代表奇数,或者写成2n+1y
- 要修改的元素:nth-child(even){}(修改元素位置在奇数位时:
- even代表偶数,或者写成2n
- div>p(元素1):nth-of-type(n){}(修改在div中类型为p(元素1)中第二个p的样式
空元素:empty{}(改变元素为空(没有内容)的元素样式)
只有一个元素:only-child(在 div(区块也可以其他元素)中只有一个元素且仅有一个才能改变样式
5、否定伪类选择器
格式:元素:not(:nth-child(4)){} 除了第四个不改变样式其他都改变,{} 写相应的样式
6、伪元素选择器
对一段文字进行操作
selection 的规则
只能有 color,background-color(background) 两个属性
格式
- : :selection {
- color: red;
- background - color: bule;
- }
::first-letter{}选中第一个字母进行样式的改变 ::first-line{}选中第一个行进行样式的改变
在标签前 / 后添加内容(尽量选择有自动换行的标签)
i::before{content:"您好"}
在 i 标签前加上 "您好",显示在网页中
em::after{content:"王先生"}
在 em 标签后加上 "王先生",显示在网页中
四、属性选择器(通常用到 input)中
html
<input type="text" />css
input[type="text"]{color:red} html;<input type="number-rfdbx"/> css:input[type竖线1="number"]{color:red} 选中以"number-"开始的input标签 竖线=
html
<input type="number-rfdbx text"/> css:input[type$="number"]{color:red} 选中以"text开始"的input标签 $=
html
<input type="number-rfdbx dgsb f46 dgd"/> css:input[type*="number"]{color:red} 选中以"包含f46"的input标签 *=
html
<input type="number dgsb text gav "/> css:input[type~="number"]{color:red} 选中以"包含text"的input标签,并且多个属性以空格隔开 ~=
html
<input type="text-rfdbxvs gsvx"/> css:input[type^="number"]{color:red} 选中以"text"开始,也可写成"te"的input标签 ^=
来源: http://www.bubuko.com/infodetail-2431222.html