W3C文档 5 . selector 选择器，自己的学习笔记，欢迎指正

最新推荐文章于 2024-07-08 23:31:51 发布
最新推荐文章于 2024-07-08 23:31:51 发布
阅读量216 收藏
点赞数
分类专栏： css 笔记 文章标签： css html html5
原文链接：https://www.w3.org/TR/2011/REC-CSS2-20110607/selector.html
版权

选择器

通配符选择器

元素选择器(type selectors)

后代选择器

用空格分隔

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./text.css">
</head>

<body>
    <ul>
        <li>111
            <h1>111</h1>
            <h1>111
                <p>我是个p</p>
            </h1>
        </li>
        <li>111</li>
        <li>111</li>
        <li>111<h1>111</h1>
        </li>
        <h1>111</h1>
        <h1>111</h1>
        <h1>111</h1>
    </ul>
</body>

</html>

li  h1 {
    color: red;
}
li  p {
    color: pink;
}

在这里插入图片描述

子选择器

用大于号来链接

后代选择器可以跨多个级别

子选择器只能选择他的亲孩子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./text.css">
</head>

<body>
    <ul>
        <li>111
            <h1>被选中</h1>
            <h1>被选中
                <p>我是p
                    <---这里p会变颜色是因为继承->
                    <a href="#">aaa
                    </a>
                </p>
            </h1>
        </li>
        <li>111</li>
        <li>111</li>
        <li>111<h1>被选中</h1>
        </li>
        <h1>111</h1>
        <h1>111</h1>
        <h1>111</h1>
    </ul>
</body>

</html>

li > h1 {
    color: red;
}
li > a {
    color: pink;/*没有被选中了*/
}

在这里插入图片描述

相邻兄弟选择器

语法是e1 + e2

  • e2是被选择的
  • 如果e1是e2他俩父级是一个标签，并且e1在e2前面
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./text.css">
</head>

<body>
    <ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111<h1>111</h1>
        </li>
        <h1>被选中</h1>
        <li>111</li>
        <h1>被选中</h1>
        <h1>111</h1>
        <h1>111</h1>
    </ul>
</body>

</html>

li + h1 {
    color: red;
}

在这里插入图片描述

属性选择器

  1. [att] <--选择所有的带这个属性的元素-->

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./text.css">
</head>

<body>
    <a href="">aaa</a>
</body>

</html>

    [href] {
    color: red;
}

  2. [att=val]

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./text.css">
</head>

<body>
    <a href="www.baidu.com">aaa</a>
    <a href="#" class="example">aaa</a>
</body>

</html>

    [href] {
    color: red;
}
[class = example] {
    color: pink;
}

在这里插入图片描述

  1. [att~=val]

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./text.css">
</head>

<body>
    <a href="www.baidu.com">aaa</a>
    <a href="#" class="example text">aaa</a>
</body>

</html>

    [href] {
    color: red;
}
[class ~= example]{
    color: pink;
}

在这里插入图片描述

  1. [att|=val] 暂时还不懂

类选择器

.cls

id选择器

伪元素和伪类选择器

伪类选择器

:first-child pseudo-class
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./text.css">
</head>

<body>
    <div>
        <p>The :first-child pseudo-class matches an element that is the first child element of some other element.

            In the following example, the selector matches any P element that is the first child of a DIV element. The
            rule suppresses indentation for the first paragraph of a DIV:</p>
        <p>第二段：The :first-child pseudo-class matches an element that is the first child element of some other
            element.

            In the following example, the selector matches any P element that is the first child of a DIV element.
            The rule suppresses indentation for the first paragraph of a DIV:</p>
    </div>
</body>

</html>

div > p:first-child {
    color: red;
}/*只有第一段变成红色了*/

这样的话，第二个p就不会被选中了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./text.css">
</head>

<body>
    <P> The last P before the note.
        <DIV class="note">
            <H2>Note</H2>
            <P> The first P inside the note.
        </DIV>
</body>

</html>

div > p:first-child {
    color: red;
}

例子3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./text.css">
</head>

<body>
    <P>abc <EM>default</EM></P>
</body>

</html>

p:first-child em {
    font-weight: bold
}
/*
p em:first-child {
    font-weight: bold
}
这两个效果一样
*/
The link pseudo-classes: :link and :visited

  1. a:link表示未被访问的链接;a:visited表示已访问的链接

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./text.css">
</head>

<body>
    <A class="external" href="http://out.side/">external link</A>
