CSS基础篇之选择符2

属性选择符：

选择符	版本	描述
E[att]	CSS2	选择具有att属性的E元素。
E[att="val"]	CSS2	选择具有att属性且属性值等于val的E元素。
E[att~="val"]	CSS2	选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
E[att^="val"]	CSS3	选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"]	CSS3	选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"]	CSS3	选择具有att属性且属性值为包含val的字符串的E元素。
E[att\|="val"]	CSS2	选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

各个例子：

E[att]

<style>

img[alt] {

    margin: 10px;

}

</style>

<img src="图片url" alt="" />

<img src="图片url" />

这里我用了所有img标签里有alt属性就会字体整个10个像素大小，这里只有第一个img元素里面有alt属性有alt属性的元素字体会变成10个像素大小。

E[att="val"]

<style>

input[type="text"] {

    border: 2px solid #000;

}

</style>

<input type="text" />

<input type="submit" />

这里代表所有input里面的有type=“text”属性的边框为2个像素黑色实线。

E[att~="val"]

<style>

div[class~="a"] {

    border: 2px solid #000;

}

</style>

<div class="a">1</div>

<div class="b">2</div>

<div class="a b">3</div>

div标签里用空格间隔的class=“a”（其中一个属性值有a）都会选择到。

E[att^="val"]

<style>

div[class^="a"] {

    border: 2px solid #000;

}

</style>

<div class="abc">1</div>

<div class="acb">2</div>

<div class="bac">3</div>

div标签里面class属性值开头第一个字符串为a的都会选择到。

E[att$="val"]

<style>

div[class$="c"] {

    border: 2px solid #000;

}

</style>

<div class="abc">1</div>

<div class="acb">2</div>

<div class="bac">3</div>

div标签里面class属性值最后一个字符串为（a）的都会选择到。

E[att|="val"]

<style>

div[class*="b"] {

    border: 2px solid #000;

}

</style>

<div class="abc">1</div>

<div class="acb">2</div>

<div class="bac">3</div>

div标签里面class属性值里面有相同的字符串（b）就会选择到。

E[att*="val"]

<style>

div[class|="a"] {

    border: 2px solid #000;

}

</style>

<div class="a-test">1</div>

<div class="b-test">2</div>

<div class="c-test">3</div>

div标签里面class属性值里面有这个符号 - 的，例子里是a-的属性值会改变。

伪对象选择符：

E:first-letter/E::first-letter	CSS1/3	设置对象内的第一个字符的样式。
E:first-line/E::first-line	CSS1/3	设置对象内的第一行的样式。
E:before/E::before	CSS2/3	设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E:after/E::after	CSS2/3	设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
E::placeholder	CSS3	设置对象文字占位符的样式。
E::selection	CSS3	设置对象被选择时的颜色。

E:first-letter/E::first-letter

此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。该伪类常被用来配合font-size属性和float属性制作首字下沉效果。

<style>

h1{font-size:16px;}

p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;}

p:first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}

p::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}

</style>

</head>

<body>

<h1>杂志常用的首字下沉效果</h1>

<p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>

</body>

E:first-line/E::first-line

效果：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。

<style>

h1{font-size:16px;}

p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;}

