html – 具有“type”属性与make-up属性的CSS属性选择器和区分大小写（html中的type属性）

25-02-14 14

最近很多小伙伴都在问html–具有“type”属性与make-up属性的CSS属性选择器和区分大小写和html中的type属性这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展11-

最近很多小伙伴都在问html – 具有“type”属性与make-up属性的CSS属性选择器和区分大小写和html中的type属性这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展11-1 css属性选择器、CSS 伪元素选择器和属性选择器、css 属性选择器 - 根据html元素的name属性值选择改元素、CSS 选择器属性指南：id，class 和属性选择器等相关知识，下面开始了哦！

本文目录一览：

html – 具有“type”属性与make-up属性的CSS属性选择器和区分大小写（html中的type属性）
11-1 css属性选择器
CSS 伪元素选择器和属性选择器
css 属性选择器 - 根据html元素的name属性值选择改元素
CSS 选择器属性指南：id，class 和属性选择器

html – 具有“type”属性与make-up属性的CSS属性选择器和区分大小写（html中的type属性）

我正在尝试根据其type属性设置OL样式.所有UL和OL的列表样式属性之前已经被另一个我无法修改的CSS样式表消灭了,我需要重新设置列表样式,将类型考虑在内,即如果OL应该使用Roman人物或字母数字等

我想,这很容易;我将使用属性选择器根据type属性的值来定位OL.属性选择器区分大小写,所以这应该很简单,对吧？

错 – 至少在您尝试使用标准“类型”属性时.

这是一个例子(有效)：

/* Remove default list style */
ul,ol { list-style:none; }

/* This works,using a non-standard foo attribute. The selector is case sensitive,so I can target 'i' and 'I' separately */
ol[foo='i'] {
  list-style-type:lower-roman;
}

ol[foo='I'] {
  list-style-type:upper-roman;
}

<ol foo="i">
  <li>Styled with lower case roman</li>
  <li>Styled with lower case roman</li>
</ol>

<ol foo="I">
  <li>Styled with uppercase roman</li>
  <li>Styled with uppercase roman</li>
</ol>

现在,用类型替换foo并再试一次：

/* Remove default list style */
ul,ol { list-style:none; }

/* Trying to use the standard type attribute,the selector is no longer case sensitive,so I cannot style 'i' and 'I' individually .... */
ol[type='i'] {
  list-style-type:lower-roman;
}

ol[type='I'] {
  list-style-type:upper-roman;
}

<ol type="i">
  <li>Should be lower-case roman</li>
  <li>Should be lower-case roman</li>
</ol>

<ol type="I">
  <li>Should be upper-case roman</li>
  <li>Should be upper-case roman</li>
</ol>

现在它就像选择器不再区分大小写,并且两个列表都受到影响,并且都使用大写罗马.

我无法找到任何关于这是否是正确行为的信息,也就是说,使用非标准属性(如’foo’)使用已知属性(如’type’v.s)时.在Chrome和Firefox中都会发生这种情况的事实让人相信它不是一个错误.

有任何想法吗？

这是一个混乱的CodePen：https://codepen.io/haukurhaf/pen/NOQYOz

解决方法

这个以及强制属性选择器匹配区分大小写的更广泛的用例已在 the introduction of a case-sensitive attribute selector flag s中得到解决：

ol[type='i' s] {
  list-style-type:lower-roman;
}

ol[type='I' s] {
  list-style-type:upper-roman;
}

现在我们等待实施……

HTML规范似乎表明ol的type属性的行为是不正确的,但是它对某些关键字的使用使得它不到100％清晰. Section 4.16.2使用“必须”：

Attribute selectors on an HTML element in an HTML document must treat the values of attributes with the following names as ASCII case-insensitive,with one exception as noted 07002:

…

type (except as specified in the rendering section)

All other attribute values and everything else must be treated as entirely case-sensitive for the purposes of selector matching.

并指向section 14.3.8,它使用abstract of section 14中描述的“预期”(tl; dr：浏览器不一定违反规范,如果它选择不遵循所谓的“预期”行为)：

The following rules are also expected to apply,as presentational hints:

06001

