博客列表 >HTML+CSS选择器控制_页面中常用单位-2018年08月15日

HTML+CSS选择器控制_页面中常用单位-2018年08月15日

宋超的博客
宋超的博客原创
2018年08月17日 15:06:44690浏览

选择器练习

<!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>

运行实例 »

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

选择器控制效果图

22.jpg

网页元素中常用单位px em rem 

微信图片_20180816212918.jpg

总结:

学习form表单设计

常用元素单位px(屏幕像素,相对于显示器),em(相对于当前元素字体大小,默认1em=16px),rem(根元素单位 1rem=1em=16px)

常用选择器学习

标签选择器、ID选择器、类/CLASS选择器、伪类选择器、属性选择器等


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