search

博客列表 >css常用的选择器--2018年8月15日

css常用的选择器--2018年8月15日

玩美者传媒的博客
玩美者传媒的博客原创
2018年08月16日 18:39:22535浏览
<!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;

上一条：CSS中常用的选择器\CSS中常用的三种单位—2018年8月16日18时31分下一条：CSS中常用的选择器及元素单位--2018-08-16 18：20
作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多