In the above style sheet,the attribute selectors for the ol and li elements are expected to be treated as case-sensitive.

鉴于后者所描述的预期行为更符合作者的期望,而不是实际的浏览器行为,我会说尽管“预期”一词具有允许性,但这确实是不正确的行为.

11-1 css属性选择器

一基础选择器

标签选择器：选择的标签的‘共性’，而不是特性
div{}、ul{}、ol{}、form{}
类选择器：.Box{}
id选择器：#Box{} 只能选择器的特性，主要是为了js
*通配符选择器：重置样式

例子：

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <Meta charset="UTF-8"> 5     <title>css学习</title> 6     <style> 7         /*#标签选择器*/ 8         p{ 9             color: red;10         }11         /*类选择器*/12         .c1{13             color:green;14         }15         /*id选择器*/16         #d2{17             color: yellow;18 19         }20     </style>21 </head>22 <body>23 <div>div标签</div>24 <div id="d2">div标签2</div>25 <p >p标签</p>26 <span >我是span标签</span>27 <span>我是span2号</span>28 29 </body>30 </html>

二高级选择器

1 后代选择器子带选择器（儿子选择器）毗邻选择器弟弟选择器

例子：

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <Meta charset="UTF-8"> 5     <title>高级选择器</title> 6     <style> 7         /*后代选择器(儿子，孙子，子子孙孙)*/ 8         div a{ 9             color: red;10         }11         /*儿子选择器*/12         div>a{13             color:blue14         }15         /*毗邻选择器，就是a和span紧挨着*/16         a+span{17             color:yellow18         }19         /*弟弟选择器,相当于这个标签下面的所有标签都生效*/20         a~span{21             color:aqua;22         }23     </style>24 </head>25 <body>26 <div>27     <div>28         <p>29             <a>我是孙子p标签</a>30         </p>31     </div>32     <a>我是儿子p标签</a>33     <span>我是span1号</span>34     <span>我是span2号</span>35 36 </div>37 38 39 </body>40 </html>

2 交集选择器

交集选择器：第一个选择器是标签选择器，第二个选择器是类选择器

form input.active{
                width:200px;
            }

3 伪类选择器

例子：

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <Meta charset="UTF-8"> 5     <title>伪类选择器</title> 6     <style> 7         /*去除超链接的下划线*/ 8         a{ 9             text-decoration:none;10         }11         /*鼠标放到超链接上线显示的样式*/12           a:hover{13             color: red;14 15                 }16 17         /*设置第一个首字母的样式*/18         p:first-letter{19             color: red;20             font-size: 30px;21 22         }23         /* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/24         p:before{25             content: 'alex';26         }27         /*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/28 29         p::after{30 31             /*解决浮动带来的问题*/32             content:'.';33             display: block;34             /*width: 100px;35             height: 100px;36             background-color: red;*/37             visibility: hidden;38             height: 0;39         }40     </style>41 </head>42 <body>43 <p>我是p标签1</p>44 <a href="http://www.baidu.com">百度一下</a>45 46 </body>47 </html>

三样式权重问题

1 行内的样式>内接样式>外接

例子：

 1 <!--外接式和导入式只能同时存在一个--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5     <Meta charset="UTF-8"> 6     <title>css引入方式</title> 7     <!--文件类型内接式--> 8     <style type="text/css"> 9         p{10             color: green;11             width: 100px;12             height: 100px;13         }14     </style>15     <!--外接式，不用写style-->16     <link rel="stylesheet" href="./css/index.css">17     <!--导入式-->18     <style type="text/css" media="screen">19         @import url('./css/index.css');20 21     </style>22 </head>23 <body>24 <div >25     我是一个div26 </div>27 <p>段落</p>28 <a href="#">百度</a>29 30 </body>31 </html>

2 权重问题比较

100>010>001
id>类>标签

