CSS选择器

1.ID和类选择器

.specialtext {font-style: italic;}
p.specialtext {color: red} /* class为specialtext的p元素 */
.specialtext.featured {font-size: 100%;} /* class为specialtext和featured的元素*/

#specialtext {}
p#specialtext {} /* 类比上面 */

2.上下文选择器

p, body {font-size: 10px;} /* p和body */
artical p {font-weight: bold;} /* artical p是上下级关系,但可以越级 */
section > h2 {font-style: italic} /* 父子选择,section必须是h2的直接父元素 */
h2 + p {font-variant: small-caps;} /* 紧邻同胞选择器,p必须紧邻同胞h2后面 */
h2 ~ a {color: red;} /* 一般同胞选择器,不必紧邻 */

3.通用选择器

* {color: green;}
p * {color: red;} /* p包含的所有元素 */
section * a {font-size: 1.3em;} /* section的孙元素的a,不管其父元素*/

4.属性选择器

/* 带有title属性的img元素,至于其title值是什么不重要 */
img[title] {border: 2px solid blue;}

5.属性值选择器

/* title属性为red flower的img元素 */
img[title="red flower"] {border: 4px solid green;}

6.伪类

  • 链接伪类

link: 等待用户点击的状态
visited: 点击过的连接状态
hover: 鼠标悬停在连接上的状态
active: 连接正在被点击(按下还未释放)

p:hover {background-color: grey;}
  • focus伪类

获得焦点的元素

input:focus {border: 1px solid blue;}
  • target伪类

链接的目标元素

<a href="#more_info">more information</a>
<h2 id="more_info">This is the information you are looking for.</h2>

#more_info:target {background: #eee;} /* h2元素 */
  • 结构化伪类
:first-child:last-child
e:first-child
:nth-child
e:nth-child(n) /* n是一个数值,也可以是even,odd */

7.伪元素

e::first-letter /* e的首字符 */
e::first-line /* 首行 */
e::before/after /* 在e前面/后面添加内容 */

比如

<p class-"age">25</p>
p.age::before {content: "Age: ";}
p.age::after {content: " years.";}

得到的结果为:
Age:25 years.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值