CSS选择的艺术

常用常见的选择器：

类选择器[ .class ]，id选择器[ #id ]，全局选择器[ * ]，元素选择器[ element ]

根据层次关系定位：

(1) element, element

例如:　　div, p 　　【选择：所有的div 和 p】

(2) element  element

例如:　　div p 　　【选择：所有div中的 p】

(3) element > element

例如:　　div>p　　【选择：所有父节点是div的p】

（4）element + element

例如:　　div + p　　【选择：紧邻在div标签之后的一个p标签】

（5）element ~ element

例如:　　div ~ p　　【选择:在div标签之后的所有p标签】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="selector.css">

</head>

<body>

    <div>div

        <p>p</p>

    </div>

    <p>p</p>

    <p>p</p>

    <div>div

        <div>div

            <p>p</p>

        </div>

    </div>

    <div>div

        <span>span

            <p>p</p>

        </span>

    </div>

    <span>span</span>

    <p>p</p>

</body>

</html>

selector.html

div, span, p{

    display: inline-block;

    width: 100px;

    height: 100px;

    padding: 10px;

    border: solid 1px black;

    overflow: hidden;

}

div , p{

    background: red;

}

selector.css

属性相关

（6）[ attribute ]

 例如：　　[ class ]　　【选择：所有含有class属性的标签】

（7）[ attribute = value ]

例如:　　[ class = title ]　　选择:所有 (class属性只有一个值且是 title 的所有元素)

(8) [ attribute ~= value ]

例如:　　[ class ~= title ]　　【选择所有(class属性中含有一个title值的标签)】

(9)[ attribute |= value ]

例如:　　[ class |= title ]　　选择所有(class属性中只有一个值，且这个值开头的单词是title。) 注意：这个值是以 - 分割单词的

（10） [ attribute ^= value ]

例如:　　[ class ^= title ]　　选择所有class属性的第一个值的开头是title的元素

（11） [ attribute $= value]

例如:　　[ class $= title ]　　【选择所有class属性最后一个值的结尾是title的元素】

（12） [ attribute *= value ]

例如:　　[ class *= title ]　　【选择：所有class属性任何一个值中含有title的元素】

div, span, p{

    display: inline-block;

    width: 100px;

    height: 100px;

    padding: 10px;

    border: solid 1px black;

    overflow: hidden;

}

/*

[ class ]{

    background: red

}

[ class = title  ]{

    background: red

}

[ class ~= title  ]{

    background: red

}

[ class |= title  ]{

    background: red

}

[ class ^= title  ]{

    background: red

}

[ class $= title  ]{

    background: red

}

[ class *= title  ]{

    background: red

} */

selector.css

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="selector.css">

</head>

<body>

    <div class="title"> class = title </div>

    <div class="title selector">class = title selector</div>

    <div class="selector title">class = selector title</div>

    <div class="title_selector"> class = title_selector</div>

    <div class="selector_title">class = selector_title</div>

    <div class="title-selector"> class = title-selector</div>

    <div class="selector-title">class = selector-title</div>

</body>

</html>

attr_selector.html

伪类选择

常用于a标签：

(13):active

例如:　　a.active　　【选择：正在被点击的a元素】

(14）:hover

例如:　　a.hover　　【选择：鼠标正在在它上面移动的a元素；也用于实现下拉菜单（drop down manu）】

(15):link

例如:　　a.link　　【选择：尚未被访问的a链接】

(16):visited

例如:　　a.visited　　【选择已经访问过的a链接】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="selector.css">

</head>

<body>

    <a href="#" class="hover">hover</a>

    <a href="#" class="active">active</a>

    <a href="https://www.test.com" class="link">link</a>

    <a href="#" class="visited">visited</a>

</body>

</html>

a_selector.html

div, span, p, a{

    display: inline-block;

    width: 100px;

    height: 100px;

    padding: 10px;

    border: solid 1px black;

    overflow: hidden;

}

a.hover:hover{

    color: orange;

}

a.active:active{

    color:red;

}

a.link:link{

    color:blue;

}

a.visited:visited{

    color:green;

}

selector.css

常用于input文本框：

(17) :check

例如:　　input:checked　　【选择：被选中的radio或checkbox】

(18):disabled

例如:　　input:disabled　　【选择：禁用的文本框】

(19):enabled

例如:　　input:enabled　　【选择：可用的文本框】

(20):focus

例如:　　input:focus　　【选择：被聚焦的文本框】

(21):required

例如:　　input:required　　【选择：必填的文本框】

(22):optional

例如:　　input:optional　　【选择：不必填项（可选择填写）的文本框】

(23):read-only

例如:　　input:read-only　　【选择：只读文本框】

(24):read-write

例如:input:read-write　　【选择：可读可写文本框(disabled也被选择了)】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="selector.css">

</head>

<body>

    <div>

        <input type="radio" name = 'sex' checked>

        <label>checked</label>

    </div>

    <div>

        <input type="radio" name = 'sex'>

        <label>uncheck</label>

    </div>

    <div>

        <input type="text" disabled> disabled

    </div>

    <div>

        <input type="text">enabled

    </div>

    <div>

        <input type="text" required>required

    </div>

    </div>

    <div>

        <input type="text" readonly>readonly

    </div>

</body>

</html>

input_selector.html

div, span, p, a{

    display: inline-block;

    width: 200px;

    height: 100px;

    padding: 10px;

    border: solid 1px black;

    overflow: hidden;

}

/* input:checked + label{

     color: red;

} */

/*

input:disabled{

    border: red 5px solid;

}

input:enabled{

    border: green 5px solid;

}

input:focus{

    border: red 5px solid;

}

input:required{

    border: black 5px solid;

}

input:read-only{

    border: yellow 5px solid;

}

input:read-write{

    border: blue 5px solid;

}

input:optional{

    border: red 5px solid;

}

*/

selector.css

(25):invalid

例如:　　input:invalid　　【选择：输入值不合法的文本框】

(26):valid

例如:input:valid

选择输入值合法的文本框

(27):in-range

例如:　　input:in-range　　【选择：输入值长度或大小在规定范围之内的文本框】

(28):out-of-range

例如:　　input:out-of-range　　【选择：输入值长度或大小在规定范围之外的文本框】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="selector.css">

</head>

<body>

    <div>

        <input type="number" min="5" max="10"> range[5-10]

    </div>

    <div>

        <input type="text" minlength="5" maxlength="10"> length-range[5-10]

    </div>

    <div>

        <input type="email" >email

    </div>

</body>

</html>

input_selector.html

div, span, p, a{

    display: inline-block;

    width: 200px;

    height: 100px;

    padding: 10px;

    border: solid 1px black;

    overflow: hidden;

}

input:in-range{

    border: 5px solid green;

}

input:out-of-range{

    border: 5px solid red;

}

input:valid{

    border: 5px solid green;

}

input:invalid{

    border: 5px solid red;

}

selector.css

文章段落相关：

(29)::after

例如:　　div::after　　【在div内容的后面插入内容】

(30)::before

例如:　　div::before　　【在div内容的前面插入内容】

(31)::first-letter

例如:　　div::first-letter　　【选择：div内容的第一个字母】

(32)::first-line

例如:　　div::first-line　　【选择：div内容的第一行】

若first-letter和first-line不同的style修饰同一个div：

(33)::selection

选择:鼠标选中的一段文字

 新发现 :由::before和::after插入的文字无法被鼠标选中

和父结点相关:

(34):first-child

例如:　　p:first-child　　【选择 ：p元素，满足：它是它父元素的第一个元素】

(35):last-child

例如:　　p:last-child　　【选择： p元素，满足：它是它父结点的最后一个元素】

(36):first-of-type

例如:　　p:first-of-type　　【选择：p元素，满足：它是它父节点的第一个p元素】

(37):last-of-type

例如:　　p:last-of-type　　【选择：p元素，满足：它是它父节点的最后一个p元素】

(38):nth-child(n)

例如:　　p:nth-child(2)　　【选择 ：p元素，满足：它是它父节点的第二个元素】

p:nth-child(2n)　　【选择 ：p元素，满足：它是它父节点的第偶数个元素】

(39):nth-last-child(n)

例如:　　p:nth-last-child(2)　　【选择 ：p元素，满足：它是它父节点的倒数第二个元素】

p:nth-last-child(2n)　　【选择 ：p元素，满足：它是它父节点的倒数第偶数个元素】

(40):nth-of-type(n)

例如:　　p:nth-of-type(2)　　【选择 ：p元素，满足：它是它父节点的第二个p元素】

例如:　　p:nth-of-type(2n)　　【选择： p元素，满足：它是它父节点的第偶数个p元素】

(41):nth-last-of-type(n)

例如:　　p:nth-last-of-type(2)　　【选择： p元素，满足：它是它父节点的倒数第二个p元素】

例如:　　p:nth-last-of-type(2n)　　【选择 ：p元素，满足：它是它父结点的倒数第偶数个p元素】

(42):only-child

例如:　　p:only-child　　【选择：p元素，满足：它是它父结点的唯一元素（独生）】

(43):only-of-type

例如:　　p:only-of-type　　【选择：p元素，满足：它是它父结点的唯一p元素（可能有其它非p元素）】

其它：

(44):root

选择根节点

(45):not(selector)

例如:　　div :not(p)　　【选择:div内所有不是p的元素(div和:之间有空格)】

(46):lang(language)

例如:　　div:lang(zh)　　【选择:属性lang=it的所有div元素】

 
 
测试于Chrome浏览器
 
上面的选择器之间还能相互组合使用，精确定位，在组合的时候也要考虑其优先级和性能等问题。
 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="selector.css">

</head>

<body>

  <div class="main">

      <ul>

          <li>banner</li>

          <li>banner</li>

          <li>banner</li>

          <li>banner</li>

          <li>banner</li>

      </ul>

        <div class="news">

                <ul>

                    <li>新闻</li>

                    <li>新闻</li>

                    <li>新闻</li>

                    <li>新闻</li>

                    <li>新闻</li>

                </ul>

                <ul>

                      <li>新闻</li>

                      <li>新闻</li>

                      <li>新闻</li>

                      <li>新闻</li>

                      <li>新闻</li>

                  </ul>

            </div>

            <div class="notice">

                <ul>

                    <li>公告</li>

                    <li>公告</li>

                    <li>公告</li>

                    <li>公告</li>

                    <li>公告</li>

                </ul>

                <ul>

                      <li>公告</li>

                      <li>公告</li>

                      <li>公告</li>

                      <li>公告</li>

                      <li>公告</li>

                  </ul>

            </div>

  </div>

</body>

</html>

selector.html

li{

    display: inline-block;

    width: 100px;

    height: 100px;

    padding: 10px;

    border: solid 1px black;

    overflow: hidden;

}

.news li:nth-child(2n){

    background: yellow

}

div.main > ul li:nth-child(2n){

    background: green

}

.main > :last-child li:nth-child(2n){

    background: black

}

selector.css

 

JavaScript（4）——CSS选择的艺术的更多相关文章

  1. 30个你必须记住的CSS选择符

    所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...

  2. 整理CSS选择符

    1.星号选择器 ;; } 星号选择器将匹配页面里的每一个元素.很多开发者使用这个技巧将外边距和内边距重置为零.虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它.它给浏览器带来大量不必 ...

  3. JQuery学习笔记【CSS选择符】--02

    Jquery的程序入口: <html> <head> <title></title> <script type="text/javasc ...

  4. [css选择器]总结：IE6不支持的CSS选择符

    转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...

  5. jQuery基础与JavaScript与CSS交互-第五章

    目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 Ajax Sliverlight Fle ...

  6. 20款有用的JavaScript和CSS库

    Web开发与设计已经发展达到了新的高峰.创建一个网站并不是那么简单了,因为它使用的是几年前.今天是时间创造有吸引力的网站,不仅吸引了游客的关注也让他们订婚.另外,和功能的有吸引力的功能添加到该网站不应 ...

  7. 网站前端性能优化之javascript和css

    之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶 ...

  8. JavaScript修改CSS属性的实例代码

    用原生的javascript修改CSS属性的方法. 用JavaScript修改CSS属性 只有写原生的javascript了.  1.用JS修改标签的 class 属性值:  class 属性是在标签 ...

  9. JavaScript 与 CSS 滚动实现最新指南

    一些(网站)滚动的效果是如此令人着迷但你却不知该如何实现,本文将为你揭开它们的神秘面纱.我们将基于最新的技术与规范为你介绍最新的 JavaScript 与 CSS 特性,(当你付诸实践时)将使你的页面 ...

随机推荐

  1. vue.js 父子组件间 props 数据同步处理

    常见的场景: 在一个vue组件A中,使用另外一个组件B.A将自己的数据通过B组件的Props属性(propX)传递到B组件实例内部,B组件内部会修改该Props属性(propX)的值,此时在A组件内部 ...

  2. JLOI2016 侦查守卫

    侦查守卫 小R和B神正在玩一款游戏.这款游戏的地图由 N 个点和 N-1 条无向边组成,每条无向边连接两个点,且地图是连通的.换句话说,游戏的地图是一棵有 N 个节点的树. 游戏中有一种道具叫做侦查守 ...

  3. Solving Docker permission denied while trying to connect to the Docker daemon socket

    The error message tells you that your current user can’t access the docker engine, because you’re la ...

  4. duilib学习领悟(1)

    学习duilib已经有一段时间,一直没时间写总结,今天得出空来,写写心得体会! 由于本人知识有限,若有错误地方,望批评指正.多谢.! 初识duilib 刚开始接触duilib的时候,觉的他好神奇,整个 ...

  5. Idea使用Lombok简化实体类代码

    引入相应的maven包 <dependency> <groupId>org.projectlombok</groupId> <artifactId>lo ...

  6. not(expr|ele|fn)从匹配元素的集合中删除与指定表达式匹配的元素

    not(expr|ele|fn) 概述 从匹配元素的集合中删除与指定表达式匹配的元素   参数 exprStringV1.0 一个选择器字符串.深圳dd马达 elementDOMElementV1.0 ...

  7. 关于shell输出的一些问题

    有时候在调试程序中需要将打印到屏幕上的信息保存中,一般情况下可以使用 >fileName,应该注意到有些情况下程序可能会在标准错误输出中输出这些内容,这时需要时 progam 2>1.tx ...

  8. Postman中的全局/环境/集合变量的使用及优先级

    变量的使用场景 Postman的变量主要用于参数化和关联 应用1: 常用变量可以按使用范围设置成集合或全局变量 应用2: 一套接口要在不同的环境上测试时, 可以新建两个环境,比如test环境和stag ...

  9. Web安全（白帽子讲）之第二篇

    第二章:浏览器安全 2.1.同源策略 是一种约定,它是浏览器最核心也是最基本的安全功能. web是构建在同源策略的基础之上,浏览器只是针对同源策略的一种实现 影响“源” 的因素有:host(域名或IP ...

  10. Codeforces 915E. Physical Education Lessons（动态开点线段树）

    E. Physical Education Lessons 题目:一段长度为n的区间初始全为1,每次成段赋值0或1,求每次操作后的区间总和.(n<=1e9,q<=3e5) 题意:用线段树做 ...