例子：

 1 <!--优先级大小--> 2 <!--id class 标签 三者依次从左到右的个数，那个左边的数字大，那个就会生效，所以pa生效--> 3 <!DOCTYPE html> 4 <html lang="en"> 5 <head> 6     <Meta charset="UTF-8"> 7     <title>选择器</title> 8     <!--下面这个是把默认的样式重置--> 9     <link rel="stylesheet" type="text/css" href="https://unpkg.com/reset-css@4.0.1/reset.css">10     <style type="text/css" media="screen">11         /*1 0 0*/12         #pa{13             color: yellow;14 15         }16         /*0 1 0*/17         .app{18             color:red;19         }20         /*0 0 1*/21         p{22             color: blue;23         }24 25     </style>26 </head>27 <body>28 <div id="Box">29     <div>30         <div>31             <div >32                 <p id="pa" >猜猜我是什么颜色</p>33 34             </div>35         </div>36     </div>37 38 </div>39 <p>段落</p>40 41 </body>42 </html>

四样式继承问题

继承来的属性权重为0，如果权重都为0，谁描述的近谁优先，就是写的越详细越优先

继承和权重
记住：有一些属性是可以继承下来： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

例子：

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4     <Meta charset="UTF-8"> 5     <title>继承</title> 6     <style> 7         *{ 8             padding: 0; 9             margin: 0;10         }11         div{12             width: 200px;13             height:100px;14             background-color: green;15             color:red;16             font-size: 20px;17             text-align:center;18             line-height: 100px;19             /*设置行高可以让文字居中显示*/20         }21     </style>22 </head>23 <body>24 <div>25     <p>德国</p>26 </div>27 28 29 </body>30 </html>

CSS 伪元素选择器和属性选择器

伪元素

能使用伪元素来选择元素中的一些特殊位置

一、给段落定义样式

:first-letter 首字母（只能用于块元素）
:first-line 第一行

1、为 p 元素中的第一个字符设置颜色为黄色，字体为 30px

p:first-letter{color:yellow;font-size:30px;}

<p> 这是一个段落 </p>

2、为 p 中的第一行设置背景颜色为绿色 (多写点)

p:first-line{background-color:green;}

二、元素前后部分

:before 表示元素最前面的部分（紧随着开始标签的后面）
:after 表示元素最后面的部分（紧挨着结束标签的前面）

一般 before 和 after 都要结合 content 这个样式一起使用，通过 content 向 before 或 after 的位置添加一些内容。

所添加的内容因为是通过 css 添加的所以无法选中这部分内容。

1、在 p 元素后面添加文字内容

p:after{content:"会出现在元素的最后面";color:blue;}

2、在 p 元素前面添加文字（使用伪类元素插入的内容 “会出现在元素的最前面” 这部分内容不可选中）

p:before{content:"会出现元素的最前面";color:orange;}

属性选择器

按属性选择元素，可以对具有给定属性或属性值的元素进行格式化，按属性选择要设置的元素

语法结构：

No1、首先是选择器（要考察其属性的元素的选择器）

No2、接着输入属性的名称（元素要考察的属性的名称）

方括号 [ ], 包围目标属性和目标值。

No3、选择相应的属性选择器，属性选择器有：

[属性名] 匹配具体的属性，不问具体属性值是什么
[属性名 ="value"] 属性值符合条件的元素将被选中
[属性名～="value"] 属性值包含这里的 value 的元素将被选中（属性值还可以包含其他内容，不同的属性值之间空隔分开）必须匹配完整的单词，而不是单词的一部分。
[属性名 |="value"] (前面是管道符号 |，不是 1 或字母 L)，表示属性值等于这里的 value 或是以 value - 开头的元素将会被选中。不用输入连字符
[属性名 ^="value"] 表示属性值以这里的 value 开头 (作为完整的单词，或单词的一部分) 的元素将被选中
[属性名 $="value"] 表示属性值这里以 value 结尾（作为完整的单词，或单词的一部分）的元素将被选中
[属性名 *="value"] 表示属性值至少包含这里的 value 一次的元素将被选中，value 不必是属性值中的完整单词

实例：

1. 选择所有具有 class 属性的段落 p，设置其前景色为红色

p[class]{color:red}
<p class="b1">第一个段落</p>
<p class="b2">第二个段落</p>
<p>第三个段落</p>

2. 选择任何 lang 属性值等于 en（必须完全匹配）的 p 元素，设置前景色为红色

p[lang="en"] {color:red}
<p lang="en">第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>

