简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML/CSS中常用的三种单位（em,px,rem的学习)与选择器的学习8月15号
Blogger Information
Blog 17
fans 0
comment 0
visits 13551
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML/CSS中常用的三种单位（em,px,rem的学习)与选择器的学习8月15号
18674060620的博客
Original
806 people have browsed it

今天老师讲了表单的制作，HTML/CSS中常用的三种单位（em,px,rem)与选择器的课程，目前为止一切都还比较顺利，加油，好好跟着老师学！

手抄代码：

20180816225612.png

20180816225640.png

以下为编程: CSS中常用的选择器：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用选择器</title>
    <style>
        /*标签选择器: 根据标签名称来选择页面元素*/
        ul {
            /*padding: 0;*/
            margin:0;
            width: 750px;
            border: 1px dashed #666;
            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;
            border-radius: 50%;
            box-shadow: 2px 2px 2px #888;
            background-color: skyblue;
            margin: 5px;
        }
        /*id选择器*/
        #item1 {
            background-color: coral;
        }

        /*类选择器/class选择器*/
        .item2 {
            background-color: gold;
        }

        /*属性选择器: 属性名*/
        ul li[class] {
            background-color: blueviolet;
        }

        /*属性选择器: 属性值*/
        ul li[class="item2"] {
            background-color: grey;
        }

        /*属性选择器: 以指定属性值开头的元素*/
        ul li[class^="cat"] {
            background-color: brown;
        }

        /*属性选择器: 以指定属性值结尾的元素*/
        ul li[class$="pig"] {
            background-color: red;
        }

        /*属性选择器: 属性值中包含指定的子串*/
        ul li[class*="t"] {
            background-color: green;
        }

        /*后代选择器/层级选择器*/
        body ul li {
            border: 1px solid black;
        }

        /*子选择器*/
        ul > li[class$="pig"] {
            background-color: greenyellow;
        }

        /*相邻选择器*/
        ul  li[class$="pig"] ~ * {
            background-color: black;
            color: white;
        }

        /*相邻兄弟选择器*/
        ul  li[class$="pig"] + li {
            background-color: pink;
            color: black;
        }

        /*群组选择器*/
        h1, p {
            font-size: 2rem;
            font-weight: lighter;
            margin: 0;
        }

      

        /*伪类选择器: 位置*/
        ul li:first-child {
            background-color: #efefef!important;
        }

        ul li:last-child {
            background-color: red;
        }

        ul li:nth-child(5) {
            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;
        }


    </style>
</head>
<body>
<ul>
    <li id="item1">php</li>
    <li class="item2">java</li>
    <li class="cat dog pig">asp</li>
    <li>net</li>
    <li>js</li>
    <li>jquery</li>
    <li>C++</li>
    <li>C</li>
    <li>Python</li>
    <li>TIOBE</li>
</ul>

<h1>css选择器大法</h1>
<p>css选择器非常重要,特殊是对于学习js,jquery以及其它前端框</p>


<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>
</html>

运行实例 »

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


Correction status：qualified

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
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！