【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情。因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记。

  CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页。

CSS3属性选择器

下面是CSS3的属性选择器的语法,及使用。

元素名字[元素类型=“类型名字”]:选择器名字{
  属性:值;
  属性:值;
}

  在元素类型匹配时,就可以使用类似正则的匹配方法。

[att=val] 指定特定名字的元素

[att*=val] 匹配val*的元素,

[att^=val] 匹配val开头的元素,比如id为val1、val432432都可以。

[att$=val] 匹配val结尾的元素,比如id为1213val、fdajlval等等。

伪元素选择器

  通常,CSS中会有一些已经定义好的元素选择器,我们通过

选择器:伪元素{属性名:值}

  来定义。

  常用的伪选择器有:

1 first-line 伪元素选择器:某个元素的第一行

2 first-letter:某元素的首字母

3 after:某元素之后插入内容,如

<p>:before{
  content:123
}

4 before:某元素之前插入内容

常用选择器

root:整个DOM的元素定点,也就是html

not:排除特定的元素

empty:比如一个列表空的那个元素

target:链接指定的目标

 1 <html>
 2 <head>
 3     <style type="text/css">
 4         :target{
 5             background-color:yellow;
 6         }
 7     </style>
 8 </head>
 9 <body>
10     <p id="menu">
11         <a href="#text1">示例1</a>|
12         <a href="#text2">示例2</a>|
13         <a href="#text3">示例3</a>|
14         <a href="#text4">示例4</a>|
15         <a href="#text5">示例5</a>
16     </p>
17     <div id="text1">
18         <h2>示例文字1</h2>
19         <p>..此处省略..</p>
20     </div>
21     <div id="text2">
22         <h2>示例文字2</h2>
23         <p>..此处省略..</p>
24     </div>
25     <div id="text3">
26         <h2>示例文字3</h2>
27         <p>..此处省略..</p>
28     </div>
29     <div id="text4">
30         <h2>示例文字4</h2>
31         <p>..此处省略..</p>
32     </div>
33     <div id="text5">
34         <h2>示例文字5</h2>
35         <p>..此处省略..</p>
36     </div>
37 </body>
38 </html>

点击图片就可以看到效果

first-child:选择第一个子元素

last-child:选择最后一个子元素

nth-child:选择第n个子元素,这个还可以根据奇偶来制定,比如:

<子元素>:nth-child(even){
...
}
<子元素>:nth-child(odd){
...
}//也可以通过在括号内使用2n+1来,指定奇偶

nth-last-child:选择倒数第n个子元素

only-child:单个子元素时,指定样式

元素状态选择器

hover:当鼠标浮在元素上方时,触发

active:当鼠标按下,还没有离开时,触发。因为chrome不支持,所以没有进行测试。

focus:编辑焦点时,触发

enabled:可以使用时,触发

disabled:不可以使用时,触发

read-only:只读时,触发

read-write:可读可写时,触发

checked:被勾选触发

selection:选择时,触发

 1 <html>
 2 <head>
 3     <style type="text/css">
 4         p::selection{
 5             background:red;
 6             color:#FFF;
 7         }
 8         input[type="text"]::selection{
 9             background:gray;
10             color:#FFF;
11         }
12         td::selection{
13             background:green;
14             color:#FFF;
15         }
16     </style>
17 </head>
18 <body>
19     <p>hello!xingoo</p>
20     <hr/>
21     <input type="text" value="hello!xingoo" />
22     <hr/>
23     <table border="1" cellspacing="0" cellpadding="0" >
24         <tr>
25             <td>
26                 hello!
27             </td>
28             <td>
29                 xingoo!
30             </td>
31         </tr>
32         <tr>
33             <td>
34                 123!
35             </td>
36             <td>
37                 456!
38             </td>
39         </tr>
40     </table>
41 </body>
42 </html>

default:比如多选框,页面刷新时,默认选择触发