</body>

</html>


    a.external:link {
    color: red
}
a.external:visited {
    color: pink;
}
The dynamic pseudo-classes: :hover, :active, and :focus
  1. a:hover 鼠标悬停上面的
a.external:link {
    color: red
}
a.external:visited {
    color: pink;
}
a:hover {
    background-color: #484848;
}
  1. a:active选择活动的链接
a.external:link {
    color: red
}
a.external:visited {
    color: pink;
}
a:active {
    background-color: #484848;
}

3.:lang

<!DOCTYPE html>
<html>
<head>
<style>
p:lang(en)
{ 
background:yellow;
}
</style>
</head>

<body>

<p>我是唐老鸭。</p>
<p lang="en">I live in Duckburg.</p>

<p><b>注释：</b>对于在 IE8 中工作的 :lang，必须声明 DOCTYPE。</p>

</body>
</html>

伪元素

:first-line
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./text.css">
</head>

<style>
    p:first-line {
        text-transform: uppercase
    }
</style>

<body>
    <P>This is a somewhat long HTML
        paragraph that will be broken into several
        lines. The first line will be identified
        by a fictional tag sequence. The other lines
        will be treated as ordinary lines in the
        paragraph.</P>
</body>

</html>

:first-letter

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./text.css">
</head>

<style>
    p {
        line-height: 1.1
    }

    p:first-letter {
        font-size: 3em;
        font-weight: normal
    }

    span {
        font-weight: bold
    }
</style>

<body>
    <p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br>
        Erbarremt over my en mijn benaeuwde vesten<br>
        En arme burgery, en op mijn volcx gebed<br>
        En dagelix geschrey de bange stad ontzet.

</body>

</html>

在这里插入图片描述

The :before and :after pseudo-elements

会在选择标签后面插入内容

<!DOCTYPE html>
<html>
<head>s
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p:after
{ 
content:"- 注意我";
}
</style>
</head>

<body>
<p>我的名字是 Donald</p>
<p>我住在 Ducksburg</p>

<p><b>注意：</b> :after在IE8中运行，必须声明 !DOCTYPE </p>

