CSS选择器

选择器

选择器: 选中元素

简单的选择器

  1. ID选择器: 选中的是对应id值的元素
#test{
    color: blue;
}
<p id="test"></p>
  1. 元素选择器
p{
	color: red;
}
<p>lorem.</p>
  1. 类选择器
.name{
    color: red;
}
<p class="name">lorem.</p>
  1. 通配符选择器

*,选中所有元素.

*{
	color: red;
}
	<!--全部选中-->
	<h1>lorem.</h1>
	<p>lorem.</p>
  1. 属性选择器

[ ],根据属性名和属性值选中元素.

[href]{
    color: red;
}
[href="http://www.baidu.com"]{
    color: red;
}
/*选中class属性中带有b的元素*/
[class~="b"]{
    color: red;
}
<a class="a b c d" href="http://www.baidu.com">
    百度
</a>
  1. 伪类选择器

选中某些元素的某种状态.

  1. link:超链接未访问时的状态
  2. visited:超链接访问过后的状态
a:link{
    color: red;
}
a:visited{
    color: green;
}
  1. hover:鼠标悬停时的状态
/* 选中鼠标悬停时的a元素 */
a:hover{
    color: red;
}
  1. active:激活状态,鼠标按下状态
a:active{
    color: red;
}

书写顺序,爱恨法则:love hate

  1. 伪元素选择器

before

after

span::before{
    content: "《";
    color: red;
}
span::after{
    content: "》";
    color: red;
}
<body>
	<span>HTML</span>
</body>

页面显示结果:
页面显示结果

选择器的组合

  1. 并且
p.red{
    color: red;
}
	<p class="red">lorem.</p>
  1. 后代元素–空格
div li{
    color: red;
}
<div>
    <ul>
        <li>lorem.</li>
    </ul>
</div>
  1. 子元素–>
div>ul{
    color: red;
}
<div>
    <ul>
        <li>lorem.</li>
    </ul>
</div>
  1. 相邻兄弟元素–+

该元素相邻下面元素

.special{
    color: red;
}
.special+li{
    color: blue;
}
<div>
    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li class="special">Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>
</div>

页面显示结果:
相邻兄弟元素

  1. 兄弟元素–~

该元素下面所有元素

与相邻兄弟元素用法相同

页面显示结果:
兄弟元素

选择器的并列

多个选择器,用逗号分隔

语法糖

.red,p{
    color: red;
}
<div class="red">lorem.</div>
<p>lorem.</p>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值