3、~= 可以测试单词的部分匹配，即匹配以空格相邻的多个单词中的一个 (完整单词)。选择 class 属性中属性值中有 boxone 的 article 元素，并设置其背景颜色为黄色。

article[class~="boxone"] {background-color:yellow}
<article class="boxone content">article</article>
<article class="boxoone">center</article>

(1) *= 选择器可以匹配部分字符串（不需要完整的单词）

article[class*="box"] {background-color:yellow} √

(2) 当写成如下形式的时候，这个选择器将无法匹配，因为 box 不是空格分隔的单词列表中某个完整的单词。

article[class~="box"] {background-color:yellow} ×

4、|= 选择任何带有 lang 属性且属性值是以 es 开头的 h2，设置前景颜色为蓝色。

h2[lang|="es"] {color:blue}
<h2 lang="es">第一个二级标题</h2>
<h2 lang="zh">第二个二级标题</h2>

5、可以通过联合使用多种选择器，选择既有 href 属性，又有任意属性值包含单词 box 的 class 属性的 a 元素，设置背景颜色为橙色。

a[href][class~="box"] {background-color:orange}
<a href="http://www.baidu.com">百度</a>
<a href="#" class="box link">未链接</a>
<a href="http://www.baidu.com" id="box">其他进入方式</a>

6、*= 选择器选择所有既有 href 属性，又有任意属性包含 are（作为完整单词或单词的一部分，如 hare、dare。无论 are 出现在属性值的什么位置）的 title 属性的 a 元素。

a[href][title*="are"] {font-size:30px}
<a href="#" title="百度are">百度</a>
<a href="#" title="sinlangsre">新浪</a>
<a href="#" title="wangyi">网易</a>

7、^= 选择器匹配任何 href 属性以 http:// 开头 (作为完整的单词，或单词的一部分) 的 a 元素。

a[href^="http://"] {background-color:red}
<a href="http://www.baidu.com">百度</a>
<a href="#">新浪</a>

8、匹配任何 src 属性完全等于 logo.png 的 img 元素。

img[src="wj1.png"] {border:1px solid green}
<img src="wj.png">

9、选择器的精确度比前一个低，匹配任何 src 属性值以。png 结尾的 img 元素。

img[src$=".png"] {border:1px solid green}
<img src="wj.png">
<img src="1.jpg">

css 属性选择器 - 根据html元素的name属性值选择改元素

css属性选择器语法：

[attribute=value] 如：[target=-blank] /*选择所有使用target="-blank"的元素*/
或 
[attribute~=value] 如：[title~=flower]  /*选择标题属性包含单词"flower"的所有元素*/
或
[attribute|=language] 如：[lang|=en] /*选择一个lang属性的起始值="EN"的所有元素*/

登录后复制

css属性选择器实例一：

选择所有使用target="_blank"的a元素



<style>
a[target=_blank]
{
background-color:yellow;
}
</style><p>The link with target="_blank" gets a yellow background:</p>

<a href="http://www.manongjc.com">manongjc.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>

登录后复制

在线运行

立即学习“前端免费学习笔记（深入）”；

css属性选择器实例二：

选择标题属性包含单词"flower"的所有元素



<style>
[title~=flower]
{
border:5px solid yellow;
}
</style><p>The image with the title attribute containing the word "flower" gets a yellow border.</p>

<img  src="/images/online_demo/klematis.jpg" title="klematis flower" alt="css 属性选择器 - 根据html元素的name属性值选择改元素" ><img  src="/images/online_demo/klematis.jpg" title="flowers" alt="css 属性选择器 - 根据html元素的name属性值选择改元素" ><img  src="/images/online_demo/klematis.jpg" title="landscape" alt="css 属性选择器 - 根据html元素的name属性值选择改元素" ><p><b>Note:</b> For [<i>attribute</i>~=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>

登录后复制

在线运行

立即学习“前端免费学习笔记（深入）”；

css属性选择器实例二：

选择一个lang属性的起始值="en"的所有元素



<style>
[lang|=en]
{
background:yellow;
}
</style><p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>

<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>

登录后复制

在线运行

立即学习“前端免费学习笔记（深入）”；