CSS选择器
通用选择器
应用于文档中的所有元素
eg:
*{} 应用于页面中的所有元素
类型选择器
匹配元素名称与选择器相似的元素
eg:
h1,h2,h3{} 应用于<h1>元素,<h2>元素和<h3>元素
类选择器
匹配这样的元素:元素的class特性的值与此选择器的点(或句点)符号后面的部分相同
eg:
.note{} 应用于所有class特性值为note的元素。 p.note{} 只应用于class特性值为note的<p>元素
id选择器
匹配这样的元素:元素的id特性的值与此选择器#后面的部分相同
eg:
#introduction{} 应用于id特性值为introduction的元素。
子元素选择器
匹配指定元素的直接元素
eg:
li>a{} 应用于所有父元素为<li>的<a>元素(对页面中其它<a>元素不起作用)
后代选择器
匹配指定元素的后代元素(不仅是指定元素的直接子元素)
eg:
p a{} 应用于所有位于<p>元素中的<a>元素,不论他们之间有没有嵌套其他元素
相邻兄弟选择器
匹配一个元素的相邻兄弟元素
eg:
h1+p{} 应用于<h1>元素之后的第一个<p>元素(对其他<p>元素不起作用)
普通兄弟选择器
匹配一个元素的兄弟元素,不论这个元素是不是与它的兄弟元素相连
eg:
h1~p{} 如果有两个<p>元素均为<h1>元素的兄弟元素,那么这些规则对两个兄弟元素都起作用
css中的伪类
锚伪类(未被访问状态,已被访问状态,鼠标悬停状态,活动状态)
:link 未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:hover 鼠标悬停时向元素添加样式
:active 向被激活的元素添加样式
:focus 向拥有鼠标输入焦点的元素添加样式
:first-child 向第一个子元素添加样式
eg:
<!DOCTYPE html> <html> <meta charset="UTF-8"> <style> a:link{background-color: aqua;} </style> <body> <a href="#">ZzkTxdy</a> </body> </html>
相关推荐
drdrsky 2020-07-05
覆雪蓝枫 2020-06-09
Phoebe的学习天地 2020-05-31
沈宫新 2020-04-08
zengni 2020-04-07
jiedinghui 2020-10-25
葉無聞 2020-09-01
sdbxpjzq 2020-06-25
xiaohuli 2020-06-17
teresalxm 2020-06-13
葉無聞 2020-07-05
opspider 2020-06-28
zhanghaibing00 2020-06-28
opspider 2020-06-26
somboy 2020-06-26
zhanghaibing00 2020-06-14
牵手白首 2020-06-14