</body>
</html>
睡不醒的大南
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3基础——选择器（基于w3c school）
qq_43335204的博客
10-25 472
属性选择器 [abc^=“def”] 选择 abc 属性值以 “def” 开头的所有元素 [abc$=“def”] 选择 abc 属性值以 “def” 结尾的所有元素 [abc*=“def”] 选择 abc 属性值中包含子串 “def” 的所有元素 :root 选择器匹配文档根元素。 在 HTML 中，根元素始终是 html 元素。 结构性伪类选择器 not：选择除某个元素之外的所有元...
css-selectors:W3C选择器3级规范的实现
05-26
概述 选择器规范的Java实现。 本自述文件涵盖了2.x版的API，有关旧API的信息，请参见Wiki。 选择器匹配 选择器与中的节点匹配。 更具体地说，它们与DOMNode匹配，该DOMNode提供了对特定实现的抽象。 该库提供了W3CNode ，它包装了org.w3c.dom.Node ，但是您始终可以自己滚动。 对于简单的一次关闭选择器匹配，最简单的方法是将选择器指定为字符串： Selectors selectors = new Selectors ( new W3CNode (document)); List< Node> result = selectors . querySelectorAll( " head > :not(meta) " ); Node firstDiv = selectors . querySelector( " div " ); 如果不止一次
W3C Selector API将为JavaScript开发注入新活力
dianzongfan5428的博客
12-10 88
今天，向大家介绍DOM脚本编程领域一项令人激动的进步——W3C Selector API。迄今为止，在使用DOM2级API的前提下，要想从DOM中取得HTML元素，只能使用document.getElementById，或者使用document.getElementsByTagName然后再手工编码进行筛选。随着CSS的普及，JavaScript开发人员不断提到一个显而易见的问题：“...
CSS第三级选择器 Selectors Level 3 文档翻译
ruojianll的博客
08-02 1554
Selectors Level 3 CSS第三级选择器 文档翻译 规范源地址：https://www.w3.org/TR/2011/REC-css3-selectors-20110929/ 欢迎指正
w3c标准 - Css - （1）基本介绍及选择器
小蚂蚁的世界
03-10 877
w3c标准 - Css 1. Css基本介绍： （1）名称         层叠样式表：Cascading Style Sheets，定义如何显示HTML元素。 （2）优点         a. 使页面表现的非常统一，容易修改，更有利于精确的控制页面布局。         b. 解决内容与表现分离的问题。         c. 外部样式表极大地提高了工
select标签默认选项
热门推荐
my_potato的博客
05-08 2万+
效果：1、selected：默认选择该选项；2、disabled：该选项不能被鼠标选择；（注：选项没有被隐藏的时候）3、style="display：none"：隐藏该选项；（注：该选项不会出现在下拉列）4、value=""：该选项value为“”;（注：可做表单验证）...
jQuery学习笔记之jQuery选择器的使用
12-08
selector1,selector2,…… :选择这些名称的元素，以逗号隔开，可以是类或id名 二.层次选择器： $(“ancestor descendant”) :选择ancestor元素下的所有descendant(后代)元素 $(“parent>child”) ：选择parent下的...
CSS 学习笔记之CSS Selector
12-30
CSS1 中定义的选择器 类型选择器 用于选择指定类型的元素（其实他就是 html 标签选择器），常见用法如下： body { /*对 body 元素定义样式*/ } body,div { /*同时选择多种标签元素*/ } ID 选择器 用于选择指定 ...
04. ID选择器(id Selector)
08-31
[HTML][JavaScript][中文][初學]_04._ID選擇器(id_Selector)
jQuery Selector选择器小结
10-29
jQuery Selector选择器小结，需要的朋友可以参考下，都是一些常用的选择控制方式。
HTML <select>标签取值
饮冰室人的博客
08-15 1万+
<select name="select" id="pro_areaCode" "> <option value="0000000000">请选择</option> <option value="110000">北京市</option> <option value="120000" selected="selected">天津市</option> <option va
HTML <select>标签
anly
12-28 207
定义与用法 The select element creates a drop-down list. select元素可建立下拉列表 -------------------------------------------------------------------------------- 在HTML和XHTML中的区别 NONE 无 ------------...
html选择器selector,网页解析神器-Selector选择器全面解析
weixin_35507450的博客
06-03 2608
大部分人可能喜欢使用以下三个解析器对网页进行解析：BeautifulSoup：使用方便，支css选择器，但它有个不可忽视的缺点:慢。lxml解析库：采用xpath解析，速度快。pyquery：它提供了和jQuery类似的语法来解析HTML文档，支持CSS选择器re：正则表达式是万能通用的，不过使用它的头疼度我就不用过多解释了。。但对于某些网页结构俩说，单一的解析方法也许并不是那么方便，如果想嵌套x...
CSS里的几个小知识
07-08 197
在 中，rel=“stylesheet” 表示被链接的文档（即 mystyle.css）是一个样式表（style sheet），用于为当前页面提供样式定义。在 HTML 中，用于指定链接指向的资源地址。标签的属性，可以帮助搜索引擎更好地理解和索引网页，优化页面在不同设备上的显示，以及实现一些特定的功能，如自动刷新、设置字符集等。1、“rel” 是 “relation” 或 “relationship” 的缩写，意思是“关系；在 HTML 中， 标签的 rel 属性用于定义当前文档与被链接文档之间的关系。
CSS的选择器、常用属性、盒子模型和定位
secret010的博客
07-08 340
CSS选择器：选择页面(文档)中对应的标签，并设置样式。
旋转木马案例
喵喵的博客
07-08 499
旋转木马 如果接口需要的数据格式和原始数据提供的格式有差异 不要去改接口方法 也不要改原始数据 做一层中间件(数据处理函数/方法) <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
微信小程序：rpx详解，使用 tailwindcss最佳方案rem转rpx
Z_Wonderful的博客
07-05 237
微信小程序：rpx详解，使用 tailwindcss最佳方案rem转rpx
如何在vue3中使用scss
最新发布
qq_74351687的博客
07-08 86
需要在vite.config.ts中配置一个全局配置。在src文件下新建一个文件夹叫做styles。variable.scss用来配置全局属性。index.scss主要用来引用其他文件。reset.scss用来清除默认的样式。要使用scss首先需要下载相关的包。可以在终端使用下面的命令下载相关包。在文件夹下创建三个文件。
<class 'scrapy.selector.unified.Selector'>对象要这么继续选择元素
03-20
您可以使用XPath或CSS选择器来进一步选择元素。例如，使用XPath选择器，您可以使用以下代码来选择所有class为"example"的div元素： response.xpath('//div[@class="example"]') 使用CSS选择器，您可以使用以下代码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值