玩透 CSS 3 选择器,网页元素任意操作 -cyy

标签选择器:(范围比较大)

* 通配符选择器,全部选择器

h1,h2,p,div...  标签选择器

 

类与ID选择器:

.class 类选择器

#id ID选择器

注意:ID选择器是唯一的,范围比较小,个人不建议使用id来定义样式,建议使用class

 

多类样式声明:

class="class1 class2 class3"

 

结构选择器:

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"name="viewport" content="width=device-width,initial-scale=1.0"="keywords"="关键词1,关键词2,关键词3"="description"="网站描述bla bla"title>网站标题</style>
        /* 后代选择器 */
        main article h2{
            color:red;
        }
         直接子元素选择器 
        main article>h2
            backgroundpink 兄弟选择器,取后面不取前面 
        article h1~h2
            text-decoration underline 紧挨着的兄弟选择器,取后面不取前面 
        article h1+h2
            font-size12px}
    bodymain>
        article>
            h1>h1h2>h2aside>
                aside
                >aside-h2html>

 

属性选择器:

>
        h1[title][id] 指定属性值 
        h1[title='cyy']
           background 指定值开始 
        h1[title^='cyy']
           text-decoration 指定值结束 
        h1[title$='cyy']
           font-sizeh1 title id>h1-title-id='cyy'>h1-title='cyyhahaha'='cyyhahahacyy'>

 

属性选择器内容值筛选:

 指定值出现在任意位置 
        h1[title*='cyy'] 指定值出现在任意位置,独立词两边有空格 
        h1[title~='cyy'] 单独的指定值本身,或者后面跟着中划线 
        h1[title|='cyy']='cyyhahaha cyy'='cyy hahahacyy'='cyy-hahaha >

 

伪类选择器:


        a:link}
        a:visitedyellow
        a:hovergreen
        a:activeorange

        input:focus;
            outlinenone
        input:active
        input:hovera href="http://www.baidu.com" target="_blank">baiduainput type="text" value="111">

 

实际开发过程中建议使用第三方库

 

目标与根伪类以及空元素的处理:


        main
            height1000px 锚点目标 
        div:target 根元素 
        html 根伪类元素 
        :rootlightblue 空元素 
        li:empty
            display="#cyy">cyy>

    ulli>111></div id="cyy"div>

 

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型&#160;...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...