中小企业网络营销-能猫企业网络营销顾问,专业提供企业网络营销策略分析、网络营销策划等企业营销服务。

您现在的位置是:首页 - 学习记录 - 正文

css8种选择符汇总-css学习笔记2

1、通配符选择符

所谓通配符,其实就是一个星号而已,通配符选择符一般是用来对页面所有的元素来应用其样式。如:

*{margin:0;padding:0;}将页面的所有元素的内外边距都设为0

p *{color:#f00;}将P标签后的所有后代元素的颜色设置为红色;

2、类选择符

类 class,可以将一段样式定义一个类,在需要的位置可以重复调用;

类在css中,必须以小点.作为前缀,紧跟一个具有语义的自定义类名;

3、包含选择符

包含选择符和怒多人称他为派生选择符或者后代选择器,因为该选择符的类型是作用于某个元素的子元素。比如我们将P标签的strong标签定义样式,那么就可以这样定义:

p strong{font:18px/140% 400;} 定义标签 定义文字去除加粗、18像素,行高140%

4、子选择符

子选择符也称作对象选择符,其主要作用是定义子元素对象的样式,无法定义子元素以外的对象。选择符和选择符之间要用 > 符合才是子选择符。例如我们要定义body标签下的子元素strong标签的样式:

body > strong {colore:ff0000;}定义P标签所汉堡的span标签的文字为红色。

<style type="text/css">

body > strong {

color:#FF0000; /*定义p标签所包含的span标签内的文字颜色为红色*/

font-size:28px; /*定义文字大小为18px*/

text-decoration:underline; /*定义文字具有下划线*/

}

</style>

<title>子选择符</title>

</head>

<body>

<p>CSS很强大,<strong>可以控制页面<span>任何元素</span>的样式</strong ></p>

<strong>与世界同步,做一个成功的页面仔</strong>

第一个strong标签与body标签的关系是:body>p>strong 而不是body>strong 的关系,不紧挨着,所以不显示红色。

注意:子选择符不是所有的浏览器都是支持的,只有在IE7 以上的版本才是支持的。

5、相邻选择符

相邻选择符和子选择符非常类似,只是将中间的>换成了+,但是功能却差距很大。其主要作用是:匹配同一个父级元素下某个元素之后的元素。

<style type="text/css">

p + strong {

color:#FF0000; /*定义p标签所包含的span标签内的文字颜色为红色*/

font-size:28px; /*定义文字大小为18px*/

text-decoration:underline; /*定义文字具有下划线*/

}

</style>

<title>相邻选择符</title>

</head>


<body>

<p>CSS很强大,<strong>可以控制页面<span>任何元素</span>的样式</strong ></p>

<strong>与世界同步,做一个成功的页面仔</strong>

<strong>与世界同步与世界同步</strong>

</body>

P标签和strongs是相邻的关系,P标签和strong标签是相互包含的关系,所有P标签和STRONG标签不变成红色。

6、属性选择符

属性选择符的格式是在标签元素后紧跟一对中括号,中括号里的内容就是该标签元素的属性或者表达式。属性选择符有4中样式。

6.1 E[attr]

<style type="text/css">

*[class] {

color:#FF0000; /*定义p标签所包含的span标签内的文字颜色为红色*/

font-size:28px; /*定义文字大小为18px*/

}

</style>

<title>E[attr]属性选择符</title>

</head>

<body>

<p class="paragraphs">带class属性的段落标签p</p>

<a href="http://www.jujian.org">没有class属性的连接标签a</a>

<p>这个是没有class属性的段落标签p</p>

<a href="http://www.wlyxe.cn" class="myLink">带class属性的连接标签a</a>

</body>

可以发现,页面中所有带有call属性的任何一个标签都定义为红色、文字大小为18像素。

6.2 E[attr="value"]

<style type="text/css">

input[type="text"] {

text-align:center;

border:3px solid #FF0000;

background-color:#E8E8E8;

}   /* 定义type属性值为text的input标签元素的样式 */

</style>

<title>E[attr="value"]属性选择符</title>

</head>


<body>

<form method="post" action="">

<input type="text" value="这个是文本框" /> <input type="password" value="这个是密码框" />

</form>

</body>

可以看到type属性值为text的标签元素都被重新定义了。

6.3 E[attr~="value"] 空格隔开

E[attr~="value"]是具有attr属性值并且是用空格隔开的字段,并且属性值等于value的E标签元素.

<style type="text/css">

p[title~="css"] {

font-size:40px;

color:#FF0000;

margin:0;

}

</style>

<title>E[attr~="value"]属性选择符</title>

</head>


<body>

<p title="css xhtml">title属性值为xhtml css的段落标签p</p>

<p title="css+xhtml">title属性值为css xhtml的段落标签p</p>

<p title="Cascading Style Sheets(层叠样式表)的简称为 css">title属性值为“Cascading Style Sheets(层叠样式表)的简称为css”的段落标签p</p>

 

</body>

 

6.4 E[attr|="value"] 使用连接符 - 隔开的

E[attr|="value"] 匹配具有 attr 属性且属性值是value值开始,并使用连字符-分开的E标签元素。

<style type="text/css">

p[title|="css"] {

font-size:29px;

color:#FF0000;

margin:0;

}

</style>

<title>E[attr|="value"]属性选择符</title>

</head>

<body>

<p title="xhtml-css">title属性值为xhtml-css的段落标签p</p>

<p title="css+xhtml">title属性值为css+xhtml的段落标签p</p>

<p title="css-Cascading Style Sheets(层叠样式表)的简称">title属性值为“css-Cascading Style Sheets(层叠样式表)的简称”的段落标签p</p>

</body>

只有第三段标签的P中的title属性值是以CSS字段开始并以连字符 - 分隔的,所以只有第三段标签P才会被重新定义。

7、ID选择符

ID选择符和类选择符比较相近,类选择符是用 . 分开的,ID选择符是用# 分开的。一个页面中不能出现同名的ID选择符,并且只能被使用一次,其权限比类选择符要高,因为ID选择符在JS中用的比较多,容易出现脚本错误,请谨慎使用。

<style type="text/css">

#myContent {

font-weight:bold; /*加粗文字*/

color:#0000FF; /*定义文字颜色为蓝色*/

}

