博客列表 >表单,元素的三个常用单位,样式继承,样式冲突的处理方法以及css选择器的应用--2018年8月16日12时07分

表单,元素的三个常用单位,样式继承,样式冲突的处理方法以及css选择器的应用--2018年8月16日12时07分

新竹网络_Terry的博客
新竹网络_Terry的博客原创
2018年08月16日 12:21:30774浏览

代码


实例

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用选择器</title>
	<style type="text/css">
	/*标签选择器*/
	ul{
		padding:10px 5px;/*内边距*/
		margin:0;/*外边距*/
		width:500px;/*设置宽度*/
		border:1px dashed #666;/*设置边框*/
	}
	ul:after { 				 /*子块撑开父块*/
				content:'';  /*在子元素尾部添加空内容元素*/
				display: block;  /*并设置为块级显示*/
				clear:both;   /*清除二边的浮动*/
    }
	ul li {
            list-style: none; /*去掉默认列表项样式*/
            float: left;  /*向左浮动*/
            width: 40px;  /*设置宽度*/
            height: 40px; /*设置高度*/
            line-height: 40px; /*文本垂直居中*/
            text-align: center; /*文本水平居中*/
            border-radius: 50%; /*设置边框圆角*/
            box-shadow: 2px 2px 2px #888;
            background: lightgreen; /*淡绿色背景*/
            margin-right: 5px; /*设置每个球之间的右外边距*/
        }
	/*id选择器*/
    #item1 {
            background-color: blue;
        }
	/*类选择器*/ 
    .item2 {
            background-color:pink;
        }
	/*属性选择器: 属性名*/
    ul li[class] {
            background-color: blueviolet;
        }
	/*属性选择器: 属性值*/
    ul li[class="item2"] {
            background-color: grey;
        }
	/*属性选择器: 以cat开头的li*/
    ul li[class^="cat"] {
            background-color: brown;
        }
	/*属性选择器: 以pig结束的li*/
    ul li[class$="pig"] {
            background-color: red;
        }
	/*属性选择器: 属性值中包含指定子串*/
    ul li[class*="te"] {
            /*含有te的小球应该会变色,但是第1个小球是id选择器,id选择器优先级大于标签属性选择器,如果改成class选择器就会有效果*/
            background-color: green;
        }
	/*后代选择器,同时可以不要ul效果是一样的*/
        body ul li {
            border: 1px solid black;
        }
	/*子选择器,这是选择ul中以pig结尾的li*/
    ul > li[class$="pig"] {
            background-color: yellow;
        }
	/*相邻选择器*/
    ul li[class$="pig"]~*{		/*选择以pig为结尾的元素之后的所有同级元素*/	
			font-size:20px;
            background-color: black;	
            color: white;
			
        }
	/*选择以pig结尾的相邻的li元素*/
     ul li[class$="pig"]+li {
            background-color: pink;
            color: green;
        }
	/*群组选择器*/
	div,h2{
			color:red;
	
	}
	/*伪类选择器*/
	a{
		
		font-size:40px;
	}
	
	/*鼠标悬停时*/
	a:hover{
		text-decoration:none;
		color:pink;
	}
	 /*访问前*/
	a:link{
			background:black;
	}
	/*访问后*/
        a:visited{
            background:green;
        }
	 /*获取焦点时*/
      a:focus{
            color: white;
        }
	/*鼠标点击时*/
    a:active{
            font-size:20px;
        }
	/*选择集合中的第一个元素*/
    ol li:first-child {
           color:red;
        }
	/*选择集合中的最后一个子元素*/
    ol li:last-child {
            color: green;
        }
	/*按索引选择第二个*/
	ol li:nth-child(2){
            background-color: red;
        }
	/* 选择所有的奇数的元素*/
    /* 2n偶数, even偶数, 2n+1奇数, odd奇数*/
    ol li:nth-child(2n+1){
            background-color: yellow;
        }
	/*伪类选择器: 根据子元素数量*/
    /*选择具有唯一子元素的元素*/
    ol:only-child {
            background-color: lawngreen;
        }
	/* 选择指定类型的唯一子元素 */
    ol li:only-of-type {
            background-color: black;
        }
	/* 倒数选择指定位置的元素 */
     ol li:nth-last-child(5) {
           background-color: green;
        }
	/*选择指定父级的第三个<li>子元素*/
    ol li:nth-of-type(3) {
            background-color:wheat;
        }
	
	/*选择页面中的空元素p*/
	:empty {
            width: 100px;
            height: 100px;
            background-color: lightgreen;

        }
	:empty:after {
            content: 'http://www.baidu.com';
        }
	:empty:before {
            
            content: '请打开链接';
        }
	
	</style>
</head>
<body>
<ul>
   <li id="item1">1</li> <!-- 设定id选择器 -->
    <li class="item2">2</li>
    <li class="cat dog pig">3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
	<div>他的头发是红棕色的</div>
	<h2>他的头发是红棕色的</h2>
	<a href="http://www.baidu.com">百度</a>
<ol>
	<li>你</li>
	<li>我</li>
	<li>他</li>
	<li>它</li>

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

<p></p>

</body>
</html>

运行实例 »

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

预览图

_M@3O[OQ]_~(K%XVN)[YLJF.png手写代码

R9UA_M%7{I@(30X80@SB)42.png

手抄的主要是常用元素的单位,这样对于三个常用单位记得更加清晰,知道了px是相对于当前显示器,em相对于当前元素或父元素字体大小,rem相对于根元素html字体大小

总结:

主要学习了表单,表单的引用,常用的元素单位,常用的选择器,样式的继承,样式冲突的处理,以及应用的案例

1、px是相对于当前显示器,em相对于当前元素或父元素字体大小,rem相对于根元素html字体大小

2、对于表单的理解更加深刻

3、在发生样式冲突时,知道改什么处理,了解了内部、外部、内联的优先级

4、一些常用选择器的应用更加熟悉


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议