Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css常用的选择器--2018年8月15日
Blogger Information
Blog 8
fans 0
comment 0
visits 3568
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
css常用的选择器--2018年8月15日
玩美者传媒的博客
Original
536 people have browsed it
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用选择器</title>
    <style>
 /*标签选择器: 根据标签名称来选择页面元素*/
 ul {
            /*padding: 0;*/
 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;
 line-height: 40px;
 text-align: center;
 border-radius: 50%;
 box-shadow: 2px 2px 2px #888;
 background-color: skyblue;
 margin: 5px;
 }
        /*id选择器*/
 #item1 {
            background-color: #39FF1B;
 }
        /*类选择器/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: 1.5rem;
 font-weight: bold;
 margin: 10px;
 text-align: center;
 color: coral;
 }
        /*伪类选择器: 链接*/
 a {
            font-size: 2rem;
 }
        /*访问前*/
 a:link {
            color:red;
 }
        /*访问后*/
 a:visited {
            color: orange;
 }
        /*获取焦点的时候*/
 a:focus {
            color:purple;
 }
        /*鼠标悬停的时候*/
 a:hover {
            color:green;
 }
        /*鼠标点击激活的时候*/
 a:active {
            color:blue;
 }
        /*伪类选择器: 位置*/
 ul li:first-child {
            background-color: #efefef;
 }
        ul li:last-child {
            background-color: red;!important;
 }
        ul li:nth-child(5) {
            background-color: red;
 }
        ul li:nth-child(even) {
            /*偶数: even,奇数　odd*/
 background-color: purple!important;
 }
        /*伪类选择器: 根据子元素的数量*/
 ol :only-child {
            background-color: #0388F1;
 }
        ol li:only-child {
            background-color: #FFE80E;
 }
        ul li:nth-last-child(3) {
            background-color: #882211;
 }
        ol li:nth-of-type(3) {
            background-color: #FFE80E;
 }
        :empty {
            width: 220px;
 height: 270px;
 background-color: coral;
 }
        :empty:after {
            content: '看到我了吗?亲';
 }
        :empty:before {
            /*通过伪类添加的元素,默认都是行内元素,不支持宽高设置,可以通过设置背景图片的方式来间接处理*/
 content: url("../0814/images/dog.jpg");
 }
    </style>
</head>
<body>
<ul>
    <li id="item1">1</li>
    <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>
<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>
</html>

实例

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

        /*类选择器/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: 1.5rem;
            font-weight: bold;
            margin: 10px;
            text-align: center;
            color: coral;
        }

        /*伪类选择器: 链接*/
        a {
            font-size: 2rem;
        }

        /*访问前*/
        a:link {
            color:red;
        }
        /*访问后*/
        a:visited {
            color: orange;
        }

        /*获取焦点的时候*/
        a:focus {
            color:purple;
        }

        /*鼠标悬停的时候*/
        a:hover {
            color:green;
        }
        /*鼠标点击激活的时候*/
        a:active {
            color:blue;
        }

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

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

        ul li:nth-child(5) {
            background-color: red;
        }

        ul li:nth-child(even) {
            /*偶数: even,奇数　odd*/
            background-color: purple!important;
        }

        /*伪类选择器: 根据子元素的数量*/
        ol :only-child {
            background-color: #0388F1;
        }

        ol li:only-child {
            background-color: #FFE80E;
        }

        ul li:nth-last-child(3) {
            background-color: #882211;
        }


        ol li:nth-of-type(3) {
            background-color: #FFE80E;
        }

        :empty {
            width: 220px;
            height: 270px;
            background-color: coral;
        }

        :empty:after {
            content: '看到我了吗?亲';
        }

        :empty:before {
            /*通过伪类添加的元素,默认都是行内元素,不支持宽高设置,可以通过设置背景图片的方式来间接处理*/
            content: url("../0814/images/dog.jpg");
        }








    </style>
</head>
<body>
<ul>
    <li id="item1">1</li>
    <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>

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

运行实例 »

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

运行结果图

屏幕快照 2018-08-16 下午6.31.33.png

手抄图：CSS常用的三种单位案例

WechatIMG1883.jpeg

总结：

  1. px 屏幕像素,相对于显示器;

  2. 2.em 元素单位,相对于当前元素字体大小,1em = 16px;

3.rem 根元素单位 r=root, 1rem = 1em = 16px;

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