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. bat 读取 ini 文件

    bat 读取 ini 文件 参考链接:https://stackoverflow.com/questions/2866117/windows-batch-script-to-read-an-ini-f ...

  2. PC客户端自动化测试工具--pywinauto

    1.安装 pywinauto pip install pywinauto 2.打开PC的.exe可执行文件的,一种方式就够用了 from pywinauto import application ap ...

  3. JS中BOM和DOM之间的关系

    一.Javascript组成JavaScript的实现包括以下3个部分:1.核心(ECMAScript):描述了JS的语法和基本对象.2.文档对象模型 (DOM):处理网页内容的方法和接口.3.浏览器 ...

  4. File "/usr/bin/pip", line 11, in <module> sys.exit(__main__._main()) AttributeError: 'module' object has no attribute '_main'

    多个版本pip共存导致 直接使用pip2进行安装即可 如:pip2 install requests

  5. Create Advanced Web Applications With Object-Oriented Techniques

    Create Advanced Web Applications With Object-Oriented Techniques Ray Djajadinata Recently I intervie ...

  6. Eclipse断点种类

    本文是Eclipse调试(1)——基础篇 的提高篇.分两个部分: 1) Debug视图下的3个小窗口视图:变量视图.断点视图和表达式视图 2) 设置各种类型的断点 变量视图.断点视图和表达式视图 1. ...

  7. 使用Jieba提取文章的关键词

    import jieba.analyse as analyse import matplotlib.pyplot as plt from wordcloud import WordCloud data ...

  8. 建造者模式（Builder）---创建型

    1 定义域特征 定义:将一个复杂的对象构建与其表示分离,使得同样的构建过程可以创建不同的表示.特征:用户只需要指定需要建造的类型即可,对于中间的细节不考虑. 本质:分离整体构建算法和部件构造.构建一个 ...

  9. JS 定时器-setInterval、clearInterval、setTimeout

    在微信小程序里写的: // pages/splash/splash.js const app = getApp() Page({ data: { remainSecond: }, // 页面渲染完成后 ...

  10. 【线性代数】3-3:秩(Rank)

    title: [线性代数]3-3:秩(Rank) categories: Mathematic Linear Algebra keywords: Rank Row Reduced form Pivot ...