收藏
<!DOCTYPE html>
<html>
<mate charset="utf-8">
<title>CSS选择器</title>
<style type="text/css">
/*标签选择器：根据标签名称来选择页面元素*/
ul{
/*padding:0px;*/
margin:0;
width:700px;
border:1px dashed #555;
padding:10px 5px;
}
/*子块撑开父级区块*/
ul:after{
content:'';
display:block;
clear:both;
}
ul li{
list-style: none;
float:left;
width:60px;
height:60px;
line-height:60px;
text-align:center;
font-size:22px;
border-radius:50%;
box-shadow: 2px 2px 2px #888;
background-color:skyblue;
margin:5px;
}
/*ID选择器*/
#item1{
background-color:red;
}
/*类选择器/class选择器*/
item2{
background: yellow;
}
/*属性选择器：属性名*/
ul li[class]{
background: #eee;
}
/*属性选择器·属性值*/
ul li[class="item2"]{
background: green;
}
/*属性选择器：以指定属性值开头的元素*/
ul li[class=^="one"]{
background:#444;
}
/*属性选择器：以指定值结尾的元素*/
ul li[class$="two"]{
background:#888;
}
/*属性选择器，属性中包含指定的子串*/
ul li[class*="o'"]{
background: #343435;
}
/*后代选择器/层级选择器/派生选择器*/
body ul li{
border:1px solid #111;
}
/*子选择器*/
ul > li[class$="three"]{
background-color:#121;
color:#fff;
}
/*相邻选择器*/
ul li[class$="two"] ~ *{
background-color:#f3f;
}
/*相邻兄弟选择器*/
ul li[class$="two"] + li{
background-color:blue;
}
/*群组选择器*/
h1,p,a{
font-size: 3rem;
color: red;
}
/*伪类选择器·链接*/
a{
font-size:2rem;
}
/*访问前*/
a:link{
color:#988432;
}
/*访问后*/
a:visited{
color:#ff00ff;
}
/*获取焦点的时候*/
a:focus{
color:pink;
}
/*鼠标悬停时*/
a:hover{
color:black;
}
/*鼠标点击激活时*/
a:active{
color:red;
font-size:3rem;
}
/*伪类选择器·位置*/
ul li:second-child {
background-color:#frfrfr!important;
}
ul li:last-child {
background-color: red;
}
ul li:nth-child(2) {
background-color: red;
}
ul li:nth-child(odd) {
/*偶数: even,奇数 odd*/
background-color: purple!important;
}
/*伪类选择器: 根据子元素的数量*/
ol :only-child {
background-color: lawngreen;
}
ol li:only-child {
background-color: lawngreen;
}
ul li:nth-last-child(3) {
background-color: wheat;
}
ol li:nth-of-type(2) {
background-color: wheat;
}
:empty {
width: 220px;
height: 270px;
background-color: coral;
}
:empty:after {
content: '看到我了吗?亲';
}
:empty:before {
/*通过伪类添加的元素,默认都是行内元素,不支持宽高设置,可以通过设置背景图片的方式来间接处理*/
content: url("images/1.jpg");
}
</style>
<head>
<body>
<ul>
<li id="item1">1</li>
<li class="item2">2</li>
<li class="one">3</li>
<li class="two">4</li>
<li class="three">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<h1>css选择器大法</h1>
<p>css选择器非常重要,特殊是对于学习js,jquery以及其它前端框</p>
<a href="http://php.cn">PHP中文网</a>
<ol>
<li>列表项1</li>
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
<div></div>
</body>
</head>
</html>点击 "运行实例" 按钮查看在线实例
选择器控制效果图
网页元素中常用单位px em rem
总结：
学习form表单设计
常用元素单位px(屏幕像素，相对于显示器),em(相对于当前元素字体大小,默认1em=16px),rem(根元素单位 1rem=1em=16px)
常用选择器学习
标签选择器、ID选择器、类/CLASS选择器、伪类选择器、属性选择器等
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