</style>

</head>


<body>

<p>CSS很强大,可以控制页面中任何元素的表现方式</p>

<p id="myContent">与众不同,突出个性</p>

</body>

8、选择符的组合关系

选择符的使用最大的优势不是单枪匹马奋斗,而应该是针对不同的页面结构组合成各种不同的方阵。其主要体现在针对性使用类选择符和ID选择符、选择符群组及选择符组合,这三种方式。

8.1 针对性使用类选择符:

例如:页面中所有的标签元素的类名都叫做. 没有content,需要将段落标签P的样式定义为字体颜色为红色、大小为28px;

<style type="text/css">

.myContent {

font-size:12px; /* 将页面中所有类名为myContent的标签中文字定义为12px */

}

p.myContent {

font-size:28px;

text-decoration:underline;

color:#FF0000;

} /* 定义类名为myContent的段落标签p的样式 */

</style>

<title>针对性选择符</title>

</head>


<body>

<span class="myContent">span标签内的文字,类名myContent</span>

<div class="myContent">div标签内的文字,类名为myContent</div>

<strong class="myContent">strong标签内的文字,类名为myContent</strong>

<p class="myContent">p标签内的文字,类名为myContent</p>

<p>p标签内的文字,无任何类名</p>

</body>

8.2 选择符群组 (,逗号分开)

顾名思义,选择符群组就是将多个相同定义的选择符组合并。

<style type="text/css">

p, .myContent, #title {

font-size:18px;

color:#FF0000;

}

</style>

<title>群组选择符</title>

</head>


<body>

<p>这个是段落标签p内的文字</p>

<span class="myContent">这个是标签span内的文字</span>

<h3 id="title">这个是标题标签h3内的文字</h3>

<div>为什么上面的几个标签都是红色、18px的文字,而我这个div标签内的文字却不是啊!</div>

</body>

将段落标签 P 类选择符myContent,,ID选择符 title,都重新定义了。

在选择符群组中,每个选择符之间都使用英文逗号,隔开,作为间隔号,选择符之间的关系为并列关系。

8.3 选择符组合( 空格分开)

选择符组合,根据HTML的结构关系,层层递进的罗列选择符,目标选择符为最后一个选择符。每个选择符之间使用空格分开,他们是父子关系。

<style type="text/css">

p span {

color:yellow;

color:#f00;

font-size:30px;

}/*定义p标签中的子标签span的文字颜色为红色*/

</style>

<title>选择符的组合</title>

</head>


<body>

<p>我是段落标签p中的文字,包含了<span>span标签</span>,但<span>span标签的文字居然是红色的</span>,神奇啊!</p>

</body>

 

仔细看完以上的例子,相信你你对CSS选择符有了一定的了解了。

 

标签:csscss学习笔记css选择符
分类:学习记录| 发布:阿东| 查看: | 发表时间:2017/9/2
原创文章如转载,请注明:转载自企业网络营销策划 http://www.wlyxe.cn/
本文链接:http://www.wlyxe.cn/xuexi/625.html

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

网络营销

|

网络营销推广

|

网络营销策划

|

网络营销外包

|

企业网络营销

|

网络营销方案

|

网络品牌营销

|

网站运营策划

|

SEO优化

|

中小企业网络营销

|
关于本站 | 联系我们 | 广告服务 | 信息投稿 | 网站地图 | 免责声明 | 申请友链 | 收藏本站
Powered By Z-Blog 1.8 | Login | | Theme By www.wlyxe.cn