indeterminate:比如多选框,都没选时的样式

 1 <html>
 2 <head>
 3     <script>
 4         function radio_onchange()
 5         {
 6             
 7             var radio = document.getElementById("radio1");
 8             var text = document.getElementById("text1");
 9             console.log(text.disabled);
10             if(radio.checked){
11                 console.log("checked");
12                 text.disabled = "";
13             }else{
14                 console.log("unchecked");
15                 text.value = "";
16                 text.disabled = "disabled";
17             }
18         }
19     </script>
20     <style type="text/css">
21         input[type="text"]:enabled{
22             background-color:yellow;
23         }
24         input[type="text"]:disabled{
25             background-color:purple;
26         }
27         input[type="text"]:hover{
28             background-color:skyblue;
29         }
30         input[type="text"]:focus{
31             background-color:red;
32         }
33         input[type="text"]:read-only{
34             background-color:gray;
35         }
36         
37         input[type="checkbox"]:checked{
38             outline:2px solid blue;
39         }
40         
41         input[type="checkbox"]:indeterminate{
42             outline:2px solid red;
43         }
44     </style>
45 </head>
46 <body>
47     <form>
48         <input type="radio" id="radio1" name="radio" onchange="radio_onchange();">可用</radio>
49         <input type="radio" id="radio2" name="radio" onchange="radio_onchange();">不可用</radio><br/>
50         <input type=text id="text1" disabled />
51         <p>
52             姓名:<input type="text" name="name" /><br/>
53             Email:<input type="text" name="email" value="http://www.cnblogs.com/xing901022/" readonly="readonly" />
54         </p>
55         
56         兴趣:<input type="checkbox">阅读</input>
57         <input type="checkbox">电影</input>
58         <input type="checkbox">游戏</input>
59         <input type="checkbox">上网</input>
60         <br/>
61         
62         
63     </form>
64 </body>
65 </html>

invalid:不符合元素范围的

valid:符合元素范围校验的

 1 <html>
 2 <head>
 3     <style type="text/css">
 4         input[type="text"]:invalid{
 5             background-color:red;
 6         }
 7         input[type="text"]:valid{
 8             background-color:white;
 9         }
10     </style>
11 </head>
12 <body>
13     <form>
14         <p>必须输入文字:<input type="text" required /></p>
15     </form>
16 </body>
17 </html>

不合法时

合法时

required:支持这个属性,并且定义了required的

optional:支持requried属性,但是没有定义的

 1 <html>
 2 <head>
 3     <style type="text/css">
 4         input[type="text"]:required{
 5             border-color:red;
 6             border-width:3px;
 7         }
 8         input[type="text"]:optional{
 9             border-color:blue;
10             border-width:3px;
11         }
12     </style>
13 </head>
14 <body>
15     <form>
16         姓名:<input type="text" required placeholder="必须输入" /><br/>
17         年龄:<input type="text" />
18     </form>
19 </body>
20 </html>

in-range:在范围内的

out-of-range:超出范围的

 1 <html>
 2     <head>
 3         <style type="text/css">
 4             input[type="number"]:in-range{
 5                 background-color:white;
 6             }
 7             input[type="number"]:out-of-range{
 8                 background-color:red;
 9             }
10         </style>
11     </head>
12     <body>
13         test number 1-100<input type=number min=0 max=100>
14     </body>
15 </html>

正常范围时

超出范围时

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

CSS伪元素介绍

伪元素表示了某个元素的子元素。这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。

8540
来自专栏有趣的django

20.DOM

定义 文档对象模型(Document Object Model)是一种用于HTML和XML文档的编程接口。 查找元素 1.直接查找 document.getEl...

35450
来自专栏天天

20171024

12330
来自专栏漫漫全栈路

jQuery Cheat—Sheet(jQuery学习笔记)

jQuery Cheat—Sheet(jQuery学习笔记) Web前端学习笔记之——jQuery学习笔记 ---- 什么是jQuery? jQuery是一种...

39230
来自专栏flutter开发者

自定义View番外篇

在前面的文章中我们学习了自定义View的基本用户,并且结合动画等相关知识给大家举了几个例子。

21520
来自专栏Python攻城狮

Javascript(2)-js进阶

备注:如果父元素进行了relative/absolute定位,offsetTop/offsetLeft就是相对父元素的顶部和左边的距离,如果父元素默认定位,就是...

24630
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。

24200
来自专栏Java技术分享圈

杨老师课堂之JavaScript案例全选、全不选、及反选

        3.2当第一个按钮--全选--被单击 会 触发一个函数,此函数涉及到复选框全部选中功能,但是复选框一共有多少个是未知的,所以我们要去做一个循环,...

7820
来自专栏向治洪

Markdown对应Yelee主题语法

概述 这里说的是Yelee主题的语法和原生语法是有些区别的;更多的基础语法可以到Cmd Markdown上面去查看;但是我觉得都会各有不同吧 注意这里说的不是真...

20460
来自专栏超然的博客

vue—你必须知道的

不要在实例属性或者回调函数中(例如,vm.$watch('a', newVal => this.myMethod())使用箭头函数。因为箭头函数会绑定父级上下文...

16120

扫码关注云+社区

领取腾讯云代金券