p:first-line {color:#090;}

p::first-line {color:#090;}

</style>

</head>

<body>

<h1>第一行文字的颜色与其它不同</h1>

<p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>

</body>

E::placeholder

用于文本框的提示字体。

<style>

input::-webkit-input-placeholder {

    color: green;

}

input:-ms-input-placeholder { // IE10+

    color: green;

}

input:-moz-placeholder { // Firefox4-18

    color: green;

}

input::-moz-placeholder { // Firefox19+

    color: green;

}

</style>

</head>

<body>

  <input id="test" placeholder="请输入密码!">

</body>

E::selection

设置对象被选择时的样式

需要注意的是，::selection只能定义被选择时的background-color，color及text-shaow

<style>

p::-moz-selection{background:#000;color:#f00;}

p::selection{background:#000;color:#f00;}

</style>

</head>

<body>

<h1>选中下面的文字，看看它的颜色</h1>

<p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>

字体样式

font-family（字体的样式）

p { font-family:‘宋体'，'黑体', '微软雅黑’ }

输入多个字体时用，号间隔。输入的字体样式名称加 ‘ ’ 号。多字体样式用于查看浏览器字体种类如果你没有其中一个还能用其他几个。

font-size（字体大小）

p { font-size:1px;}

改变你所要的标签元素的字体大小。

font-weight（字体的加粗）

p { font-weight:bold;}

虽然可以用数值调，但不建议用因为区别不大。最好用bold。

font-style（字体倾斜）

p { font-style: normal; }

指定文本字体样式为正常的字体

p { font-style: italic; }

指定文本字体样式为斜体。对于没有设计斜体的特殊字体。（先天）

p { font-style: oblique; }

指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字。（后天）

font（字体样式缩写）

这是没有缩写

p{

    font-style:italic;

    font-weight:bold;

    font-size:14px;

    line-height:22px;

    font-family:宋体;

}

缩写后

p { font:italic bold 14px/22px 宋体}

其实属性写发顺序是是否倾斜-字体的加粗-字体大小-字体高度-字体样式这个顺序。注意大小和高度中间要用 / 号分开。

color（字体颜色）

颜色有三种值

1.颜色英文单词 blue、yellow。在这个取色比较少

p{

    color:#blue;

}

2.十六进制表示法用 # 开头的PS里面颜色也有这个

p{

    color:#FF0000;

}

3.RGB PS里面也有的

p{color:rgb(0,0,0);}

数值0~255

4.rpga 后面的A表示透明度50%

p{

    color:（0，0，0，.5）;

}

前面三个数值从0~255最后一个是透明多少。

text-decorcation（文本装饰线条）

p { text-decoration:overline;}

overline：指定文字的装饰是上划线

p { text-decoration:underline;}

underline：指定文字的装饰是下划线

p { text-decoration:line-through;}

line-through：指定文字的装饰是删除线

text-shaow
属性和值
h-shaow   必写。水平阴影的位置。可以负值。
v-shaow   必写。垂直阴影的位置。可以负值。
blur      可选。阴影模糊的距离。
color　　　可选。阴影的颜色。

完整

h1{

            h-shadow:-3px;

            v-shadow:-4px;

            blur:5px;

            color:blue;

}


缩写

h1{

    text-shadow: 2px 2px #ff0000;

}

缩写写法顺序h-shadow、v-shadow、blur、color

CSS基础篇之选择符2的更多相关文章

CSS基础篇之选择符
关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...
CSS基础篇之选择符3
border(边框) 如何用CSS调出边框我们给p标签加一个边框试一下 p{ border:1px solid #ccc:/*这是缩写*/ } 第一个值是为边框的宽度第二个值是为边框线样式为直线 ...
CSS全览&lowbar;选择符+特指+单位+字体
CSS全览_选择符+特指+单位+字体目录 CSS全览_选择符+特指+单位+字体 1. CSS样式 2. 选择符 3. 特指度和层叠 4. 值和单位 5. 字体作者: https://www.cnb ...
CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
好程序员web前端分享CSS基础篇
学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML.CSS注释 ...
前端面试题——html与css基础篇
整理一波html和css的面试题,侧重基础,希望明天面试能用到~(╥╯^╰╥) 一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.C ...
html/css基础篇——iframe和frame的区别【转】
转自共享圈的使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别.其中本人不认同的地方有做小修改注:HTML5不再支持使用frame,iframe只有src 属性一. ...
html/css基础篇——html代码编写过程中的几个警惕点
本文想说的警惕点与浏览器兼容无关,主要是几个本人在项目中遇到的几个小问题的总结,问题虽小,但是却有时很困扰人,在此记录一下,如果后期有此类问题会持续添加到这里. 1.内联标签之间的空格正常情况下书写 ...
html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...

随机推荐

NGUI 指定视口大小
由于只是给Uinty开发插件,对Unity没有系统的学习,对Unity的很多功能都不是非常了解,幸得其他Unity同事的耐心教导,才不至于想崩头.记录一下,避免重复犯错. NGUI可以建立指定视口大小 ...
转自 z55250825 的几篇关于FFT的博文（二）
题目大意:高精度乘法. fft的实现貌似有很多种,咱先写的是一种递归的fft,应该算是比较快的了吧.参考了 Evil君的代码,那个运算符重载看的咱P党泪流满面. (没想到P竟然有运算符重载咩 ...
Unity3d之将terrain转化成mesh
Unity3d中,terrain还是比较耗的,DrawCall数也比较多,为了优化性能,可能需要将terrain转化成mesh. 现提供一工具,思路是根据terrain高度图生成mesh等,可参考: ...
u8g2库的相关资料
2017-12-1309:13:32更新51论坛上的帖子,大神自己写的库文件,待调试! http://www.51hei.com/bbs/forum.php?mod=viewthread&ti ...
fstat函数
一.函数原型 #include<sys/stat.h> #include<unistd.h> int fstat(int fildes,struct stat *buf); 返 ...
file 文件处理
python文件处理 #写文件 >>> f=open("test.log","w") #"w"写入模式 >>& ...
教你通过Node&period;js漏洞完成渗透测试
本篇文章较为详细的讲述了通过node.js的已知漏洞来完成渗透测试的过程,介绍了node.js存在的漏洞可以在多种工具下的不同利用方式.因为我认为会对论坛部分web安全新手有所帮助,所以整理到论坛中. ...
js压缩上传图片base64长度
im发送图片,现将图片压缩再上传 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. ...
前端js如何生成一个对象，并转化为json字符串
https://www.cnblogs.com/May-day/p/6841958.html 一,直接上代码 <script src="../../Content/jquery-2.0 ...
HDU 3046
http://acm.hdu.edu.cn/showproblem.php?pid=3046 典型的最小割模型 #include <iostream> #include <cstdi ...