css003 选择器:明确设置哪些样式

css003 选择器:明确设置哪些样式

1、每个样式的两个部分:选择器和声明块

1、标签选择器:整体控制

2、类选择器:精确控制(.+字母、数字、连字符或下划线)

Css允许的类名为.+字母、数字、连字符或下划线(最前面的点一定要记得)且点之后的类名必须以字母开头类名区分大小写。

3、ID选择器:控制特殊的网页元素

4、通用选择器:*{font-size: 18px;}

2、标签

1、祖先标签

2、派生标签:子孙标签

3、父标签:离一个标签最近的祖先标签为父标签(每个标签只有一个父标签)

4、子标签:同父标签相反(一个标签可以有多个子标签)

5、同胞标签:同一父标签并且彼此相邻的标签成为同胞标签

如果想对一段文字里面的个别词进行样式设计如:<p>wohenhao<strong>lal</strong></p>中的lal进行样式设计则在产生式中可以写:p strong{Color:red;}

3、选择器名称之间空格与否的区别

如:.contact .name{color:red;}  (有空格表示contact类下面的name类)

(若没有空格的话则表示两个类)

p.intro{ color: red; }  (没有空格,专用于<p>这个标签(<p class=”intro”>)才有效)

(有空格,可以直接用.intro替代,避免和没有空格的混淆)

4、伪类(pseudo-class)和伪元素(pseudo-element)

.a:link  正常的,未访问过的网页链接

.a:visited  已经访问过的链接

.a:hover  鼠标滑过时链接的外观的改变(可用到元素上,不一定要用在链接上)

.a:active  激活的链接

(更多的伪类)

:focus  与:hover及其相似

:before 能在指定的内容前面添加指定的东西。如<p classs=”tip”>

p.tip:before{ content:”HOT TIP” }

会在p元素的tip类钱插入文本HOT TIP

:after  和:befor 相反,指定内容插入到指定位置的后面

::selection  (是双冒号的) (针对访问者已经在网页上选中的项目)(该选择器只能有color和background-color这连个属性)

如果想让选中的东西变成白色,并带有紫色背景:

::selection {color: #fff;  background-color: #993366;   }

如果只想让p元素里面的文本选中后变色,可以这样写:

p::selection {color: #fff;  background-color: #993366;   }

5、给段落定义样式

first-line  创建段落首行的样式

first-letter  创建段落首字母的样式

6、属性选择器

img[title]  如

<a href="#" class="sinaweibo"><img src="images/sina.png"></a>的css可以这样

a[ href=”#”]{ color:red; }

a[href^=”fttp://”]  ^表示以……开始

a[href$=”.pdf”]  $表示以……结束

7、子选择器

Body > h1 将选择body标签子标签里面的所有h1标签(注意子标签的定义)

:first-child

:last-child

:nth-child (有着强大的功能)可以将表格隔行设置不同的样式,可以设置不同列表项目的不同样式

设置表格行颜色交替

tr: nth-child(odd){ background-color: #993366; }  (偶数行)

tr: nth-child(even){ background-color: #993366; }  (奇数行)

tr: nth-child(3n+2){ background-color: #993366; }  (从第2个元素开始,没3个元素选择一次)

8、子类型选择器

:first-of-type

.sidebar p: first-of-type  (选择侧边栏的第一个段落)

:last-of-type  (同:first-of-type 用法)

:nth-of-tpe  (和nth-child 用法相似)

img:nth-of-type(odd) { float:left; }

img:nth-of-type(even) { float:right; }

 

9、同胞选择器

相邻同胞标签:  h2 + p{ color:red; }  (其中空格可选。(可选,就是可有可无,意思都一样))

同胞标签:h2 ~ p{ color:red; }  (~表示选择h2的所有同胞标签。其中空格可选)

10、否定伪类  :not()选择器

如:<p class=”classy”>

.classy{color:red;}  (选择classy类的文本,使之变为红色)

P:not(.clasy){color:red;} (除了应用classy的类的文本都变成了红色)

如:a[href^=”fttp://”]:not([href*=”mysite.com”])   (表示以http://开始,并且不以mysite.com开始 。其中*表示包含)

局限性:

1、只能使用简单的选择器,如元素选择器,通用选择器,类选择器,ID选择器,伪类。

2、不能使用派生选择器

3、一个选择器中不能使用多个:not()选择器

时间: 2024-10-21 03:25:52

css003 选择器:明确设置哪些样式的相关文章

086设置日期选择器框的显示样式

效果如下: ViewController.h 1 #import <UIKit/UIKit.h> 2 3 @interface ViewController : UIViewController 4 @property (strong, nonatomic) UIDatePicker *datePChoice; 5 6 @end ViewController.m 1 #import "ViewController.h" 2 3 @interface ViewControll

css基础-css选择器和css文本样式相关

css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>class选择器>标签选择器 如果设置了同样的类样式,类样式与元素里类的顺序没

web前端入门到实战:css选择器和css文本样式相关

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url("*.css");使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>

5、通过js代码设置css样式

1.页面 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv=&

JS设置CSS样式的几种方式

用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100

02---按钮的设置 控制器拥有导航栏包装一层导航控制器 添加子控制器 UIBarButtonItem导航按钮 设置导航栏UINavigationBar主题 设置状态栏样式

一.按钮的设置 1.设置背景图片 [btn setBackgroundImage:image forState:UIControlStateNormal]; 2.内部UIImageView 1> 设置内部UIImageView的图片 [btn setImage:image forState:UIControlStateNormal]; // 不能写成btn.imageView.image = image; 2> 调整内部图片的内容模式 self.imageView.contentMode =

WPF Mahapps.Metro 设置主题样式

/// <summary> /// 设置App样式 /// </summary> /// <param name="accentName">窗口标题栏样式</param> /// <param name="themeName">背景样式</param> private void ChangeTheme(string accentName, string themeName) { Accent e

Poi设置列样式

最近做的项目中用到Poi导出Excel文件做模板,其中有的列需要设置为文本格式,查资料发现都是给单元格设置样式,由于是模板单元格都没内容,所以不能通过设置单元格式样式的方式操作,网上有说法是不能设置列样式,颇为失望. 没想到自己偶然在sheet的联想列表中发现这个: 马上试用,问题迎刃而解~ HSSFCellStyle idNoStyle = workbook.createCellStyle(); HSSFDataFormat format = workbook.createDataFormat

jquery easyui datagrid设置行样式 不可删除某行

rowStyler: function (index,row) { if (parseInt(row.ksrs) > 0) { return 'color:red'; } }, onLoadSuccess:function(data){ var rows = data.rows; for (var j = 0; j < rows.length; j++) { if (parseInt(rows[j]["ksrs"]) > 0) { $(".datagrid-