Blogger Information
Blog 34
fans 0
comment 0
visits 26581
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
常用选择器分类
罗盼的博客
Original
834 people have browsed it

实例

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta charset="utf-8" />
<style>
/* 1.标签选择器:根据元素的标签来选择 例如ul 、li */
ul{
    margin: 0;
    width: 550px;
    border: 1px dashed #666;
    padding: 10px 5px;
    
}
/*子块撑开父级区块*/
ul:after {
    content: '';
    display: block;
    clear: both;
    
}

ul li {
    list-style: none;
    float: left;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    background-color: skyblue;
    margin: 5px;
}

/* 2.id选择器 根据id来选择元素 */
#qiu1 {
    background-color: pink;
}

/* 3.class选择器 根据类来选择元素 */
.qiu2 {
    background-color: green;
}

/* 3.属性选择器 根据属性名来选择元素 */
ul li[class] {
    background-color: lightgrey;
}
/* 4.属性选择器 根据属性值来选择元素 */
ul li[class="qiu2"] {
    background-color: yellow;
}
/* 5.属性选择器 根据属性值开头来选择元素 */
ul li[class^="qiu4"] {
    background-color: brown;
}

/* 6.属性选择器 根据属性值结尾来选择元素 */
ul li[class$="qiu-y"] {
    background-color: black;
}

/* 7.属性选择器 根据属性值包含指定的子串来选择元素 */
ul li[class*="iu"] {
    background-color: #616130;
}
/* 以上的选择器是根据元素特征相关的选择器 */

/*8.后代选择器/层级选择器*/
body ul li {
   border: 1px solid #666;     
}
/*9.子选择器*/
ul>li[class="qiuqiu"] {
   background-color: #000079;     
}
/*9.相邻选择器*/
ul li[class="qiuqiu"] ~ * {
   background-color: #FF00FF;     
}

/*10.相邻兄弟选择器*/
ul li[class="qiuqiu"] + li {
   background-color: #460046;     
}

/*11.群组选择器*/
h1,p {
   font-size: 1rem;  
   font-weight: lighter; 
   
}

/*12.伪类选择器:链接选择器*/
a {
   font-size: 2rem;    
}
/*访问前*/
a:link{
    color:blue ;
}
/*访问后*/
a:visited{
    color:yellow ;
}
/*获取焦点时*/
a:focus{
    color:red ;
}
/*鼠标悬停*/
a:hover{
    color:black;
}

/*12.伪类选择器:位置*/
/*位置:第一个*/
ul li:first-child {
  background-color: black!important;     
}
/*位置:最后一个*/
ul li:last-child {
  background-color: red;     
}
/*位置:固定位置5*/
ul li:nth-child(5) {
  background-color: red;     
}
/*位置:偶数*/
ul li:nth-child(2n) {
  background-color: red!important;     
}
/*位置:奇数*/
ul li:nth-child(2n+1) {
  background-color: green!important;     
}
/*13.伪类选择器:根据子元素的数量来选择*/
ol :only-child {
    background: #666;
}

ul li:nth-last-child(4){
    background-color:white!important;
}

ol li:nth-of-type(2){
    
    background-color: wheat;
}
:empty{
    width: 100px;
    height: 100px;
    background-color: red;
    
}

:empty:after{
   content: '你是谁?';
}

/*:empty:before{
   content: url("1.jpg");
}*/
</style>

	<title>常用选择器</title>
</head>

<body>
<ul>
<li id="qiu1">1</li>
<li class="qiu2">2</li>
<li class="q3">3</li>
<li class="qiu4 qiu-x qiu-y">4</li>
<li class="qiuqiu">5</li>
<li >6</li>
<li >7</li>
<li >8</li>
<li >9</li>
<li >10</li>
</ul>

<h1>群组选择器</h1>
<p>到十点百思不得达克斯</p>
<a href="http://www.baidu.com">百度</a>


<ol>
<li>1</li>
</ol>


<ol>
<li>1</li>
<li>2</li>
</ol>

<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>

<div></div>



</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

感悟:类型比较多,特别全,注释也比较多,积累知识,点点滴滴,方成汪洋!

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments